CSS. Урок 10 Взаєморозташування блоків.

1. Властивість float. Блоки поряд.
2. Відмінити розташування поряд. clear:both
3. Групування блоків. Контейнер

   1. Властивість float

   Якщо на веб сторінці створено блок, то всі інші елементи будут розташовуватися під ним, або над ним. Для розташування будб-яких елементів (текстів, зображень, іших блоків) праворуч, або ліворуч необхідно застосувати властивість CSS float.

   Значенням може бути left, right.

   • float:left; - блок зміщується ліворуч, решта елементів розташовуються праворуч вздовж правої кромки блоку.
   • float:right; - блок зміщується праворуч, решта виводиться ліворуч вздовж лівої кромки блоку.

   Варто розглянути як працює float на прикладах:

   Приклад 1: без float

   file css

   .block1 {
   background-color:lightblue;
   width:50px;
   height:40px;
   }
   .block2 {
   background-color:lightgrey;
   width:50px;
   height:40px;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div class = block1>
   Text
   </div>
   <div class = block2>
   Text
   </div>
   </BODY> </HTML>
   
   

   Ось як це виглядає в браузері:

   text
   text
   
   

   Зазвичай блоки розташовуються один під одним. Але, якщо треба розташувати блоки поруч, то необхідно вказати блокам їх місце відносно інших елементів, в т.ч. інших блоків, застосувавши властивість float

   Приклад 2. Застосування float

   file css

   .block1 {
   background-color:lightblue;
   width:50px;
   height:40px;
   float:left;
   }
   
   .block2 {
   background-color:lightgrey;
   width:50px;
   height:40px;
   float:left;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div class = block1>
   Text
   </div>
   
   <div class = block2>
   Text
   </div>
   </BODY> </HTML>
   
   

   В браузері видно, що блоки розташовуються поряд зліва направо:

   
   
   text
   text
   
   
   
   

   2. Властивість clear:both;

   Якщо захотіти додати ще якийсь елемент знизу, то треба в ньому відмінити властивість float, інакше він буде "приліпати" до попередніх елементів. Для відміни float найкраще застосувати властивість clear зі значенням both.

   Приклад 3. Застосування clear

   file css

   .block1 {
   background-color:lightblue;
   width:50px;
   height:40px;
   float:left;
   }
   
   .block2 {
   background-color:lightgrey;
   width:50px;
   height:40px;
   float:left;
   }
   
   .block3 {
   background-color:yellow;
   width:100px;
   height:40px;
   clear:both;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div class = block1>
   Text
   </div>
   
   <div class = block2>
   Text
   </div>
   
   <div class = block3>
   Text
   </div>
   </BODY> </HTML>
   
   

   В браузері:

   
   
   text
   text
   text
   
   

   Виконайте вправу в редакторі html

   Побудуйте із блоків із заданими розмірами макет. Кольорову схему підберіть на власний розсуд.

   
   

   3.Групування блоків

   На веб сторінках блоки можуть бути як поодиноки, так і вкладені один в одне. Для того щоб згрупувати блоки, їх треба помістити в блок - контейнер. Контейнер вважається батьківським блоком по відношенню до блоків що знаходяться в ньому. Блоки всередині контейнера вважаються дочірніми по відношенню до нього.

   

   Приклад 4. групування блоків

   file css

   .container {
   width:30%;
   margin-left:100px;
   }
   
   .box1 {
   width:100%;
   height:25px;
   background-color:magenta;
   }
   
   .box2 {
   width:100%; height:60px;
   background-color:lightblue;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div class = container>
       <div class = box1>
       </div>
       <div class = box2>
       </div>
   </div>
   </BODY>
   </HTML>
   
   
   • переглянути приклад

   В браузері:

   
   
   box1

   box2
   
   

   1) Зверніть увагу, що для кращого читання коду, дочірні div зсунуто відносно батьківського div на 4 пробіла.

   2) Із приклада бачимо, що розмір контейнера займає 30% по відношенню до вікна браузера, а розміри дочірніх блоків .box1 та .box2 по 100%, хоча бачимо, що їх ширина також 30%. Важливо розуміти, що розміри дочірніх блоків у % встановлюються відносно батьківського контейнера.

   3) Властивість margin-left:100px; (зсув на 100px ліворуч), що застосовано до контейнера "працює" і для дочірніх блоків також, т.я. вони вважаються одним цілим з контейнером.

   Виконайте вправу в редакторі html

   Побудуйте із блоків два однакових контейнера з різним текстом, та розташуйте їх поряд як показано у зразку. Кольорову схему підберіть на власний розсуд.