У цьому уроці були розглянуті функції, пов'язані з box-modeling, включаючи такі важливі властивості:

Overflow
Resetting defaults
Visibility
Border-box

overflow

Це ситуація, коли елемент, що знаходиться всередині батьківського контейнера, не вміщується в його межах і виходить за них. Для вирішення цієї проблеми є кілька властивостей:

hidden — вміст, що виходить за межі контейнера, буде прихований, і буде видно лише частину.

p{
overflow: hidden;
}

visible — значення за замовчуванням, де вміст, що виходить за межі, буде видно.

p{
overflow: visible;
}

scroll — весь вміст, що виходить за межі, буде прихований, але до контейнера додадуть смугу прокрутки, яка дозволить переглядати весь вміст.

p{
overflow: scroll;
}

Resetting defaults

Кожен стиль має значення за замовчуванням для відступів і наповнення (margin і padding), які можуть вплинути на те, як елементи відображаються. Це може утруднити роботу дизайнера. Властивість (*) дозволяє скинути значення margin і padding для всіх елементів до 0.

*{
margin: 0;
padding: 0;
}

visibility

Ця властивість дозволяє приховати елемент на сторінці. Хоча вміст елемента залишатиметься в коді, він не буде видимий на сторінці. Використовуються такі значення:

hidden — елемент прихований з веб-сторінки, але він займає місце.

Home
About
Contact

.cntc{
visibility: hidden;
}

Список із елементом "Contact" буде прихований.

visible — елемент буде видимий.

.intel{
visibility: visible;
}

collapse — використовується лише для рядків і стовпців таблиць, фактично видаляє рядок або стовпець.

form{

visibility: collapse;
}

border-box

Властивість box-sizing визначає, як обчислюється ширина та висота елемента, виключаючи товщину бордера і padding. За замовчуванням значення встановлено на "content-box", що виключає ці параметри з обчислення, що робить ширину та висоту більшими. Властивість border-box включає бордер та padding у ці обчислення, даючи більш точний контроль над розмірами елемента.

position

У HTML є елементи, які займають всю ширину рядка, заважаючи іншим елементам з’являтися в тому ж горизонтальному просторі. Це називається "block-element". За допомогою властивості position можна змінити розташування цього елемента, використовуючи п’ять значень:

static — це значення за замовчуванням, що означає стандартне розташування елемента у нормальному потоці веб-сторінки.

.green box{
position: static;
}

relative — дозволяє змінити позицію елемента відносно його статичної позиції. Додаткові властивості (top, bottom, left, right) можуть бути задані в пікселях, процентах, em.

.point{
position: relative;
top:50px;
left: 120px;
}

absolute — коли елемент має позицію absolute, він розташовується відносно найближчого батьківського елемента, і може перекривати інші елементи за допомогою властивостей offset (top, bottom, left, right).

.p{
position: absolute;
top: 300px;
right: 0px;
}

fixed — при цьому значенні елемент зберігає своє положення на сторінці, незалежно від прокрутки. Він залишається видимим на сторінці.

.title{
position: fixed;
top: 0px;
left: 0px;
}

Ці властивості дають можливість змінювати позицію елементів на сторінці, що дозволяє гнучко керувати їх відображенням.

Перекладено з: CSS(II)