42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="uk">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Display та Box-Sizing</title>
|
||
<link rel="stylesheet" href="style3.css">
|
||
</head>
|
||
<body>
|
||
<h2>Властивість 'display'</h2>
|
||
<p>Ми застосовуємо `display` до контейнерів або їх дочірніх елементів:</p>
|
||
|
||
<div class="container">
|
||
<h3>display: block</h3>
|
||
<div class="item display-block">Блок 1</div>
|
||
<div class="item display-block">Блок 2</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<h3>display: inline</h3>
|
||
<span class="item display-inline">Блок 1 (width/height не працює)</span>
|
||
<span class="item display-inline">Блок 2</span>
|
||
</div>
|
||
|
||
<div class="container display-flex">
|
||
<h3>display: flex</h3>
|
||
<div class="item">Блок 1</div>
|
||
<div class="item">Блок 2</div>
|
||
</div>
|
||
|
||
<h2>Властивість 'box-sizing'</h2>
|
||
<div class="box content-box">
|
||
<b>content-box (default):</b><br>
|
||
Width (200px) + Padding (40px) + Border (10px) =
|
||
<b>Загальна ширина 250px</b>
|
||
</div>
|
||
<div class="box border-box">
|
||
<b>border-box:</b><br>
|
||
Width (200px) =
|
||
<b>Загальна ширина 200px</b> (Padding і Border "сховані" всередину)
|
||
</div>
|
||
</body>
|
||
</html> |