Як властивість розміру коробки CSS контролює розмір елементів

Властивість CSS-size-size використовується для налаштування або контролю розміру будь-якого елемента, який приймає widthабо height. Він визначає, як розрахувати загальний widthі heightцей елемент.

У цій статті я поясню, як box-sizingвластивість CSS може використовуватися для управління розміром елементів.

Передумови

  • Основні знання CSS.
  • Редактор коду.
  • Веб-браузер.

Без властивості розміру коробки CSS

Якщо ви подивитесь на фрагмент коду нижче, то помітите, що є два divелементи з однаковим widthі height- але перший divздається більшим за другий div.

Це досить дивно, так? Бо чому б хтось призначав однакову ширину та висоту двом divелементам, якщо в ідеалі не хотів, щоб ці елементи були однаковими?

Продовжуйте читати, щоб з’ясувати, чому ці два divелементи різні ?? ‍ ??? ‍ ?.

За замовчуванням модель коробки CSS обчислює будь-який елемент, який приймає ширину або висоту в такому форматі:

  • width + padding + border = відтворена або відображена ширина вікна елемента.
  • висота + відступ + рамка = відображена або відображена висота вікна елемента.

Це означає, що всякий раз, коли ви додаєте елемент paddingабо borderдо нього, розмір елемента буде більшим за розмір, спочатку призначений йому. Це пов’язано з тим, що вміст цього елемента включає властивості widthі, heightале не включає властивість paddingабо border.

Все ще не отримуєте? Подивіться на фрагмент коду нижче, щоб побачити фактичний розрахунок.

.first-box { width: 200px; height: 100px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */ } .second-box { width: 200px; height: 100px; border: 8px solid blue; background: yellow; /* Total width: 200px + (2 * 8px) = 216px Total height: 100px + (2 * 8px) = 116px */ } 

Як видно з фрагмента коду, CSS додає paddingі borderдо widthі heightвже вказаного. Він відображає загальне значення як розмір елемента, тим самим ігноруючи фактичний розмір, який ви призначили div.

За допомогою властивості розміру коробки CSS

За допомогою box-sizingвластивості описану вище поведінку за замовчуванням можна змінити.  

Використовуючи той самий код, давайте додамо box-sizingвластивість і встановимо для нього border-boxі подивимось, чи справді ми можемо контролювати розмір.

Ви, напевно, помітили, що два divелементи тепер мають однаковий розмір.

Синтаксис

box-sizing:content-box; box-sizing:border-box; 

content-box

Це поведінка властивості розміру коробки за замовчуванням. content-boxне враховує widthі heightвказаний для елемента.

Тобто, якщо ви встановите для елемента widthзначення 200 пікселів , тоді встановіть межу 8 пікселів, а відступ - 20 пікселів , розмір borderі paddingбуде додано до кінцевої ширини відтворення. Це робить елемент ширшим за 200 пікселів .

div{ box-sizing:content-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/ } 

Як видно з фрагмента коду вище, розмір цього divелемента автоматично збільшився до 256 пікселів, навіть коли спочатку було встановлено 200 пікселів.

бордюр

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

Тобто, якщо ви встановите для елемента widthзначення 200 пікселів , ці 200 пікселів включатимуть будь-яку додану вами рамку або відступ, а поле вмісту зменшиться, щоб поглинути цю додаткову ширину.

div{ box-sizing:border-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/ } 

Як видно з фрагмента коду вище, розмір цього divелемента автоматично зменшився до 144 пікселів, навіть коли спочатку було встановлено 200 пікселів.

Давайте об’єднаємо обидва фрагменти коду і побачимо, як саме виглядатиме поле з content-boxта border-box.

Висновок

За допомогою властивості розміру вікна CSS ви можете встановити спосіб обчислення розміру елементів у коді.

Згідно MDN, часто буває корисно встановити , box-sizingщоб , border-boxколи ви виклавши елементи. Це значно полегшує роботу з розмірами елементів і, як правило, усуває низку підводних каменів, на які можна натрапити, викладаючи вміст.  

З іншого боку, коли ви використовуєте position: relativeабо position: absolute, використання box-sizing: content-boxдозволяє значення позиціонування бути відносно вмісту та незалежно від змін розмірів меж та відступів. Іноді вам може знадобитися це.

Це все, шановні! Сподіваюсь, це було корисно. Якщо так, поділіться цією статтею та дотримуйтесь мене у Twitter.