Рядково-блочні елементи

Блокові і рядкові елементи відмінно доповнюють один одного при верстці, займаючи кожен свою певну нішу. Але виникають ситуації, коли характеристик цих елементів явно недостатньо і блочні елементи потрібно розташувати в  рядок, або рядкові елементи зобити блочними
Для таких випадків властивість display: block; яка встановлюється по замовчуванню для кожного блочного елемента потрібно змінити  значення властивості display: inline-block;.
 Тоді блокові елементи починають себе поводити як  рядкові.
У деяких випадках буває необхідно, щоб рядковий елемент поводився як блоковий і навпаки. Для цього необхідно встановити відповідне значення властивості display, наприклад:
a {
display: block;
}/*перетворення рядкового елемента в блочний, 
завдяки чому весь блок, а не тільки посилання
 стають посиланням*/
div {
display: inline;
} /*перетворення блочного елемента в рядковий*/
В результаті змінюється тільки спосіб представлення елемента браузером, при цьому сам елемент свій тип не змінює.
Різницю між inline і inline-block можна представити картинкою: inline - м'який мішок, вміст якого розсипається всередині і розтягує батька як захоче і куди захоче, а inline-block - тверда коробка (box), явно обмежує поведінку нащадків.
Значення inline-block генерує блоковий елемент з поведінкою рядкового елемента. Іншими словами, елемент стає рядковим «зовні» і блоковим «всередині»: по відношенню до зовнішніх елементів, сусідам і предкам, він поводиться як рядковий (inline), а по відношенню до нащадків - як блок (block).
При цьому він набуває такі властивості малих елементів

  1. може розміщуватися на одному рядку з собі подібними;
  2. Правило display: inline-block вибудовує блоки рівними рядками, причому висота рядка визначається за найвищим з них.
  3. за замовчуванням має ширину за змістом (тобто, по ширині самого широкого елемента, який є всередині);
  4. піддається вертикальному вирівнюванню за допомогою властивості vertical-align. Однак вертикальне вирівнювання діє тільки на сам inline-block елемент і не поширюється на його нащадків;
Елемент з  властивістю display: inline-block зберігає ряд блокових властивостей:
    • можна управляти розмірами за допомогою width і height;
    • можна задавати поля (margin) і відступи (padding), як блоковому, при цьому вертикальні відступи НЕ будуть заїжджати на сусідні елементи;
    • можна центрувати вміст (text-align).
    Характеристики цих елементів наступні.
    • Ширина блоку виходить складанням значень: width, margin, border і padding.
    • Висота блоку виходить складанням значень: height, margin, border і padding.
    • Кілька елементів які йдуть підряд, розташовуються на одному рядку і переносяться на інший рядок при необхідності.

    "Схлопування" зовнішніх відступів у блоках

    Вертикальний відступ між двома сусідніми елементами дорівнює максимальному відступу між ними. Якщо відступ одного елемента дорівнює 20px, а другого 40px, то відступ між ними буде 40px.
    Цей ефект називається ефектом «схлопування» зовнішніх відступів.
    Горизонтальні відступи між елементами просто складаються. Наприклад, горизонтальний відступ між двома елементами з відступами 30px буде дорівнювати 60px.
    Рядково-блочні елементи дуже часто використовують для створення декоративних елементів: кнопок, плашок, блоків. Також завдяки їх розумному поводженню з їх допомогою створюють різні списки товарів в каталогах.
    Для створення сіток сторінок ці елементи використовуються рідше. Перша причина полягає в тому, що їх не підтримують старі браузери, наприклад, IE7 і молодше. А сітка сторінки - занадто критична річ, щоб дозволяти їй ламатися навіть в старих браузерах.

    ЗАВДАННЯ №1

    1. Зкопіювати   у свою папку Block  у файли наступний код 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Перше завдання</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <div class="block block1">Блок 1</div>
        <div class="block block2">Блок 2</div>
        <div class="block block3">Блок 3</div>
      </body>
    </html>

    /* Базові стилі, змінювати не треба */
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      width: 540px;
      min-height: 290px;
      padding-top: 20px;
      padding-left: 20px;

      font-size: 14px;
      line-height: 1.5;
      font-family: "Arial", sans-serif;
      color: red;

      background-color: #3a78a1;
      background-image: url("grid.png");
      background-repeat: repeat;
      background-position: -80px -80px;
    }

    .block1 {
      background-color: rgba(0, 255, 255, 0.5);
      border: 2px solid red;
      
    }
    .block2 {
      background-color: rgba(0, 255, 255, 0.5);
      border: 2px solid red;
      
    }
    .block3 {
      background-color: rgba(0, 255, 255, 0.5);
      border: 2px solid red;

    2. Також у папку Block помістити зображення сітки grid.png

    3. Задати блокам розміри висоти, ширини, внутрішніх, зовнішніх відступів, щоб блоки розташувались згідно зразка  по клітинках/ Размери клітинки — 20 на 20 пікселів:


    ЗАВДАННЯ №2

    1. Створити  сторінку яка містить  3 блоки ( ім'я класу .block) заданого  розміру:
    - ширина блоку 200рх;
    - висота 70 рх;
    - рамка: 2px, суцільна лінія колір: #999;
    - внутрішні відступи - 20 рх;
    - блоки розмістити в рядок

    ЗАВДАННЯ №3

     2. Три блоки створені в попередньому завдані помістити у блок-контейнер з класом .wraper з такими властивостями:
    - ширина блоку 600рх
    - зовнішній відступ: 20px auto;
    - колір фону: #ffc;

     Як поводять себе блоки всередині блоку-контейнеру? Чи помістились вони в одному рядку?

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

    Для вирішення цієї проблеми можна застосувати властивість box-sizing:border-box;,  особливо виправдано застосування цієї властивості, якщо ширина вказана в  відсотках
    Одне зі значень цієї властивості є border-box, яке дозволяє не враховувати в розмірах блоку відступи і межі. Таким чином, вказуючи розміри блоку, ви вказуєте їх всьому блоку, а не вмісту. Ця властивість підтримується в усіх сучасних браузерах.
    Щоб не вираховувати  розміри блоків на сторінці, можна зарзу задати властивість box-sizing:border-box; для всього документу:
    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

    Тому, в завданні №3 потрібно для трьох блоків крім раніше заданих розмірів вказати ще властивість, після цього блоки стануть в один ряд у батьківському блоці .wraper:
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;


    1 коментар:

    Підписатися на: Дописи (Atom)