Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов

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

Блоковая модель CSS используется для настройки контента, внутренних и внешних полей, а также рамок HTML-элемента.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Блоковая модель CSS

HTML-элемент можно рассматривать как серию из четырех накладывающихся друг на друга блоков, или областей:

  • Контент (content, или содержимое) – это самое внутреннее поле, в которое помещается текст или изображения. По умолчанию его размер часто определяется размером содержащегося в нем контента. Это единственный блок в модели, значение которого по умолчанию обычно не равно нулю (если он содержит контент); в то же время, внутренние отступы, рамки и внешние поля многих HTML-элементов (таких как <p>, <h1> и <img>) по умолчанию равны нулю, если не указано иное.
  • Внутренние поля (padding) – это второй блок, который состоит из прозрачного пространства, окружающего блок контента. По умолчанию внутренне поле многих HTML-элементов равно нулю. При увеличении размера внутреннего поля увеличивается расстояние между контентом и рамкой.
  • Рамка (border) – это третья область, которая окружает внутренний отступ. По умолчанию значение рамки большинства HTML-элементов равно нулю. При увеличении размера рамки элемента увеличивается расстояние между внутренним и внешним полем. Обратите внимание, что цвет, толщину и стиль границы можно регулировать.
  • Внешнее поле (margin) – это четвертый и последний блок (самый внешний). Он состоит из прозрачного пространства за пределами рамки элемента. По умолчанию значение поля HTML-элементов равно нулю, хотя для некоторых элементов (например, для заголовков от <h1> до <h6>) по умолчанию заданы ненулевые значения. Поля двух разных элементов также могут иногда перекрываться, что называется схлопыванием полей. Когда это происходит, размер поля по умолчанию равен размеру самого большого поля (любого элемента).

внешнее поле

рамка

внутренний отступ

контент

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

Настройка размера контента HTML-элемента с помощью CSS

Сотрите весь код, который мог остаться в файле styles.css от предыдущих мануалов, и добавьте следующее правило CSS в файл styles.css:

.yellow-div {
background-color:yellow;
}

Сохраните файл styles.css. Мы только что создали класс, используя селектор классов yellow-div. Фон любого элемента <div>, которому вы присвоите этот класс, будет желтого цвета.

Затем удалите все из index.html (за исключением первой строки кода: <link rel=»stylesheet» href=»css/styles.css»>) и добавьте следующий фрагмент кода:

<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Сохраните файл и загрузите его в браузере. Вы должны получить следующий результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

На вашей веб-странице должно отображаться желтое поле, содержащее текст, который вы добавили в файл HTML. В настоящее время только самый внутренний блок – блок контента – имеет размер и значение; отступы и рамка пока что равны нулю. Также обратите внимание, что ширина и высота желтого поля автоматически определяются размером текстового содержимого внутри контейнера <div>. Попробуйте добавить или убрать кусок текста – размер контейнера <div> изменится соответственно.

Примечание: Для просмотра блоковой модели HTML элемента и значений, установленных для каждого блока, можно использовать инструменты веб-разработчика Firefox. Откройте в меню Tools и выберите Web Developer/Toggle Tools. Инструменты разработчика должны появиться в нижней части окна. Кликните на значок стрелки в левом углу набора инструментов, затем нажмите на элемент, который вы хотите проверить. Блоковая модель выбранного элемента отобразится в правом нижнем углу панели инструментов разработчика. Возможно, вам потребуется развернуть окно, чтобы просмотреть его.

Затем давайте определим ширину контейнера <div>, чтобы увидеть, как это изменит представление элемента в браузере. Добавьте следующую выделенную строку CSS в правило в файле styles.css, чтобы установить ширину 500 пикселей:

.yellow-div {
background-color:yellow;
width: 500px;
}

Сохраните файл и загрузите его в браузере. Теперь контейнер <div> должен быть шириной 500 пикселей, а его высота регулируется автоматически, чтобы текст могло уместиться внутри:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Обратите внимание, вы также можете указать высоту элемента <div>, и ширина будет изменена автоматически. Или вы можете указать и высоту, и ширину, но имейте в виду: контент будет выходить з пределы контейнера <div>, если элемент <div> окажется слишком мал.

Настройка внутреннего отступа HTML-элемента с помощью CSS

Затем давайте попробуем увеличить размер отступа, чтобы посмотреть, как это повлияет на отображение элемента <div>. Добавьте следующую выделенную строку в правило CSS в файле styles.css, чтобы установить отступ в 25 пикселей:

.yellow-div {
background-color:yellow;
width: 500px;
padding:25px;
}

Сохраните файл styles.css и перезагрузите файл index.html в браузере. Размер желтого поля должен увеличиться, и между текстом и периметром поля останется 25 пикселей:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Вы можете изменить размер внутреннего поля. Также можно изменить размер поля определенных сторон элемента, используя следующие свойства: padding-left, padding-right, padding-top, padding-bottom. Для примера попробуйте заменить объявление padding: 25px; в вашем файле styles.css следующим фрагментом кода:

.yellow-div {
background-color:yellow;
width: 500px;
padding-left:25px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 25px;
}

Сохраните файл styles.css и загрузите файл index.html в браузере. Вы должны получить такой результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Настройка размера, цвета и стиля рамки HTML-элемента с помощью CSS

Давайте теперь попрактикуемся в установке значений для рамки элемента. Свойство border позволяет устанавливать размер, цвет и стиль (solid, dashed, dotted, inset, outset) элемента HTML. Эти три параметра можно присвоить свойству border следующим образом:

selector {
border: size style color;
}

Попробуйте вставить следующее выделенное объявление в styles.css, чтобы добавить вашему элементу сплошную черную рамку шириной пять пикселей:

.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
}

Примечание: Вы можете стереть предыдущие объявления padding из предыдущего раздела и заменить их одним объявлением padding: 25px, чтобы набором правил было удобнее управлять.

Сохраните файл styles.css и перезагрузите index.html в браузере, чтобы проверить изменения. Теперь желтое поле должно иметь границу согласно значениям, которые вы установили в CSS правиле:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Попробуйте изменить значения, чтобы посмотреть, как они изменяют отображение элемента в браузере. Как и в случае с внутренними полями, вы также можете установить рамку только с одной стороны: это делается с помощью свойств border-right, border-left, border-top, border-bottom.

Настройка размера внешнего поля HTML-элемента с помощью CSS

А теперь давайте попробуем настроить размер внешних полей элемента с помощью CSS. Для наглядности в этом упражнении мы зададим очень большое значение внешних полей. Добавьте следующее выделенное объявление в свой набор правил в файле styles.css, чтобы установить поле размером в 100 пикселей:

.yellow-div {
background-color:yellow;
width: 500px;
padding: 25px;
border: 5px solid black;
margin:100px;
}

Сохраните файл styles.css и перезагрузите index.html в браузере, чтобы проверить изменения. Желтое поле должно переместиться на 100 пикселей вниз и на 100 пикселей вправо, чтобы оставить 100 пикселей свободного пространства между его границей и краями области просмотра:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

Аналогично предыдущим блокам, вы можете регулировать размеры определенных сторон внешнего поля; их можно установить с помощью margin-left, margin-right, margin-top и margin-bottom.

Прежде чем двигаться дальше, добавьте на страницу еще один контейнер <div>, чтобы увидеть, как внешние поля соседних элементов влияют друг на друга. Ничего не стирая, добавьте еще один набор правил CSS в файл styles.css:

. . .
.blue-div {
height:100px;
width:100px;
background-color: blue;
}

Сохраните файл и откройте index.html. Ничего не стирая, добавьте в файл следующий элемент <div> и присвойте ему класс blue-div:


<div class="blue-div"></div>

Сохраните файл index.html и загрузите его в браузере. Вы должны получить такой результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Теперь в браузере должно отображаться синее поле шириной 100 пикселей и высотой 1000 пикселей. Это синее поле должно быть на 100 пикселей ниже желтого поля – согласно значению внешнего отступа первого элемента. Как правило, окружающие элементы по умолчанию отодвигаются друг от друга из-за внешних полей. Однако имейте в виду, что поля соседних элементов часто накладываются – это называется схлопыванием полей (или отступов). В таком случае размеры полей элементов определяются размером самого большого поля между двумя элементами.

Заключение

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

Tags: , ,

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