Учебное пособие по блочной модели CSS

CSS – отличный инструмент для интерфейсного веб-дизайна. Популярность объясняется не только простотой использования, но и надежными функциями. CSS влияет на каждый элемент на веб-странице. Следовательно, каждый веб-дизайнер, являющийся основным разработчиком простых дизайнеров макетов, должен знать основы CSS. Бокс-модель в CSS – это основа для определения макетов и размещения элементов на странице. В этой статье мы подробно рассмотрим основы блочной модели CSS. Кроме того, мы также расскажем, как анализировать блочную модель элемента в браузере.

Что такое CSS Box Model?

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

Элемент модели CSS Box

• Маржа – это область вокруг границы, всегда прозрачная. Назначение поля – обеспечить необходимое пространство между элементами и от краев браузера.
• Граница – это видимая линия вокруг области содержимого и заполнения. Обычно он используется для контура элемента и может иметь любой цвет и ширину.
• Заполнение – пространство между фактическим содержимым и границей называется отступом. Если у содержимого есть видимые линии границ, уместно использовать отступы. Это поможет создать пространство между содержимым и рамкой.
• Содержимое – фактическое содержимое, такое как текст и изображение между тегами HTML.

Связанный: Учебник по модулям CSS для начинающих.

Пример элемента блочной модели

Давайте сделаем простой пример создания абзаца в тегах div, чтобы объяснить концепцию блочной модели. CSS должен выглядеть следующим образом:

<style>
.box-model {
margin: 30px 5px 5px 15px;
padding: 10px 0 10px 5px;
border: 10px solid red;
text-align: justify;
}
</style>

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

И HTML для вставки содержимого с приведенным выше css:

<div class="box-model">
<p>This is a test content to explain how CSS box model will look like. This is a paragraph with 
different padding, different margin and border of 10px.</p>
</div>

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

Просмотр блочной модели CSS элемента в браузере IE 11

Как проверить блочную модель CSS в браузере?

Хорошая идея – увидеть теорию на практике. Вы можете увидеть блочную модель элемента CSS прямо в браузере. Здесь мы показываем снимок экрана с браузером Google Chrome. Метод остается таким же для всех других браузеров, таких как Firefox, Edge и Safari.

• Откройте любую веб-страницу и щелкните правой кнопкой мыши элемент, который хотите изучить.
• Вы можете щелкнуть правой кнопкой мыши любой текст, изображение, видео или пустое место.
• Выберите вариант «Проверить элемент», чтобы открыть консоль разработчика.
• Он имеет левую панель для просмотра HTML и правую панель для просмотра CSS.
• Вы можете увидеть модель блока CSS выбранного элемента на вкладке «Макет» правой панели.
• Ссылаясь на приведенный выше пример кода – все границы, поля и отступы будут соответствовать точным размерам, как определено в CSS.

Обратите внимание: вы можете просмотреть HTML-разметку элемента в браузере Google Chrome на вкладке «Элементы». Соответствующие CSS и блочную модель можно увидеть на вкладке «Стили», как показано на рисунке ниже.

Просмотр блочной модели CSS элемента в браузере Chrome

Расчет ширины и высоты элемента в блочной модели CSS

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

<style>
.box-model {
margin: 30px 5px 5px 15px;
padding: 10px 0 10px 5px;
border: 10px solid red;
text-align: justify;
width: 300px;
height: 200px;
}
</style>

Статьи по Теме:

Теперь любой элемент, который вызывает стиль CSS-класса «box-model», должен располагаться со следующей общей шириной и общей высотой.

• Общая высота = высота + верхнее поле + нижнее поле + верхнее заполнение + нижнее заполнение + ширина границы = 200 + 30 + 5 + 10 + 10 + 10 = 265 пикселей.
• Общая ширина = ширина + левое поле + правое поле + левое поле + правое поле + ширина границы = 300 + 15 + 5 + 0 + 5 + 10 = 335 пикселей.

Полный макет страницы будет разработан с учетом общей ширины и общей высоты каждого элемента.