Объяснение блочной модели CSS на примерах

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

Что такое блочная модель CSS?

Коробочная модель CSS - это стандарт, созданный Консорциум World Wide Web. Он описывает все элементы в документе HTML как прямоугольные блоки с собственными размерами. Эти поля содержат область содержимого и необязательные окружающие области полей, границ и отступов. Итак, давайте рассмотрим части блока CSS.

Давайте раскроем четыре слоя блочной модели CSS.

Первый слой: содержание

Область содержимого содержит основное содержимое элемента, которым может быть изображение, текст или любая форма мультимедийного содержимого. Вы можете изменить размеры элементов блочного уровня, используя рост а также ширина характеристики.

Второй слой: заполнение

Отступ - это пространство между полем содержимого и его рамкой. Хотя он располагается вокруг вашего контента как пробел, вы можете использовать цвет фона, чтобы визуализировать разницу. Вы можете подать заявку обивка, отступ справа, обивка-дно, а также отступ слева свойства для изменения пространства.

Третий слой: граница

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

Четвертый слой: маржа

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

Настройка проекта для блочной модели CSS

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

Структура с HTML

Выход:

Вы можете использовать встроенные функции вашего браузера, такие как Инструменты разработчика Chrome, чтобы узнать, что происходит. Мы используем два изображения от Unsplash. Для простоты скроем изображение смартфона с помощью дисплей: нет; пока он нам не понадобится позже.

Стилизация с использованием CSS

/*************************
БАЗОВЫЙ СТИЛЬ
*************************/
* {
маржа: 0px;
отступ: 0 пикселей;
}
тело {
дисплей: гибкий;
flex-direction: ряд;
} 
.отображать {
дисплей: нет! важно;
}

Теперь давайте зададим стиль нашему блоку содержимого. Сначала мы установим рост а также ширина изображения. Кроме того, цвет фона помогает улучшить визуализацию. Итак, давай сделаем это.

/*************************
СОДЕРЖАНИЕ
*************************/
.content-box {
дисплей: гибкий;
flex-direction: ряд;
justify-content: center;
align-items: center;
/ * Стилизация поля содержимого с использованием свойств высоты и ширины * /
цвет фона: #fdf;
высота: 20em;
ширина: 30em;
}

Дайте контенту пространство для дыхания с помощью обивки

Вы можете установить обивка, отступ справа, обивка-дно, а также отступ слева properties индивидуально или используйте сокращение. По возможности старайтесь использовать сокращенное обозначение, так как это может сэкономить вам время. Давайте посмотрим, как работает заполнение.

 /*************************
НАБИВКА
*************************/
/ * Применение отступов * /
padding-top: 5em;
отступ справа: 2em;
нижняя обивка: 8em;
отступ слева: 2em;
/ * Сокращение заполнения * /
/ * сверху / справа / снизу / слева * /
отступы: 5em 2em 8em 2em;
/ * сверху / по горизонтали / снизу * /
заполнение: 5em 2em 8em;

Выход:

Нарисуйте линии вокруг отступов с помощью границы

При применении свойства границы убедитесь, что вы используете цвет границы свойство, чтобы придать границе цвет, отличный от фона. Вы можете выбрать пограничный стиль либо индивидуально, либо за один раз, используя сокращенное свойство. То же самое и с ширина рамки имущество.

Вы также можете установить border-radius придать коробке закругленные углы с радиусом в px, rem, Эм, или в процентах.

 /*************************
ГРАНИЦА
*************************/
/ * Применение свойств границы * /
/ * Устанавливаем цвет границы * /
цвет границы: rgb (148, 234, 255);
/ * Выбрать стиль границы * /
стиль верхней границы: твердый;
граница-правый-стиль: пунктирная;
стиль границы-дна: канавка;
граница-левый-стиль: гребень;
/ * сокращение в стиле границы * /
/ * сверху / справа / снизу / слева * /
бордюрный стиль: гребень сплошной пунктирной канавки;
/ * Установить ширину границы * /
ширина верхней границы: 4em;
ширина правой границы: 2em;
ширина нижней границы: 2em;
ширина левой границы: 2em;
/ * сокращение ширины границы * /
/ * сверху / справа / снизу / слева * /
ширина границы: 4em 2em 2em 2em;
/ * сверху / по горизонтали / снизу * /
ширина границы: 4em 2em 2em;
/ * сокращение свойства границы * /
/ * граница: 4em solid rgb (148, 234, 255); */
/ * Установить радиус границы * /
радиус границы: 5em;
радиус границы: 20%;

Выход:

Добавить пространство между полями с полями

Вы можете центрировать коробку по горизонтали, используя маржа: 0 автопри условии, что он имеет определенную ширину.

 /*************************
ПРИБЫЛЬ
*************************/
/ * Применение свойств маржи * /
маржа сверху: 4em;
маржа справа: 5em;
нижнее поле: 3em;
маржа слева: 5em;
/ * Сокращение маржи * /
/ * сверху / справа / снизу / слева * /
маржа: 4em 5em 3em 5em;
/ * сверху / по горизонтали / снизу * /
маржа: 4em 5em 3em;
/ * Использование автоматического поля * /
маржа: 3em auto;

Выход:

Вы можете указать свойство поля, используя одно, два, три или четыре значения. Значения могут быть длиной, процентом или ключевым словом, например авто. Давайте разберемся, как это работает:

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

Обратите внимание, что вы также можете использовать эти ярлыки для свойств заполнения и границы.

Смотрите также: Шпаргалка по основным свойствам CSS3

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

/* .отображать {
дисплей: нет! важно;
} */
.content-box {
дисплей: гибкий;
flex-direction: ряд;
align-items: center;
цвет фона: #fdf;
высота: 20em;
ширина: 30em;
заполнение: 5em 2em 8em;
бордюрный стиль: гребень сплошной пунктирной канавки;
ширина границы: 4em 2em 2em;
радиус границы: 20%;
/ * Использование отрицательной маржи * /
маржа: 3em -20em 3em 5em;
}

Выход:

Коробочная модель: создание идеального пиксельного веб-сайта

Блочная модель позволяет определять расстояние между элементами, добавлять границы и легко создавать сложный макет. Вы можете сразу приступить к созданию классного веб-сайта. А пока вы можете исследовать рамка property и поэкспериментируйте с приведенным выше кодом.

Вы должны понимать, что есть и другие методы размещения контента в CSS. К ним относятся CSS Grid и CSS Flexbox. Когда вы освоитесь с коробочной моделью, вам следует продолжить изучение этих альтернатив.

Учебное пособие по CSS Flexbox: основы

Идеально позиционируйте свои HTML-элементы с помощью CSS Flexbox.

Читать далее

Об авторе