У попередньому розділі ми дізналися, що кожен елемент на сторінці є прямокутником. У цьому розділі ми побачимо, як викласти кілька блоків на сторінці.
block, inline та inline-block
Щодо розташування, властивість display має три значення, ви повинні вибрати найбільш підходяще. Ось основні відмінності між тим, як ці три типи відображаються:
- block (блокові). Ширина відповідає розміру батька і для блоку можна задати ширину та висоту. Висота визначається вмістом.
- inline (малі). Ширина та висота визначається вмістом і не можна задати ширину та висоту. Думайте про це як про слово, що плаває в абзаці.
- inline-block (рядково-блокові). Такий, як і block, за винятком того, що ширина визначається вмістом.
Нижче представлені елементи кожного з трьох типів display з наступним додатковим CSS, який застосовується до всіх елементів:
* { background: #eee; border: .125em solid; margin-bottom: .5em; padding: .5em }
Змінюйте ширину блоків і зауважте, що text-align: justify зберігає сітку незайманою.
float
Властивість float настільки божевільна, що про неї слід сказати окремо.
Коли справа доходить до позиціонування, основне, що вам потрібно знати. inline-block, незалежно від того, яке значення властивості display насправді встановлено.
Правда, в даний час через те, що inline-block підтримується досить широко, на частку float залишилося небагато. Ми, як і раніше, тримаємось за нього, оскільки це туз у рукаві і ви повинні знати, як використовувати його на швидку руку. Але поки що не хвилюйтеся про це занадто багато.
В той же час, ви можете прочитати відношенні між display, position і float у специфікації CSS2.
Позиціонування
Ось де починається справжня веселість.
>Елемент називається «позиціонованим», якщо у нього властивість position дорівнює будь-якому значенню, крім static.
Коли елемент позиціоновано, він викладається відповідно до значень, заданих властивостями top, bottom, left і right.
Це означає, що дані властивості не тільки встановлюють положення (або рух) елемента, вони також можуть змінити розміри елементів . Наприклад, якщо position дорівнює absolute або fixed ви можете встановити top та bottom і по суті нав'язати фіксовану висоту елементу. Пріоритет тут може бути досить складним, але, як правило, якщо ви вкажіть top, bottom та height для позиціонованого елемента, то значення height ігнорується.
Властивість position може приймати такі значення:
- static. За замовчуванням. Будь-які властивості top, right, bottom або left ігноруються.
- absolute. Елемент буде видалений зі своєї вихідної позиції в макеті та позиціонований щодо найближчого позиціонованого батька.
- fixed. Елемент буде видалений зі своєї вихідної позиції в макеті та позиціонований щодо вікна. На мобільних пристроях із зумом може бути невизначена поведінка.
- relative. На відміну від абсолютного або фіксованого положення елемент залишається у вихідному місці макета і властивості top, right, bottom або left тільки виштовхують його з цього положення. Цей матеріал може заплутати, так що ми виділимо деякі важливі речі з цих описів.
- Елементи absolute та fixed не є частиною звичайної схеми документа. Коли їх розміри змінюються, це зачіпає лише їх дочірні елементи (невеликим винятком є те, що елементи, що абсолютно позиціонуються, можуть викликати прокрутку і це вплине на розташування інших елементів на сторінці).
- Елементи static та relative є частиною макету. Коли вони змінюються, це впливає на їхніх сусідів. , bottom або left, не впливають на сусідів. Замість цього, ці сусіди діють так, ніби їх ніхто не зрушував з вихідного положення (виключення з прокруткою також діє і тут). » нього. Швидше за все, така назва описує, що ви можете зрушити елемент щодо його вихідного положення.
А тепер знову трохи магії.
100% top, bottom, left або right
Позиціонування дочірнього елемента за межами його батька трохи складніше.
Наївний підхід полягає у використанні негативної властивості позиціонування, яка відповідає його розміру.
Наприклад:
.parent { position: relative; text-align: center; padding: 1.25em; background: #eee } .child { position: absolute; height: 2.5em; top:-2.5em; right: 0; line-height: 2.5em; background: #444; color: #fff; padding: 0 .625em }
Зверніть увагу на наступні два рядки CSS:
height: 2.5em; top:-2.5em;
Ця частина не ідеальна, тому що не DRY і тому, що ми повинні вказати висоту. При можливості краще не задавати фіксовані значення CSS. Чим більшим речам ви задасте розміри за вмістом, тим краще, тому що це означає, що ваш дизайн є більш гнучким, підтримує більше сценаріїв використання і менше ймовірність появи майбутніх помилок.
Так що ми можемо зробити? Використовувати значення 100%.
.parent { position: relative; text-align: center; padding: 1.25em; background: #eee } .child { position: absolute; bottom: 100%; right: 0; background: #444; color: #fff; padding: .625em }Зверніть увагу, що в цій версії ми спростили padding і line-height, тому що дочірній блок визначає розмір за своїм вмістом, а не навпаки.
Трансформація
Вона, безумовно, заслуговує на свій власний розділ. Трансформація живе там, де є багато реальної магії. Але зараз, зверніть увагу на те, що елементи, що трансформуються, на жаль, розглядаються як позиціоновані, навіть якщо застосовується значення static. Фіксація цієї інформації в пам'яті або десь ще, ймовірно, спалить вам мозок. /css2/display.html" rel="nofollow">Quirksmode: display — велика іграшка для експериментування зі значеннями різних властивостей.
- MDN: Layout
- MDN: position