CSS Box Sizing
Размер окна CSS
Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.
Без CSS окно-Изменение размера свойства
По умолчанию ширина и высота элемента вычисляется так:
Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента
Это означает, что при задании ширины/высоты элемента элемент часто отображается больше, чем задано (поскольку граница элемента и отступ добавляются к указанной ширине/высоте элемента).
На следующем рисунке показаны два элемента <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: border-box; на элементе Padding и граница включены в ширину и высоту:
Вот такой же пример, как и выше, с 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 окно Изменение размера свойства
| Свойство | Описание |
|---|---|
| box-sizing | Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет |