CSS max-width

CSS max-width xossasi

max-width xossasi elementning maksimal kengligini belgilaydi.

Bu xossa element kengligining belgilangan qiymatdan katta bo‘lishiga yo‘l qo‘ymaydi (u kichikroq bo‘lishi mumkin, lekin kattaroq bo‘la olmaydi).

Bu xossa moslashuvchan maketlar yaratishda va turli ekran o‘lchamlarida kontentning o‘qilishini ta’minlashda foydalidir.

width bilan bog‘liq muammo:

Bu yerda gorizontal markazlashtirilgan va aniq width (600px) belgilangan <div> elementi bor:

Bu <div> elementining kengligi 600px, margin qiymati esa auto. Bu <div> elementining kengligi 600px, margin qiymati esa auto.

Agar brauzer oynasi element kengligidan kichik bo‘lsa, yuqoridagi <div> bilan nima sodir bo‘ladi? Kontentning bir qismi ko‘rinmay qoladi va brauzer sahifaga gorizontal scroll panelini qo‘shishi mumkin.

Uning o‘rniga max-width ishlatish:

Endi uning o‘rniga max-width xossasidan foydalanamiz. Bu brauzerning kichik oynalar bilan ishlashini yaxshilaydi:

Bu <div> elementining max-width qiymati 600px, margin qiymati esa auto. Bu <div> elementining max-width qiymati 600px, margin qiymati esa auto.

Maslahat: Ikki <div> o‘rtasidagi farqni ko‘rish uchun brauzer oynasi kengligini 600px dan kichikroq qilib o‘zgartiring!

Yuqoridagi ikki <div> uchun CSS kodi:

Misol

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

O'zingiz sinab ko'ring »

CSS CSS xossalari

Xossa	Description
max-width	Elementning maksimal kengligini belgilaydi
width	Elementning kengligini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish