6. Bloklar 1

Element "quti"si (element box)
QODIRBEK MAXAROV

O'lchamlar
width – element kengligi
Qiymatlari: uzunlik| foiz | auto
height – element uzunligi
Qiymatlari: uzunlik | foiz | auto
max-height, max-width,
min-height, min-width – element uzunligi
Qiymatlari: uzunlik | foiz | auto
box-sizing – quti o'lchami
Qiymatlari: content-box | border-box
QODIRBEK MAXAROV

O'lchamlar (content-box model)
p {
background: #f2f5d5;
width: 500px;
height: 150px;
padding: 20px;
border: 5px solid gray;
margin: 20px;
}
QODIRBEK MAXAROV
Quti elementning ko'rinadigan kengligi =
5px + 20px +
500px content width +
20px + 5px = 550px
Quti elementning to'liq kengligi =
20px + 5px + 20px +
500px content width +
20px + 5px + 20px = 590px

O'lchamlar (border-box model)
p {
background: #f2f5d5;
width: 500px;
height: 150px;
padding: 20px;
border: 5px solid gray;
margin: 20px;
box-sizing: border-box;
}
QODIRBEK MAXAROV
Quti elementning ko'rinadigan kengligi =
5px + 20px +
450px content width +
20px + 5px = 500px
Quti elementning to'liq kengligi =
20px + 5px + 20px +
450px content width +
20px + 5px + 20px = 540px

O'lchamlar
QODIRBEK MAXAROV

"Oshib ketish"ni qayta ishlash
"Quti" o'lchamidan ortib ketadigan kontentni yashirish
overflow
Qiymatlari: visible | hidden | scroll | auto
overflow-x
Qiymatlari: visible | hidden | scroll | auto
overflow-y
Qiymatlari: visible | hidden | scroll | auto
QODIRBEK MAXAROV

"Oshib ketish"ni qayta ishlash
* {
margin: 0;
padding: 0;
}
div {
width: 24%;
height: 100px;
display: inline-block;
background-color: antiquewhite;
margin-bottom: 90px;
}
.a0 {
overflow: visible;
}
.a1 {
overflow: hidden;
}
.a2 {
overflow: auto;
}
QODIRBEK MAXAROV
.a31 {
white-space: nowrap;
overflow-x: scroll;
}
.a32 {
overflow-y: scroll;
}
.a33 {
overflow: scroll;
}

Vertikal joylashuv (matn sifatida)
vertical-align (blokli elementlar qatorli element sifatida ishlatilganda o'rinli)
Qiymatlari: baseline | sub | super | text-top | text-bottom | middle | top | bottom | foiz | uzunlik
* {
margin: 0;
padding: 0;
}
div {
width: 24%;
height: 100px;
display: inline-block;
background-color: antiquewhite;
margin-bottom: 90px;
vertical-align: top;
}
.a0 {
overflow: visible;
}
QODIRBEK MAXAROV

Kontent va chegara orasidagi masofa (Padding)
Elementning kontent sohasidan chegarasigacha bo'lgan masofa
padding-top, padding-right, padding-bottom, padding-left
Qiymatlari: uzunlik | foiz
QODIRBEK MAXAROV
padding-top: 2em;
padding-right: 4em;
padding-bottom: 2em;
padding-left: 4em;

Qisqa padding xossasi
Tomonlar bo'yicha qisqartirilgan shakli:
padding
Qiymatlari: uzunlik | foiz
Ko'rinishlari:
padding: top right bottom left; padding: 20px 10px 5px 10px;
padding: top right/left bottom; padding: 20px 10px 5px;
padding: top/bottom right/left; padding: 20px 10px;
padding: top/right/bottom/left; padding: 20px;
QODIRBEK MAXAROV

Qisqa padding xossasi
div {
width: 175px;
height: 175px;
display: inline-block;
border: solid 2px red;
box-sizing: border-box;
background-color: lightgreen;
background-clip: content-box;
overflow: hidden;
margin: 5px;
}
.a1 {
padding: 20px 10px 5px 10px;
}
.a2 {
padding: 20px 10px 5px;
}
.a3 {
padding: 20px 10px;
}
.a4 {
padding: 20px;
}
QODIRBEK MAXAROV

Chegara stili
border-top-style, border-right-style, border-bottom-style, border-left-style
Qiymatlari: none | solid | hidden | dotted | dashed | double | groove | ridge | inset | outset
border-style (Tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: none | solid | hidden | dotted | dashed | double | groove | ridge | inset | outset
QODIRBEK MAXAROV

Chegara qalinligi va rangi
border-top-width, border-right-width, border-bottom-width, border-left-width,
border-width (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik | thin | medium | thick
border-top-color, border-right-color, border-bottom-color, border-left-color,
border-color (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari : rang qiymatlar | transparent
div.sp {
border-color: maroon blueviolet;
border-style: solid dashed double;
border-width: 6px;
width: 300px;
height: 100px;
}
QODIRBEK MAXAROV

Qisqartirilgan border xossasi
border-top, border-right, border-bottom, border-left,
border
qiymatlari: border-style border-width border-color
*border xossasi faqatgina 1ta qiymat qabul qiladi va qiymatlar barcha tomonlarga ta'sir etadi.
border: solid dashed double 6px maroon blueviolet;
border: double 6px turquoise;
QODIRBEK MAXAROV

Konturlar (tashqi chegara)
outline-style – kontur stili
Qiymatlari: auto | solid | none | dotted | dashed | double | groove | ridge | inset | outset
outline-width – kontur qalinligi
Qiymatlari : uzunlik | thin | medium | thick
outline-color – kontur rangi
Qiymatlari : rang qiymatlar | invert
outline-offset – kontur va chegara orasidagi masofa
Qiymatlari : uzunlik
outline – qisqa ko'rinishi
Qiymatlari: outline-style outline-width outline-color
border: double 6px blueviolet;
outline: lime 4px solid;
QODIRBEK MAXAROV

Aylanali burchaklar
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius,
Qiymatlari: uzunlik | foiz [ uzunlik | foiz ]
border-radius (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik | foiz [ / uzunlik | foiz ]
QODIRBEK MAXAROV
border-radius: 50px;
border-radius: 100px / 50px;
border-radius: 50px 100px;
border-radius: 50px 100px 150px 200px;

Elementlar orasidagi masofa (Margin)
Elementning chegarasining tashqi tomonidan bo'sh qoldiriluvchi joy
margin-top, margin-right, margin-bottom, margin-left
Qiymatlari: uzunlik | foiz | auto
margin (tomonlar bo'yicha qisqartirilgan shakli)
Qiymatlari: uzunlik | foiz | auto
QODIRBEK MAXAROV

Elementlar orasidagi masofa (Margin)
Tepa va pastki tashqi masofalar (margin) qo'shilmaydi, balki ularning eng kattasi olinadi.
QODIRBEK MAXAROV

Elementlar orasidagi masofa (Margin)
Margin masofa xossasi qatorli (inline) elementlarga qo'llanilganda faqat chap va o'ng tomondan bo'sh joy qoldiriladi, qatorning tepa va pastki qismi o'zgarishsiz qoladi.
QODIRBEK MAXAROV

Elementlar orasidagi manfiy masofa
Tashqi masofalar (margin) manfiy qiymat qabul qilishi mumkin.
QODIRBEK MAXAROV

Marginni avtomatik hisoblash
div {
background-color: lightgoldenrodyellow;
width: 300px;
height: 100px;
background-origin: content-box;
border: 1px solid red;
}
.a1 {
margin: auto;
padding: 10px;
width: 300px;
height: 200px;
}
.a2 {
margin: auto;
width: 50%;
background: lightblue;
}
QODIRBEK MAXAROV

Marginni avtomatik hisoblash
div {
background-color: lightgoldenrodyellow;
width: 300px;
height: 100px;
background-origin: content-box;
border: 1px solid red;
}
.a1 {
margin: auto;
padding-left: 25px;
width: 300px;
height: 200px;
}
.a2 {
margin: auto;
width: 50%;
background: lightblue;
}
QODIRBEK MAXAROV

Ko'rinish turlari
display
Qiymatlari: inline | block | run-in | flex | grid | flow | flow-root | list-item |
table | table-row-group | table-header-group | table-footer-group |
table-row | table-cell | table-column-group | table-column |
table-caption | ruby | ruby-base | ruby-text | ruby-base-container |
ruby-text-container | inline-block | inline-table | inline-flex |
inline-grid | contents | none
QODIRBEK MAXAROV

Ko'rinish turlari
div {
margin: 10px;
padding: 10px;
background-color: lightyellow;
}
a {
min-width: 50px;
height: 30px;
line-height: 30px;
padding: 0 15px;
background-color: moccasin;
text-align: center;
}
.block a {
display: block;
}
.inline-block a {
display: inline-block;
}
QODIRBEK MAXAROV
Bosh sahifa
Biz haqimizda
Bog'lanish
Bosh sahifa
Biz haqimizda
Bog'lanish
Bosh sahifa
Biz haqimizda
Bog'lanish
A