CSS
Модель коробки

Синтаксис

• box-sizing: параметр ;

параметры

замечания

Что такое модель коробки?

Края

Браузер создает прямоугольник для каждого элемента в документе HTML. Модель Box описывает, как добавление, граница и маржа добавляются в контент для создания этого прямоугольника.

Диаграмма из CSS2.2 Рабочий проект

Периметр каждой из четырех областей называется краем . Каждое ребро определяет поле.

• Самый внутренний прямоугольник - это поле содержимого . Ширина и высота этого зависит от отображаемого содержимого элемента (текста, изображений и любых дочерних элементов, которые могут иметь).
• Далее находится поле прокладки , определяемое свойством padding . Если ширина padding не определена, край заполнения равен краю содержимого.
• Затем у нас есть поле границы , как определено свойством border . Если ширина border не определена, край границы равен краю заполнения.
• Самый внешний прямоугольник - поле поля , определяемое свойством margin . Если ширина margin не задана, край края равен граничному краю.

пример

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Этот CSS стилирует все элементы div чтобы иметь верхнюю, правую, нижнюю и левую границы шириной 5 5px ; верхний, правый, нижний и левый поля 50px ; и верхнее, правое, нижнее и левое заполнение 20 20px . Игнорируя содержимое, наша сгенерированная коробка будет выглядеть так:

Снимок экрана панели стилей элементов Google Chrome

• Поскольку содержимого нет, область содержимого (синий квадрат посередине) не имеет высоты или ширины (0px на 0px).
• Поле заполнения по умолчанию имеет тот же размер, что и поле содержимого, плюс ширина 20 пикселей на всех четырех ребрах, которые мы определяем выше, с атрибутом padding (40 пикселей на 40 пикселей).
• Граница границы того же размера, что и поле заполнения, плюс ширина 5 пикселей, которую мы определяем выше, с свойством border (50 пикселей на 50 пикселей).
• Наконец, поле поля имеет тот же размер, что и поле рамки, плюс ширина 50 пикселей, которую мы определяем выше, с свойством margin (предоставляя нашему элементу общий размер 150 пикселей на 150 пикселей).

Теперь давайте придадим нашему элементу брата с тем же стилем. Браузер смотрит на Box Model обоих элементов, чтобы определить, где по отношению к содержимому предыдущего элемента должен быть позиционирован новый элемент:

Содержимое каждого элемента разделяется пробелом 150 пикселей, но коробки с двумя элементами касаются друг друга.

Если мы затем изменим наш первый элемент на отсутствие правого края, край правого края будет находиться в том же положении, что и правый край границы, и теперь наши два элемента будут выглядеть так:

коробчатого проклейки

Модель окна по умолчанию ( content-box ) может быть нелогичной, так как width / height для элемента не будет представлять его фактическую ширину или высоту на экране , как только вы начинаете добавлять padding и border стилей к элементу.

Следующий пример демонстрирует эту потенциальную проблему с content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Так как добавление будет добавлено к ширине текстового поля, результирующий элемент будет текстовым полем, который превышает 100%.

К счастью, CSS позволяет нам изменить модель окна с помощью свойства box-sizing для элемента. Существует три разных значения доступного свойства:

• content-box : общая модель окна - ширина и высота включают только контент, а не дополнение или границу

• padding-box : ширина и высота включают в себя содержимое и дополнение, но не границу

• border-box : ширина и высота включают в себя содержимое, дополнение и границу

Чтобы решить проблему с textarea выше, вы можете просто изменить свойство box-sizing в padding-box или border-box . border-box наиболее часто используется.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Чтобы применить определенную модель окна к каждому элементу страницы, используйте следующий фрагмент:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

В этом box-sizing:border-box; кодирования box-sizing:border-box; не применяется непосредственно к * , поэтому вы можете легко переписать это свойство на отдельные элементы.