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 пикселей.
Полный макет страницы будет разработан с учетом общей ширины и общей высоты каждого элемента.
Источник записи: www.webnots.com