Блокова модель елемента. Нюанси Element Box Model
- Ширина вмісту елемента
- Мінімальна і максимальна ширина елемента
- Висота вмісту елемента
- Мінімальна і максимальна висота елемента
- Переповнення елемента. властивість overflow
- Внутрішні відступи (padding)
- Зовнішні відступи (margin)
- Рамки, або кордону (властивість border)
Блокова модель елемента - це набір css-властивостей елемента, що дозволяють управляти його зовнішнім виглядом. За допомогою набору властивостей box-моделі ви можете оформити різні елементи відповідно до дизайнерського макетом, змінюючи їх ширину і висоту, а також додавши різні відступи і рамки.
Властивості box-моделі включають в себе:
- Ширину вмісту елемента
- Висоту вмісту елемента
- Переповнення елемента. властивість overflow
- внутрішні відступи
- Рамки, або кордону
- зовнішні відступи
При створенні розмітки сторінки дуже важливо розуміти, як співвідносяться між собою всі ці властивості для формування зовнішнього вигляду блоку.
Коли ми говоримо про box-моделі, маємо на увазі, що мова йде, перш за все, про блокових елементах , Тобто тих елементах, які мають css-властивість display із значенням block і за замовчуванням займають весь доступний простір всередині батьківського елементу. для малих елементів властивості блокової моделі працюють не завжди передбачувано. Застосовувати властивості box-моделі можна також до елементів з display: inline-block, а також до елементів таблиці з display: table або table-cell.
На малюнку видно, яким чином розподіляється простір усередині блокової моделі елемента. Частина властивостей може бути призначена тільки для однієї або декількох сторін елемента. У цих випадках важливі суфікси, пов'язані з англомовними назвами сторін - top (верхня), right (права), bottom (нижня) і left (ліва). 
Ширина вмісту елемента
Ширина вмісту елемента визначається властивістю width, для якого доступні наступні варіанти значень:
width: auto | Значення px, pt,%, in, em, rem, mm идр .едініцах | initial | inherit;
Значення auto використовується за умовчанням. Воно означає, що будь-який блоковий елемент займає автоматично весь доступний простір всередині елемента-батька або в браузері. Значення initial встановлює початкове значення, тобто по суті, рівнозначно auto, inherit - успадковує значення від батька. Найчастіше ширину задають в будь-яких одиницях, з яких найпопулярнішими є пікселі (px), відсотки (%), а також одиниці, пов'язані з розміром шрифту батьківського елементу - em або кореневого елемента (тег <html>) - rem.
У разі, якщо ширина задається в%, розрахунок її ведеться щодо ширини батьківського елементу або вікна браузера.
Ви можете подивитися приклад в окремому вікні за посиланням .
Мінімальна і максимальна ширина елемента
Крім властивості width ви також можете використовувати такі корисні властивості, як max-width і min-width. Як випливає з їхніх назв, max-width обмежує максимальну ширину блоку, а min-width не дає елементу поменшати зазначеного в ній розміру.
Для цих властивостей допустимі такі значення:
max - width: none (за замовчуванням) | размерв px, em, in,% идр .едініцах | inherit | initial
min - width: 0 (за замовчуванням) | размерв px, em, in,% идр .едініцах | inherit | initial
Зазвичай ці властивості застосовують, коли не потрібно строго обмежувати розмір елемента, але при цьому він повинен бути не більше max-width, але і не менш min-width.
У прикладі нижче 2 блоку з зображеннями поміщаються в контейнер з класом wrapper. Розміри цього контейнера визначаються розмірами блоків з фотографіями. Стилі всіх потрібних елементів такі:
. wrapper {
width: 80%;
max - width: 938px;
margin: 20px auto;
border: 2px dotted # 444;
padding: 10px 0;
overflow: hidden;
}
. cat - block {
width: 48%;
margin: 1%;
float: left;
min - width: 230px;
}
. cat - block img {max - width: 100%; }
Для того щоб обидва блоки з фото помістилися (а розмір зображення в кожному з них становить 450x280px), необхідно, як мінімум 900px (450px * 2). Також потрібно врахувати відступи, а вони вказані у властивості margin: 1% і при розрахунку становитимуть приблизно 9px з кожного боку (900px * 1% / 100% = 9px).
Важливо: відсотки в разі відступів розраховуються щодо ширини батьківського елементу.
Виходить, що при розрахунку максимальної ширини контейнера з класом wrapper ми повинні відштовхуватися від ширини блоків з фото + враховувати відступи між ними. Отримуємо таку величину: (450 + 2 * 9) * 2 = 468 * 2 = 936px. Тобто можемо написати, що у класу wrapper min-width: 936px.
Але чому тоді в стилях вище зазначене значення в 938px? Підступ тут у відсотковому значенні у властивості margin: від 936px 1% буде становити вже 9.36px. Для 2-х блоків з горизонтальними відступами з 2-х сторін це значення потрібно помножити на 4. І тоді вийде 900 + 9.36 * 4 = 937.44px. Можемо округлити це значення до 938px і зупинитися на ньому. Для того щоб уникнути всієї цієї головного болю з обчисленнями, краще використовувати властивість box-sizing: border-box.
Для того щоб при зменшенні екрану у нас змінювалася ширина контейнера, ми призначимо класу wrapper властивість width: 80%, але разом з цим у нас будуть зменшуватися і блоки з фотографіями, тому що їх ширина вказана, як width: 48%. Щоб разом зі зменшенням блоку змінювався розмір фотографій, для селектора .cat-block img вказано властивість max-width: 100%. Якщо ми хочемо запобігти зменшення блоків з фото, ми можемо встановити мінімальну їх ширину в 230px (min-width: 230px), тому на маленьких екранах другий блок переїде вниз, під перший. Ширина їх як і раніше залишиться рівною 48% від розміру батька, але менше 230px вона не буде.
Ви можете подивитися приклад в окремому вікні за посиланням і побачити, як змінюються розміри елементів в залежності від ширини екрану.
Висота вмісту елемента
Висота вмісту елемента визначається властивістю height, для якого доступні наступні варіанти значень:
height: auto | Значення px, pt,%, in, em, rem, mm идр .едініцах | initial | inherit;
Можна помітити, що значення для висоти елемента задаються так само, як і для його ширини, але вказувати висоту елемента явно (в px,%, pt, em, rem, in, cm, mm або інших одиницях виміру ) Коштує далеко не завжди.
З прикладу можна побачити, що при явному призначення висоти будь-якого блоку (батьківського або дочірнього), текст може не поміщатися і виходити за межі цього блоку, що не дуже-то красиво виглядає. Тому найчастіше висоту залишають з її значенням за замовчуванням - auto, а це значить, що висота блоку буде формуватися в залежності від кількості тексту в ньому. Також варто розуміти, що ширина і висота блоку взаємопов'язані - чим менше ширина елемента, тим більше буде його висота при однаковому наповненні текстом або іншим вмістом.
Мінімальна і максимальна висота елемента
Якщо все ж необхідно задати висоту, можна також використовувати такі css-властивості, як min-height або max-height. Вони можуть мати такі значення:
max - height: none (за замовчуванням) | размерв px, pt, em, in,% идр .едініцах | initial | inherit
min - height: 0 (за замовчуванням) | размерв px, pt, em, in,% идр .едініцах | initial | inherit
Коли ви використовуєте обидва значення, ви говорите браузеру, що висота будь-якого елементу не може бути менше значення, заданого для min-height, але і не більше значення для max-height.
У прикладі нижче ви можете управляти цими властивостями і спостерігати за змінами висоти елементів. Зауважте, що спочатку 3 блоку мають різну висоту і "рвані" нижні краї. За рахунок збільшення min-height ви можете "продовжити" менший з блоків, вирівняти висоту всіх елементів. Зміна max-height призведе до появи смуги прокрутки в кожному блоці, тому що вказаного значення недостатньо для того, щоб помістився весь контент, плюс для блоків призначено властивість overflow: auto.
Якщо ж значення максимальної висоти буде менше, ніж значення мінімальної, воно буде проігноровано. Це говорить про те, що немає сенсу вказувати обидва значення в такій ситуації.
Ви можете подивитися приклад в окремій вкладці і змінювати висоту елементів при різному розмірі вікна браузера.
Переповнення елемента. властивість overflow
При верстці сторінки ви можете зіткнутися з необхідністю поставити ширину або висоту елементу, але при цьому вміст елемента поміщатися в задані розміри не буде. В цьому випадку ви отримуєте переповнення елемента його вмістом і задається питанням, що з цим робити.
Для вирішення цієї проблеми служить властивість overflow з такими варіантами значень:
overflow: visible (за замовчуванням) | hidden | scroll | auto | initial | inherit;
У прикладі нижче для області вірші задані такі стилі:
#elem {
width: 400px;
height: 400px;
background: url (images / tetrad. jpg) 0 - 5px;
background - attachment: local;
line - height:. 8;
padding: 10px;
}
За замовчуванням ви бачите текст, що виходить за межі блоку з фоном у вигляді зошитового листа (overflow: visible). Ви можете обрізати весь текст поза листа (overflow: hidden), додати одну вертикальну смугу прокрутки, якщо перенесення тексту виконуються автоматично, або 2 смуги прокрутки, якщо переноси заборонені властивістю white-space: nowrap, - так працює властивість overflow: auto. Властивість overflow: scroll додає 2 смуги прокрутки незалежно від необхідності в них. Значення initial повертає нас до значення за замовчуванням, тобто до overflow: visible.
протестувати приклад в новій вкладці.
Внутрішні відступи (padding)
Внутрішні відступи включаються в заливку фоном або фоновим зображенням і дуже важливі для візуального сприйняття блоку з текстом. За замовчуванням у більшості елементів вони рівні 0. Виняток становлять тільки списки. Проте, додавати внутрішні відступи доводиться дуже часто, тому що без них текст "прилипає" до кордону елемента, і виглядає це некрасиво і неакуратно.
Внутрішні відступи можна задавати в будь-яких одиницях, доступних в CSS , Але завжди це повинно бути позитивне число або нуль. Негативними вони бути не можуть, на відміну від відступів зовнішніх. Визначати відступи можна відразу для всіх 4-х сторін елемента (1 цифра), одночасно для верхньої і нижньої і лівої і правої сторін (2 цифри), для верху, бічних сторін і низу (3 цифри) і за годинниковою стрілкою, починаючи з верхньої боку (4 цифри):
Коли ви призначаєте 4 різних значення, то обхід виконується за схемою: зверху-праворуч-вниз-наліво або англійською top-right-bottom-left.
У разі, якщо padding призначається в% (увага!), Його величина розраховується щодо ширини батьківського елементу. Це важливо розуміти, тому що далеко не завжди ви будете готові до того, що відобразить вам браузер.
Якщо існує необхідність призначити тільки один відступ, використовують властивість padding із зазначенням боку, для якої його призначають:
- padding-top - тільки для верхньої;
- padding-right - для правої;
- padding-bottom - тільки для нижньої;
- padding-left - для лівої.
Для того щоб призначити відступи з 3-х сторін елемента, можна спочатку вказати padding для всіх сторін, а потім обнулити відступ там, де він не потрібен:
padding: 20px;
padding - left: 0;
/ * Або * /
padding: 20px 20px 20px 0;
Зовнішні відступи (margin)
Зовнішні відступи завжди є прозорими і відсувають сусідні елементи один від одного. Досить багато елементів в HTML за замовчуванням мають зовнішні відступи, найчастіше по горизонтальних сторонах (зверху і знизу) - це заголовки всіх рівнів, абзаци, блокова цитата (blockquote) і списки.
Зовнішні відступи записуються аналогічно внутрішнім, тобто за допомогою однієї, двох, трьох або чотирьох цифр, але можуть бути задані як позитивним, так і негативним числом. Позитивні числа відсувають сусідні елементи один від одного, а негативні, навпаки, зближують.
Крім значень в цифрах + одиниці виміру, властивість margin має ще значення auto, - воно означає, що в залежності від ширини елемента, його відступ буде розрахований автоматично браузером. Наприклад, для якогось елементу-контейнера можна написати такі css-правила:
. container {
width: 80%;
margin: auto;
}
Браузер сам розрахує, скільки в пікселях буде 80% від ширини відкритого вікна, а весь інший простір поділить на 2 і розподілить порівну з 2-х сторін контенту. Тобто це простий спосіб центрування блокових елементів в CSS.
Ви можете самостійно подивитися на вирівнювання блоку з текстом при використанні різних властивостей.
У зовнішніх відступів є ще одна особливість - вони схлопиваются для елементів, які йдуть один за одним по вертикалі. Це означає, що при призначенні у блоків властивості margin: 20px 0; між сусідніми блоками буде не 40px (20px верхнього блоку + 20px нижнього блоку), а всього 20px, тому що відступи накладаються.
Схлопування спрацьовує тільки для вертикальних відступів, але не застосовується для горизонтальних. Крім того, схлопування не спрацьовує:
- для тега <html>
- для малих елементів;
- для елементів, що мають властивість float: left або right
- у абсолютно позиціонуються елементів
- для елементів, у яких на стороні схлопування задано властивість padding
- для елементів, у яких на стороні схлопування задано властивість border.
Рамки, або кордону (властивість border)
За замовчуванням блокові елементи рамок не мають. навіть таблиці , І ті відображаються без рамки до призначення їм властивості border.
Варіантів використання цієї властивості дуже багато, тому що складається воно з 3-х складових - кольору рамки (border-color), її товщини (border-width) і стилю (border-style). Комбінувати ці властивості можна в різній послідовності, важливо пам'ятати, що в складових або універсальних властивостях значення записуються через пробіл:
. block {border: 3px solid red; }
Якщо ви забудете написати колір рамки, то за замовчуванням до неї таким чином, застосовується колір тексту. Ще важливо пам'ятати, що рамки (межі) в% не задаються. У будь-яких інших одиницях, але не в%. І до них можна застосовувати ключові слова thin (тонка), medium (середня) і thick (товста), якщо вам так буде зручніше, ніж в інших одиницях. Краще, звичайно, ставити товщину стосовно розміру шрифту (em, rem) або в px, але вибір у вас в цьому питанні широкий.
Протестувати деякі властивості і просто подивитися на інші можна в файлі про рамках .
Але чому тоді в стилях вище зазначене значення в 938px?