Размер блока CSS
Размер блока CSS
Свойство CSS box-sizing
позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Без свойства CSS box-sizing
По умолчанию ширина и высота элемента вычисляются следующим образом:
ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента
Это означает: Когда вы устанавливаете ширину/высоту элемента, элемент часто кажется больше, чем вы установили (поскольку граница и отступ элемента добавляются к указанной ширине/высоте элемента).
На следующем рисунке показаны два элемента <div> с одинаковыми указанными шириной и высотой:
Два приведенных выше элемента <div> в конечном итоге имеют разные размеры в результате (поскольку в div2 указано заполнение):
Пример
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Отель box-sizing
решает эту проблему.
С помощью свойства CSS box-sizing
Свойство box-sizing
позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Если вы устанавливаете box-sizing: border-box;
для элемента, отступы и границы включаются в ширину и высоту:
Вот тот же пример, что и выше, с box-sizing: border-box;
добавлением к обоим элементам <div>:
Пример
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Поскольку результат использования box-sizing: border-box;
намного лучше, многие разработчики хотят, чтобы все элементы на их страницах работали таким образом.
Приведенный ниже код гарантирует, что размер всех элементов будет более интуитивным. Многие браузеры уже используют box-sizing: border-box;
для многих элементов формы (но не для всех — именно поэтому поля ввода и текстовые области выглядят по ширине по-разному: 100%;).
Применение этого ко всем элементам безопасно и разумно:
Пример
* {
box-sizing: border-box;
}
Свойство размера окна CSS
Property | Description |
---|---|
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |