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

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

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

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

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

Прибыль – это область вокруг границы и всегда прозрачная. Назначение поля – обеспечить необходимое пространство между элементами и от краев браузера.

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

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

Содержание – фактическое содержимое, такое как текст и изображение между тегами HTML.

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

Давайте сделаем простой пример создания абзаца в тегах 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 элемента в браузере IE 11

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

Это хорошая идея, чтобы увидеть теорию на практике, и коробочную модель элемента можно увидеть прямо из вашего веб-браузера. Здесь мы объясняем использование браузера Internet Explorer 11, и метод остается для всех других браузеров, таких как Chrome, Firefox, Edge и т. Д.

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

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

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

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

Расчет ширины и высоты элемента в блочной модели 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 пикселей.

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *