TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

9

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



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

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

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

Элемент модели 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

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

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

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

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

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

Учебное пособие по блочной модели 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 пикселей.

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

Источник записи: webnots.com
Leave A Reply

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