Позиционирование элементов

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML Tables
HTML Tables
Table Borders
Table Sizes
Table Headers
Padding & Spacing
Colspan & Rowspan
Table Styling
Table Colgroup

HTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Attributes ¶

Attribute	Value	Description
align	leftrightcenterjustify	Was used to align the content inside a <div> tag.This attribute is not supported in HTML5. CSS text-align property is used instead.

The <div> tag also supports the Global attributes and the Event Attributes.

How to style <div> tag?

Common properties to alter the visual weight/emphasis/size of text in <div> tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <div> tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for <div> tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <div> tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Адаптивный фон, фиксированный контент

В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:

HTML

<section>
  <div class="wrapper"></div>
</section>

CSS

section {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.

CSS

section {
  padding: 1rem calc(50% - 585px);
}

Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:

CSS

section {
  padding: 1rem;
}

@media (min-width: 1170px) {
  section {
    padding: 1rem calc(50% - 585px);
  }
}

В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.

CSS

section {
  padding: 1rem max(1rem, (50% - 585px));
}

Псевдоклассы для структуры

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Основные стили ссылок

В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

• :link — ссылка, по которой пользователь еще не переходил;
• :visited — ссылка, по которой пользователь переходил раньше;
• :hover — ссылка, на которую пользователь навел курсор мыши;
• :active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Стили кнопок

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы

Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

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

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Дивы контейнеров

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

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div class='page'>  <!-- Добавьте это -->
<h1> Селекторы CSS</h1>
    <p  class='synopsis'>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства

Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер:. Именно таким образом определяются более сложные макеты веб-страниц

Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой

с классом .sidebar

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

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

Общая структура и логика веб-страницы

Каждая из популярных систем управления сайтами предлагает свой взгляд на фундаментальные позиции в разработке и важные сущности в структуре и содержании страниц сайтов. По старинке все выделяют тегами div в HTML-странице:

• шапку;
• «тело» + меню (вертикальное или горизонтальное);
• левую и/или правую колонки как части тела или его дополнение;
• подвал.

В сложившемся обиходе разработчика все это звучит более прозаично: header, body, footer или «хедер», «контент» и «футер». Добавлять или нет левую и правую колонки, то есть разделять контент сайта на центральный поток данных, левую и правую сторону — компетенция разработчика и особенности решаемой задачи.

Использовать таблицы (table HTML) или дивы (div HTML) — особенной разницы нет. Можно вообще всю страницу «изложить» одним списком (ul и li): это свежо и экстравагантно, но работать будет. Выбор варианта верстки за разработчиком, но по сложившейся традиции все выбирают верстку блоками. Использовать HTML div и style CSS — просто, читабельно и продуктивно.

Фрагменты URL-адресов

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код

Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

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

Краткий обзор элемента

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

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

Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента. Сохраните файл index.html и перезагрузите его в браузере

Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»)

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:

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

Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:

В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3

Обратите внимание, имена селекторов классов начинаются с точки

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

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

Вы должны получить такой результат:

На вашей веб-странице будет три элемента

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

Высота блока

Высота блока формируется по тем же правилам, что и ширина. А именно, высота складывается из значений следующих свойств:

• height — высота содержимого;
• padding-top и padding-bottom — поле сверху и снизу от содержимого;
• border-top и border-bottom — толщина границы сверху и снизу;
• margin-top и margin-bottom — отступ сверху и снизу.

Если свойство height не указано, то оно считается как auto, в этом случае высота содержимого вычисляется автоматически. На рис. 3 показаны свойства, влияющие на высоту блока.

Рис. 3. Высота блока

Несмотря на схожесть принципов построения ширины и высоты, у них есть некоторые различия.

1. Если содержимое превышает размер блока при заданном height, то содержимое отображается поверх блока (рис. 4).

Рис. 4. Превышение размеров блока

Чтобы избежать подобного поведения, свойство height лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется добавить свойство overflow — значение auto устанавливает полосы прокрутки при необходимости (пример 2), а значение hidden скрывает всё, что не помещается в заданные размеры.

Пример 2. Использование overflow

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Высота</title>
<style>
.block {
background: #C5DF94; /* Цвет фона */
height: 50px; /* Высота */
padding: 10px; /* Поля вокруг текста */
overflow: auto; /* Добавляем полосы прокрутки */
}
</style>
</head>
<body>
<div class=»block»>
<p>Лев ревёт только в том случае, когда сообщает, что
территория принадлежит ему или провозглашает себя царём природы.</p>
<p>Охотничий участок льва может иметь длину и ширину
до тридцати километров.</p>
</div>
</body>
</html>

Результат данного примера показан на рис. 5. Высота блока задана явно и если содержимое не помещается в блок по высоте, то появляется вертикальная полоса прокрутки.

Рис. 5. Полосы прокрутки в блоке

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

Пример 3. Высота блока

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Высота</title>
<style>
html, body {
height: 100%; /* Высота */
margin: 0; /* Убираем отступы у веб-страницы */
}
.block {
background: #C5DF94; /* Цвет фона */
height: 100%; /* Высота */
padding: 20px; /* Поля вокруг текста */
box-sizing: border-box; /* Алгоритм подсчёта размеров */
}
</style>
</head>
<body>
<div class=»block»>Лев ревёт только в том случае, когда сообщает, что
территория принадлежит ему или провозглашает себя царём природы.</div>
</body>
</html>

Результат данного примера показан на рис. 6. Здесь для <div> родителем выступает элемент <body>, поэтому для него устанавливаем значение height равным 100%. В то же время на <body> действуют те же правила, что и на <div>, поэтому для родителя <body>, которым является <html>, также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты веб-страницы.

Рис. 6. Высота блока в процентах

Сущность блока информации

Термин «информация» в интернет-программировании имеет свой смысл. Это данные, определенным образом структурированные и представленные. Информация — это значительно более широкое понятие. В программировании веб-ресурсов этот термин несет в себе минимально возможный смысл и объем.

Размер и положение тега HTML div: width/height и left/top могут быть абсолютными и относительными. Вкладывая теги друг в друга, можно манипулировать положением и размерами. Меняя правило CSS position с absolute на relative, можно управлять положением тегов по отношению друг к другу внутри окна браузера.

Браузер как приложение несет в себе наследие от локального программирования: это программа, в которой есть окно, в котором отображается язык гипертекста, дополненный стилями CSS и оживленный работой JavaScript-кода.

Можно вспомнить любимое всеми компаниями (интернет-студиями) разделение разработки на фронтенд и бэкенд, но сути это не меняет

Не суть важно, как блок оказался на HTML-странице: был написан «ручками» или сформирован как результат работы PHP-скрипта на сервере. Важно, что каждый тег div как HTML/CSS-композиция — это положение, размер, цвет (символа/фона), прозрачность, трансформация, движение, границы и пр

Атрибутов и возможностей для описания блока информации правила CSS предоставляют большое множество, а логика HTML дает возможность использовать дивы как по прямому назначению, так и по логике и опыту разработчика.

Например, div HTML — это:

• обертка, то есть место размещения системы тегов;
• область размещения точек для обработчиков JavaScript;
• «массив» тегов для обработки.

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

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

Третий вариант значительно упрощает обработку коллекций тегов: вместо того чтобы перебирать всю коллекцию тегов div (body) HTML-страницы, разработчик может выполнить поиск внутри одного тега, который невидим и не слышим, но включает в себя все актуальные позиции.

Специфичность CSS

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

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

Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

Селектор потомков

Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h1 em {
  /* определенные стили */
}

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

• vh — это 1% от высоты окна;
• vw — это 1% от ширины окна.

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

• первый блок — 10vw
• второй блок —  20vw
• третий — 50vw

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

Блоки стали такой же высоты, как и экран

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.

Используем свойство Display: Contents

Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.

CSS

<header class="site-header">
    <div class="wrapper site-header__wrapper">
            <!-- Header content -->
    </div>
</header>

CSS

.site-header__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

CSS

.site-header__wrapper {
  display: contents;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.

Используем переменные CSS для вариаций контейнеров

Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным

Обратите внимание на следующее:

HTML

<div class="wrapper"></div>

CSS

.wrapper {
  max-width: var(--wrapper-width, 1170px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Возможно, вы заметили, что у функции var есть два значения: первое – —wrapper-width, и второе – 1170px. Вторая переменная является резервной, то есть используется, если значение переменной —wrapper-width не установлено.

Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.

HTML

<div class="wrapper" style="--wrapper-width: 720px"></div>

Таким образом, я создал вариацию контейнера:

• Без добавления новых классов;
• Не копируя и не вставляя стили;
• Более надежную и легко редактируемую с помощью DevTools.

Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:

HTML

<div class="wrapper wrapper--small"></div>

CSS

.wrapper--small {
  --wrapper-width: 720px;
  /* это изменит ширину контейнера, установленную по умолчанию */
}