Как делать блоки в html
Перейти к содержимому

Как делать блоки в html

  • автор:

блоки

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

Блочная модель

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля ( padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы ( border ) и завершают блок отступы ( margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.

Свойства, формирующие блочный элемент

Рис. 3.1. Свойства, формирующие блочный элемент

Блок с градиентом

Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.

Блок с тенью

Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

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

и др.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы ( , например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).

Пример 1. Использование блочных элементов

   Блочные элементы  

Lorem ipsum dolor sit amet.

Ut wisi enim ad minim veniam

В данном примере абзац (тег

) вставляется внутрь контейнера , а ссылка (тег ) — в заголовок

. Кстати, ошибкой будет поступить наоборот — добавить

в контейнер (

Ut wisi

), поскольку тег не относится к блочным элементам.

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

Ширина блочных элементов

По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.

Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока ( width ), отступов ( margin ), полей ( padding ) и границ ( border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.

Пример 2. Ширина слоя

   Ширина    
Lorem ipsum dolor sit amet.

В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.

Рис. 1

Рис 1. Ширина блочного элемента

В том случае когда < !DOCTYPE>в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .

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

Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.

Пример 3. Ширина слоя в процентах

   Ширина     

Результат примера показан на рис. 2.

Отображение ширины слоев в браузере

Рис. 2. Отображение ширины слоев в браузере

Ширина первого слоя в данном примере ( layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя ( layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег

). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою ( layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.

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

Высота

С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.

Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).

Пример 4. Высота слоя

   Высота     

Результат данного примера продемонстрирован на рис. 3.

Рис. 3б

Рис. 3. Высота блока в разных браузерах

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

Цвет фона

Цвет фона элемента проще всего устанавливать через универсальное свойство background . Фоном при этом заливается область, которая определяется значениями width , height и padding (рис. 4).

Рис. 4

Рис. 4. Область слоя, которая заполняется фоновым цветом

Таким образом, margin не принимает участия в формировании цветной области.

Границы

Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.

Рис. 5а

а. Internet Explorer 7

Рис. 5б

б. Firefox, Internet Explorer 8+

Рис. 5в

Рис. 5. Отображение рамки в браузерах

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

Пример 5. Пунктирная рамка

   Рамка     

Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.

Резюме

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

Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.

Блок (CSS)

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

Смотрите также

Общая информация

Help improve MDN

Was this page helpful to you?

Learn how to contribute. This page was last modified on 12 нояб. 2023 г. by MDN contributors.

  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Блочная модель

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Скажем, у вас есть такой фрагмент HTML:

Это параграф текста, в котором есть несколько слов.

Затем вы пишете для него этот CSS:

Контент выйдет за пределы вашего элемента и будет шириной в 142 пикселя, а не 100 пикселей. Почему? Блочная модель — это основа основ CSS, и понимание того, как она работает, как на нее влияют другие аспекты CSS, а главное, как ей управлять, поможет вам написать более предсказуемый CSS.

Диаграмма, показывающая четыре основных области блочной модели — блок контента, блок заполнения, блок границ и блок отступа

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

Блок заполнения окружает блок контента и является пространством, созданным свойством padding . Поскольку отступ находится внутри блока, фон блока будет виден в создаваемом им пространстве. Если для нашего блока заданы правила переполнения, такие как overflow: auto или overflow: scroll , это пространство также займут полосы прокрутки.

Три фоторамки

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

Разберем эту аналогию:

  • Блок контента — это графическая составляющая.
  • Блок заполнения — белая матовая поверхность между рамкой и иллюстрацией.
  • Блок границ — это рамка, в прямом смысле обеспечивающая границу изображения.
  • Блок отступа — это пространство между рамками.
  • Тень занимает то же пространство, что и блок отступа.

Отладка блочной модели

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

Попробуйте это в своем браузере:

  1. Откройте DevTools
  2. Выберите элемент
  3. Включите отладчик блочной модели

Управление блочной моделью

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

У inline -элемента есть блочный отступ, но другие элементы его игнорируют. Используйте inline-block , и эти элементы будут учитывать отступ, при этом элемент будет поддерживать большинство тех же действий, что и inline -элемент. block по умолчанию заполняет доступное встроенное пространство (inline space), тогда как размер элементов inline и inline-block будет соответствовать их содержимому.

Наряду с пониманием того, как стили пользовательского агента влияют на каждый блок, также необходимо понимать правило box-sizing , которое сообщает нашему блоку, как рассчитать его размер. По умолчанию у всех элементов стиль пользовательского агента следующий: box-sizing: content-box; .

Наличие content-box в качестве значения box-sizing означает, что когда вы устанавливаете размеры, такие как width и height , они будут применены к блоку контента. Если затем задать padding и border , эти значения будут добавлены к размеру блока контента.

Check your understanding

Test your knowledge of box model size impacting properties

.my-box

How wide do you think .my-box will be?

Since the default value for box-sizing is content-box, padding and borders will be added to the width. 200px would be correct if the box had box-sizing: border-box .

The default box sizing is content-box, which means padding and borders are added to the overall box.

Фактическая ширина этого блока будет равна 260 пикселям. Поскольку CSS использует box-sizing: content-box по умолчанию, применяемая ширина — это ширина контента плюс padding и border с обеих сторон. Таким образом, 200 пикселей для содержимого + 40 пикселей заполнения + 20 пикселей границы в сумме дают видимую ширину 260 пикселей.

Однако этим можно контролировать, реализовав следующую модификацию для использования альтернативной блочной модели, border-box :

.my-box

Такая альтернативная блочная модель сообщает CSS применить значение width к блоку границ, а не к блоку контента. Это означает, что наши параметры border и padding будут вписаны внутрь, и в результате, когда вы установите .my-box шириной в 200px , блок на самом деле будет отрисован шириной 200px .

Посмотрите, как это работает, в следующем интерактивном примере. Обратите внимание, что при переключении значения box-sizing на синем фоне показывается, какой CSS применяется внутри нашего блока.

*, *::before, *::after

Это правило CSS выбирает каждый элемент в документе, а также каждый псевдоэлемент ::before и ::after , и применяет box-sizing: border-box . Это означает, что теперь у каждого элемента будет эта альтернативная блочная модель.

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

Ресурсы

  • Введение в блочную модель
  • Что такое браузерные инструменты разработчика?

Таблицы стилей пользовательских агентов

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2021-03-29 UTC.

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

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