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