Sənədin blok modeli

Hər element bir qutudur

Qutunun içəridən çölə hissələri məzmun, padding, border və margin-dir. Standart content-box modelində width yalnız məzmunun enidir. Məsələn, 200px məzmun, iki tərəfdə 20px padding və 2px border görünən eni 244px edir; margin bu hesabdan kənardadır.

* { box-sizing: border-box; }
.card {
  width: 200px;
  padding: 20px;
  border: 2px solid navy;
  margin: 16px auto;
  min-height: 120px;
}

Nümunə

Blok və sətirdaxili davranış

border-box verilmiş enə padding və border-i daxil edir, buna görə nümunədə görünən en 200px qalır. min-width, max-width, min-height və max-height sərhədlər qoyur; mətn böyüyəndə sabit hündürlük kəsilmə yarada bilər.

Blok element adətən yeni sətirdən başlayır; sətirdaxili element mətn axınında qalır. div və span ümumi konteynerlərdir. Qonşu blokların şaquli margin-ləri müəyyən hallarda birləşə bilər: 20px və 30px həmişə 50px etmir. Padding-lər birləşmir. Box model-i DevTools-da ölçərək nəticəni təsdiqlə.

Əlavə qeydlər və mənbələr

Hər elementin məzmunu, daxili boşluğu, sərhədi və xarici boşluğu var. Blok və sətirdaxili davranışı, div və span elementlərini, en və hündürlüyün hesablanmasını ayrı nümunələrdə müqayisə et.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

HTML və semantik struktur

Bu mövzuda

content, padding, border və margin
Blok və sətirdaxili elementlər
Ölçülər və box-sizing

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Qutunun ölçüsünü dəyiş

Padding və box-sizing-i dəyişərək görünən eni müqayisə et. Sonda border-box seç.

Daxili boşluq 12Ölçü modeli

Hədəf: Qutunu border-box modelinə keçir.

Məzmun

.element { padding: 12px; }
.element { box-sizing: content-box; }

Özün sına

Eyni width dəyərinə malik iki kart yarat. Birinə content-box, digərinə border-box ver və padding əlavə etdikdən sonra DevTools-da görünən enləri müqayisə et.

Nəticəni necə yoxlayım?

Padding və border daxil olan eni hesablayır, content-box və border-box nəticələrini DevTools-da müqayisə edirsən.

Gözlənilən nəticə

content-box kartının görünən eni 200 + 40 + 4 = 244 px olur.
border-box kartının görünən eni 200 px qalır; DevTools ölçüləri bunu təsdiqləyir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

content-box ölçüsünə padding və sərhəd sonradan əlavə olunur. border-box isə onları verilmiş enin daxilində saxlayır.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card content">content-box: 244px</div><div class="card border">border-box: 200px</div>
</body>
</html>

styles.css

.card{width:200px;padding:20px;border:2px solid #214e80;margin:16px 0;background:#dce9f7}.content{box-sizing:content-box}.border{box-sizing:border-box}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.