Модель ящика для фронтенд-интервью

CSS

что такое боксовая модель

Когда вы создаете документ, движок браузера описывает все элементы как блоки в соответствии с моделью CSS-Box, а CSS определяет размер, положение, свойства (цвет, границы...) этих блоков.

классификация коробчатых моделей

Существует два типа блочных моделей: блочная модель IE и стандартная блочная модель. Разница между ними заключается в следующем:

IE盒模型的width/height = content + border + padding
标准盒模型的width/height = content

блочная модель IE

IE盒模型

стандартная коробочная модель

标准盒模型

Проблема слияния полей CSS с обычными элементами блока потока документов

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo1 {
        width: 40px;
        height: 40px;
        background: pink;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid pink;
    }
    .demo2 {
        width: 40px;
        height: 40px;
        padding: 10px;
        background: blue;
        margin: 20px 0;
        border: 2px solid blue;
    }
</style>
<div class="demo1"></div>
<div class="demo2"></div>

外边距合并

Видно, что поля demo1 и demo2 составляют 20 пикселей. вместо 30px.

Примечание. Объединение полей происходит только для вертикальных полей блочных блоков в обычном потоке документов. Поля между встроенными блоками, поплавками или абсолютным позиционированием не объединяются.

Изменить модель коробки

CSS3 поддерживает изменение блочной модели.

box-sizing

box-sizing используется для изменения модели блока по умолчанию для расчета высоты/ширины блока. Это свойство можно использовать для имитации поведения браузеров, которые не поддерживают должным образом спецификацию блочной модели CSS.

/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box;

/* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box (по умолчанию): стандартная блочная модель

宽度 = 内容的宽度
高度 = 内容的高度
不会包含border, padding。

демо демо:

.demo1 {
    box-sizing: content-box;
    width: 40px;
    height: 40px;
    background: pink;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid pink;
}

<div class="demo1"></div>

Ширина содержимого поля составляет 40 пикселей;

content-box

граница: странный режим

width = border + padding + 内容的width，
height = border + padding + 内容的height。

демо демо:


.demo {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    background: pink;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid pink;
}

<div class="demo"></div>

Ширина содержимого поля составляет 16 пикселей;

border-box

padding-box: устарело

inherit: указывает, что значение свойства box-sizing должно быть унаследовано от родительского элемента.

Зачем использовать пограничный блок

недостатки содержимого

当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo div {
        float: left;
        width: 50%;
        height: 100px;
        padding: 0 10px;
    }
    .demo1 {
        background: pink;
    }
    .demo2 {
        background: blue;
    }
</style>

<div class="demo">
    <div class="demo1"></div>
    <div class="demo2"></div>
</div>

content-box

Преимущества бордюр-бокса:

border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。

Просто измените приведенный выше код.

.demo div {
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 100px;
    padding: 0 10px;
}

border-box

Таким образом, сценарии использования border-box следующие:

Подэлементы имеют отступы и границы или хотя бы один из них, и вам необходимо установить ширину 100% (или ширину 50% и т. д.) для подэлементов, что, очевидно, требует рамки. После установки его в качестве рамки, толщину отступов и границ можно настроить по желанию, не перекрывая родительский элемент. Если это поле содержимого, то ширина неизбежно переполнится, и, чтобы не переполниться, вы можете установить ширину дочернего элемента только на фиксированное значение или вычисленное значение (например, calc(100% - 20 пикселей).

Категории