Объяснение блочной модели CSS

Блочная модель CSS — это основа CSS, но также и сложный вопрос, который часто задают в интервью, и это классический вопрос. Многие блоги также очень расплывчаты, поэтому я перегруппирую их здесь.

Можно считать, что каждый html-тег представляет собой квадрат, а затем этот квадрат оборачивают несколькими квадратиками, как коробку, обернутую слой за слоем, что и является так называемой боксовой моделью.

Блочная модель делится на блочную модель IE и стандартную блочную модель W3C.

Блочная модель IE и стандартная блочная модель W3Cразницачто это такое?

1. Стандартная коробочная модель W3C:

Свойства width и height содержат только содержимое, а не границы и отступы.

2. Блочная модель IE:

Ширина и высота свойств включают границу и отступ, что относится к содержимому + отступу + границе.

Какую блочную модель использовать в браузерах ie8+, можно определитьbox-sizing(Добавлено свойство CSS), значением по умолчанию является поле содержимого, которое представляет собой стандартную блочную модель; если для размера окна задано значение границы, используется блочная модель IE. Если DOCTYPE отсутствует в ie6,7,8, это вызовет режим IE. В текущем стандарте W3C блочную модель можно свободно переключать по размеру коробки.

content-box (стандартная модель коробки)

ширина = ширина содержимого

высота = высота содержимого

border-box (блочная модель IE)

ширина = граница + отступ + ширина содержимого

высота = граница + отступ + высота содержимого

Google Chrome, нажмите F12, затем потяните полосу прокрутки в правом столбце вниз, и вы увидите что-то:

Это более интуитивно понятно для понимания через код, как показано ниже.

.box{
        width:200px;
        height:200px;
        background-color:pink;
}

На этом этапе размер блока соответствует размеру содержимого.

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
}

В этот момент длина и ширина блока стали 240 x 240. Очевидно, что отступы могут изменить размер блока. На данный момент размер блока равен содержимому+отступу.

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
}

В этот момент длина и ширина блока становятся 260x260, поэтому размер блока равен содержимому + отступу + границе.

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
        margin-bottom:10px;
}
.box1{
        width: 100px;
        height: 100px;
        background: green;
}

Схема эффекта выглядит следующим образом:

На данный момент длина и ширина коробки по-прежнему 260х260, то есть размер коробки не изменился.

Как вы можете видеть, в нижней части окна создается пустое пространство шириной 10 пикселей.

Таким образом, размер блока — это содержимое + отступы + граница, то есть содержимое (ширина) + отступы плюс граница без полей. Много раз мы ошибочно включаем поле, в этом случае размер окна должен быть 260x270 в приведенном выше случае, но это не так.

Блочная модель CSS состоит из содержимого (контента), заполнения (внутреннего поля), границы (границы) и поля (внешнего поля). Но размер поля определяется частями содержимого + заполнения + границы.Позиция, которую занимает блок, учитывает поле, а не размер блока!

Мы можем попробовать установить для свойства box-sizing значение border-box для розового квадрата выше и обнаружить, что: независимо от того, как мы меняем границу и отступ, размер блока всегда имеет заданную ширину и высоту. следующим образом

.box{
        width:200px;
        height:200px;
        background-color:pink;
        box-sizing:border-box;
        padding:20px;
}

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

Потому что, если тип DOCTYPE не объявлен, браузер IE будет интерпретировать блочную модель как блочную модель IE, а FireFox будет интерпретировать ее как блочную модель W3C;Если тип DOCTYPE объявлен на странице, все браузеры интерпретируют модель коробки в виде модели W3C Box.