Initial commit

2025-11-15 15:29:08 +02:00
commit e881dd953c
11 changed files with 406 additions and 0 deletions
--- a/task3.html
+++ b/task3.html
@@ -0,0 +1,42 @@
+<!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>