AXV

CSS Box model

Har bir element - quti: content, padding, border, margin

8-sinfWeb Full-stack4-hafta · 12-dars

Bugun nimalarni o‘rganamiz?

Quti modeli

4 qatlam: ichkaridan tashqariga

Padding va margin

Ichki va tashqi masofa, qisqa yozuv

O‘lcham

width, height, box-sizing

Takrorlash: o‘tgan dars

Qaysi xususiyat ota-elementdan bola elementga meros bo‘lib o‘tmaydi?

Matn xususiyatlari meros bo‘ladi. Chegara, fon va masofalar - yo‘q. Bugun aynan shular haqida.
01

Box model nima?

Brauzer uchun har bir element - to‘rtburchak quti

Qutining 4 qatlami

margin (tashqi masofa) border (chegara) padding (ichki masofa) content matn, rasm

O‘xshatish: sovg‘a qutisi

Content

Sovg‘aning o‘zi

Padding

Qutidagi yumshoq qog‘oz

Border

Qutining devori

Margin

Javondagi qo‘shni qutilargacha bo‘sh joy

Birinchi quti


.karta {
  width: 300px;
}

Birinchi quti


.karta {
  width: 300px;
  padding: 20px;
  border: 2px solid navy;
  margin: 15px;
}

Har qatordan keyin quti qanday o‘zgarishini o‘quvchilardan so‘rang.

02

Padding va margin

Ichki va tashqi masofa

Padding yoki margin?

padding

Chegara ichidagi masofa
Fon rangi uni ham qoplaydi
VS

margin

Chegaradan tashqaridagi masofa
Shaffof: fon yo‘q

Qisqa yozuv: 1, 2 va 4 qiymat

padding: 10px to‘rt tomon: 10 padding: 10px 20px tepa-past 10 | chap-o‘ng 20 10px 20px 5px 0 tepa, o‘ng, past, chap

Yozuvni o‘qing. Bosing

margin: 20px

bosing

to‘rt tomondan 20px

padding: 5px 15px

bosing

tepa-past 5px, chap-o‘ng 15px

margin-top: 30px

bosing

faqat tepadan 30px

Mini-test

padding: 10px 20px 5px 0; - chap tomondagi ichki masofa qancha?

Soat mili bo‘yicha: tepa 10, o‘ng 20, past 5, chap 0.
03

Border

Qalinlik, tur, rang

Chegara turlari

solid dashed dotted double radius border: 3px solid crimson; qalinlik · tur · rang

Border: kodda


border: 3px solid crimson;       /* qalinlik, tur, rang */
border-radius: 12px;             /* yumaloq burchaklar */
border-bottom: 1px dashed gray;  /* faqat bitta tomon */

border: 3px crimson; - turi (solid) yo‘q, chegara chizilmaydi.

04

O‘lcham va box-sizing

Quti aslida qancha joy egallaydi?

content-box: jami kenglik

width: 300px 2020paddingpadding 22 300 + 2·20 + 2·2 = 344px

box-sizing: ikki rejim

Odatiy holat

width = faqat content. Padding va border qo‘shiladi: 300px yozdik - 344px chiqdi.

* { box-sizing: border-box; }

width padding va borderni ham o‘z ichiga oladi: quti aniq 300px.

Hisoblaymiz: 3-topshiriq

width: 200px; padding: 10px; border: 5px solid; margin: 20px;

content-box: ko‘rinadigan

200 + 2·10 + 2·5 = 230px

content-box: margin bilan

230 + 2·20 = 270px

border-box

ko‘rinadigan 200px, margin bilan 240px

Blokni markazlash: margin: 0 auto


.konteyner {
  width: 600px;
  margin: 0 auto;   /* tepa-past 0, chap-o'ng teng */
}

width berilmasa, blok butun qatorni egallaydi va markazlanmaydi.

Bashorat qiling

* { box-sizing: border-box; } va .k { width: 250px; padding: 25px; border: 5px solid; }. Ko‘rinadigan kenglik?

border-box: padding va border width ichida. Quti aniq 250px.

F12 va odatiy xatolar

DevTools (F12)

Elementni tanlang: «Computed» bo‘limida qutining 4 qatlami raqamlari bilan ko‘rinadi.

Xatolar

margin va padding ni almashtirish; box-sizing yozmaslik; chegarada turini unutish.

0
qatlam
0
chegara turi

Amaliy topshiriq 30 daqiqa

Osondiv ga padding, border, margin bering va F12 da quti rasmini ko‘ring.
O'rtaKarta maketi: kenglik 300px, ichki masofa 20px, yumaloq burchak, kartalar orasida 15px.
Qiyincontent-box va border-box da qutining jami o‘lchamini hisoblang va DevTools bilan tekshiring.

Xulosa

Bugun o‘rgandik

Content, padding, border, margin. Qisqa yozuv, chegara turlari, box-sizing: border-box, margin: 0 auto.

Uyga vazifa

Uchta kartali sahifa: har bir kartaga padding, border, radius va margin.

Keyingi dars: Flexbox - qutilarni qatorga terish.