CSSda joylashtirish tartibi – width va max-width atributlari

CSSda joylashtirish tartibi – width va max-width atributlari


CSSda joylashtirish tartibi – width va max-width atributlari


Width(kenglik), max-width(maksimal kenglik) va margin(hoshiya) atributlarining ishlatilishi

Avvalgi boblarda aytib o'tganimizdek, block-level elementi butun bor kenglikni qamrab oladi(eniga va bo'yiga kenglik qancha bo'lsa, shuncha qismni egallaydi).

Block-level elementiga width qiymatini berganda u o'zi turgan konteynerning chegarasi qadar cho'zilmaydi. Margin atributiga auto qiymatini bergan holda, uni konteynerning gorizontal yo'nalish bo'yicha eng o'rta qismiga joylashtirishish mumkin. Bunda elementdan konteynerning o'ng va chap hoshiyalarigacha bo'lgan masofa bir-biriga teng bo'ladi.


Quyida keltirilgan na'munada <div> elementining width atributiga 500px(piksel) va margin atributiga esa auto qiymati berilgan.

Namuna:

O'zingni Sinab Ko'r
div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

Ushbu holatda, brauzer oynasi element eni uzunligidan kichik bo'lib qolsa, brauzer avtomatik ravishda horizontal scrollbar elementini veb-sahifaga qo'shib qo'yadi.

Buning o'rniga max-width atributi ishlatilib, veb-sahifa kichkina oynalarda ochilganda ko'rinish sifati aksincha ortagining guvohi bo'lamiz. Kichik mexanizmlar uchun sayt yaratayotganimizda bu muhim rol o'ynaydi.


Quyida keltirilgan na'munada <div> elementining max-width atributiga 500px(piksel) va margin atributiga esa auto qiymati berilgan.

Namuna:

O'zingni Sinab Ko'r
div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

Width va max-width atributlarining o'rtasidagi farqini ko'rish uchun brauzer oynasini 500 pikseldan kamroq bo'lgan kenglikda oching va yuqorida berilgan Na'munalardagi ikki divning ko'rinishidagi farqning guvohi bo'ling.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017