CSS3 Box Определение размеров
CSS3 box-sizing свойство позволяет включать отступы и границы в общей ширины и высоты элемента.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Без CSS3 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;
} Попробуй сам " Так, в течение длительного времени веб-разработчики уточнили меньшую ширину значение, чем они хотели, потому что они должны были вычесть из отступов и границ.
С помощью CSS3, то box-sizing свойство решает эту проблему.
С CSS3 box-sizing свойств
CSS3 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%;).
Применяя это ко всем элементам является безопасным и мудрым: