CSSda Balandlik va Kenglik

CSSda Balandlik va Kenglik


CSS Balandlik va Kenglik o'lchovlari

CSS o'lchov hususiyatlari

CSS o'lchov hususiyatlari sizga elementning baladligi va kenglingini nazorat qilishga ruhsat beradi.
Bu elementni 100%li kengligi bor.


height(balandlik) va width(kenglik)ni o'rnatish

height va width xususiyatlari elementning balanfligi va kengligini o'rnatishda ishlatiladi.
height va width avto holatga o'rnatilishi mumkin(bu avtomatik ravishda. Anglatadiki, balandlik va kenglikni brauzer hisoblaydi), yoki uzunlik qiymatlarida belgilanadi px, cm, va boshqalar kabi yoki blokning foizida(%).

Bu <div> elementini 100 piksel balandligi va 500 piksel kengligi bor.

Eslatma:

height va width hususiyatlari padding, chegara, va marginlarni o'z ichiga olmaydi; ular elementning padding, chegara, va marginining ichiga sohaning balangligi/kengligini o'rnatadi.
Quyidagi misol <div> elementini 100 piksel balandligi va 500 piksel kengligi bilan korsatadi:

Namuna:

O'zingni Sinab Ko'r
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}


Maksimum-kenglik o'rnatish


max-width hususiyati elementning maksimum kengligini o'rnatishda ishlatiladi.
max-width uzunlik qiymatlarida ishlatilishi mumkin px, cm, va boshqalar kabi yoki blokning foizida(%) yoki yo'qga o'rnatiladi(bu avtomatik holda. Anglatadiki, bu yerda maksimum kenglik yo'q).
Yuqoridagi <div> bilan brauzer oynasi elemetning kengligidan(500px) dan kichik bo'lganda muammo kelib chiqadi. Brauzer keyin sahifaga srollbar(bir taraf bilan keyingisi ko'rsatuvchi tugma) qo'shadi.
O’rniga maksimum kenglik o'rnatish bu holatda brauzerning kichik oynalarni tutib turishini o'zgartiradi.

Maslahat:

Maslahat: Ikki div o'rtasidagi farqni ko'rish uchun, brauzer oynasi kengligini 500px dan kamroq qilib ko'ring.

Eslatma:

max-width xususiyatining qiymati width qabul qilmaydi.

Bu <div> elementi 100 piksel balandligi va 500 piksel maksimum kengligi bor.

Quyidagi misol <div> elementini 100 piksel balandligi va 500 piksel maksimum-qiymati bilan ko'rsatadi:

Namuna:

O'zingni Sinab Ko'r
div {
max-width: 500px;
height: 100px;
border: 3px solid #73AD21;
}


Hamma CSS o'lchov xususiyatlari

Hususiyati Tavsif
height Elementning balandligini o'rnatadi
max-height Elementning maksimum balandligini o'rnatadi
max-width Elementning maksimum kengligini o'rnatadi
min-height Elementning minimum balandlikni o'rnatadi
min-width Elementning minimum kengligini o'rnatadi
width Elementning kengligini o'rnatadi

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