4.1 Свойство box-sizing
Свойство box-sizing в CSS является мощным инструментом для управления моделью измерения размеров элементов. Оно определяет, каким образом вычисляются размеры элемента, включая ширину и высоту, а также отступы, границы и внешние отступы. Ниже мы подробно рассмотрим, как работает box-sizing, и как его использование может повлиять на макет веб-страницы.
Основные модели box-sizing
Content-box (модель контента)
Значение content-box является значением по умолчанию для всех элементов. В этой модели размеры элемента (width и height) определяют только размеры содержимого, исключая отступы и границы. Это означает, что отступы и границы добавляются к общей ширине и высоте элемента.
Border-box (модель границ)
Значение border-box изменяет модель измерения так, что размеры элемента width и height включают внутренние отступы и границы. Это означает, что если вы зададите элементу ширину 200 пикселей, то эти 200 пикселей будут включать в себя и границы, и внутренние отступы. При этом сам контент автоматически сожмется, чтобы освободить для них место.
Пример использования box-sizing:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: ширина и высота включают только содержимое.</div>
<div class="box border-box">Border-box: ширина и высота включают отступы и границы.</div>
Объяснение кода:
.box: базовый стиль для всех коробок, включая отступы, границы и размеры.content-box: элемент с box-sizing: content-box, где ширина и высота включают только содержимое.border-box: элемент с box-sizing: border-box, где ширина и высота включают отступы и границы
4.2 Влияние box-sizing на макет
Модель контента (Content-box)
Когда используется box-sizing: content-box;, отступы и границы добавляются к общей ширине и высоте элемента. Это может привести к необходимости дополнительного учета при расчете размеров и позиционировании элементов.
Пример использования
В этом случае общая ширина элемента будет 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, а общая высота будет 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: ширина и высота включают только содержимое.</div>
Модель границ (Border-box)
Когда используется box-sizing: border-box;, отступы и границы включаются в заданные ширину и высоту элемента. Это упрощает вычисления и управление размерами элемента, особенно при создании адаптивных макетов.
Пример использования:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: ширина и высота включают отступы и границы.</div>
4.3 Создание адаптивного макета
Использование box-sizing: border-box; позволяет упростить создание адаптивных макетов, так как размеры элементов включают отступы и границы, предотвращая неожиданные переполнения.
Пример использования:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>
<div class="item">Элемент 4</div>
<div class="item">Элемент 5</div>
<div class="item">Элемент 6</div>
</div>
Объяснение кода:
* { box-sizing: border-box; }: применение модели границ ко всем элементам на странице для упрощения управления размерами.container: Flex-контейнер с адаптивным макетом.item: Flex-элементы с равномерным распределением ширины и включением padding и border в общую ширину
4.4 Фиксированные размеры с внутренними отступами
Использование box-sizing: border-box; позволяет легко задать фиксированные размеры для элементов с внутренними отступами, не беспокоясь о переполнении.
Пример использования:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Центрирование текста по вертикали */
}
<div class="fixed-size">
Фиксированные размеры
</div>
Объяснение кода:
.fixed-size: элемент с фиксированными размерами 300x150 пикселей, включая padding и border, что позволяет точно контролировать его размеры
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ