Чтобы создать контейнер в HTML, нужно использовать тег . Этот тег не имеет своего собственного стиля, но вы можете добавить стили, используя атрибут class или id .
Пример создания контейнера с классом «container»:
class="container">
Вы можете добавить стили для этого контейнера в своем файле CSS, например:
Этот код задаст ширину контейнера в 80% от родительского элемента, задаст отступы сверху и снизу в 20 пикселей, а также задаст цвет фона.
Также, вместо класса можно использовать атрибут id , который должен быть уникальным на странице:
id="container">
И стили для этого контейнера нужно будет задать так:
#container /* Стили */>
Стилизация контейнеров для содержимого веб-страниц
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container). Стилизовать контейнеры средствами CSS можно по-разному. Некоторые способы работы с контейнерами ставят дизайнера перед необходимостью решать достаточно сложные задачи.
В этом материале я расскажу о контейнерах для содержимого веб-страниц: о том, как они работают, о том, как ими пользоваться, и о тех случаях, когда лучше обойтись без них. Обратите внимание на то, что я буду использовать здесь термины «обёртка» и «контейнер» как равнозначные.
Общие сведения
Когда вы, при разговоре о некоем элементе веб-страницы, узнаёте о том, что речь идёт об обёртке или о контейнере, это значит, что, на самом деле, перед вами — группа элементов, которая «обёрнута» в другой элемент или «размещена» внутри этого элемента. Если, настраивая веб-страницу, не пользоваться дополнительными элементами, отведя роль контейнера элементу , то стилизовать этот элемент можно так:
body
Но в современных условиях использование в качестве контейнера элемента может оказаться непрактичным. Контейнер позволяет не допустить выхода дочерних элементов за его границы.
Контейнер не даёт дочерним элементам выходить за его границы
Здесь имеется боковая и основная области страницы. Обе эти области находятся внутри элемента-контейнера. Ему назначен класс .wrapper . Среди прочих свойств контейнера, естественно, задана и его ширина. Структура HTML-кода такой страницы выглядит так:
Без использования элемента-обёртки дочерние элементы будут размещаться, ориентируясь на края экрана. Это может быть неудобным для пользователей. Особенно — для тех, которые работают на больших экранах.
Страница без элемента-контейнера, включающего в себя её содержимое
Здесь показано, как элементы, растягиваясь, занимают весь экран. Происходит это в том случае, если в макете страницы нет элемента-контейнера. Полагаю, не следует предлагать пользователям работать с подобными страницами. Позвольте мне объяснить эту мысль.
О необходимости использования контейнеров для содержимого веб-страниц
Использование контейнера для содержимого веб-страниц имеет множество сильных сторон, о которых стоит знать дизайнерам и разработчикам. Вот некоторые из этих сильных сторон:
Использование контейнера улучшает читабельность содержимого страницы. Без контейнера содержимое, вроде текста, может растягиваться на всю ширину экрана. На маленьких экранах подобное может давать вполне приемлемый результат. Но на больших экранах это выглядит очень плохо.
Группировка элементов дизайна страницы упрощает настройку расстояния между ними.
Если элементы дизайна нужно сгруппировать по столбцам, это будет сложно сделать без использования контейнера.
Настройка элемента-контейнера средствами CSS
Теперь, когда мы поговорили об основах применения контейнеров, и о том, какие преимущества даёт их использование, давайте остановимся на том, как настраивать их средствами CSS.
▍Настройка ширины контейнера
Элемент-контейнер с настроенной шириной
При создании контейнера первое, что нужно решить, это то, какой ширины он будет. На вопрос о желаемой ширине контейнера можно ответить, проанализировав дизайн страницы. В целом, можно сказать, что чаще всего используются контейнеры с шириной, находящейся в пределах 1000px — 1300px . Например, в популярном фреймворке Bootstrap используется ширина, равная 1170px .
.wrapper
Здесь показана установка ширины элемента с классом .wrapper в 1170px , но, на самом деле, свойство width для настройки ширины контейнеров использовать не рекомендуется. Дело в том, что это приводит к необходимости горизонтального скроллинга страницы в том случае, если ширина области окна браузера, доступной для вывода страницы, меньше 1170px . Решить эту проблему можно, воспользовавшись свойством max-width :
.wrapper
Хотя это — вполне рабочий приём, можно полностью избавиться от свойства width и, как в следующем примере, пользоваться лишь свойством max-width :
.wrapper
Теперь, когда мы нашли подходящий механизм настройки ширины контейнера, давайте поговорим о том, как выровнять контейнер по центру страницы.
▍Выравнивание контейнера по центру страницы
Контейнер, выровненный по центру страницы
Для того чтобы выровнять контейнер по центру страницы, нужно, при настройке его внешних отступов, воспользоваться значением auto для левого и правого отступов:
.wrapper
Вот как, в соответствии со спецификацией CSS, ведут себя отступы, которым назначено значение auto :
Если margin-left и margin-right установлены в значение auto, то значения, которые будут использованы для этих отступов, будут одними и теми же. Это позволяет центрировать элемент по горизонтали относительно краёв содержащего его блока.
Если вас интересуют подробности об использовании ключевого слова auto в CSS — взгляните на эту мою статью.
Я воспользовался здесь конструкцией margin: 0 auto . Она сбрасывает размеры верхнего и нижнего отступов в значение 0, а левый и правый отступы настраивает в соответствии с особенностями применения ключевого слова auto . У такого шага есть некоторые последствия, о которых я расскажу ниже. А пока же хочу отметить, что рекомендуется использовать полный вариант вышеописанной сокращённой конструкции для настройки внешних отступов:
.wrapper
▍Настройка левого и правого внутренних отступов
Горизонтальные (левый и правый) внутренние отступы
При проектировании контейнера важно уделить внимание настройке его левого и правого внутренних отступов. Когда размер области просмотра меньше максимальной ширины контейнера, это приведёт к тому, что края контейнера будут прижаты к границам области просмотра. Вот пример стилизации контейнера, в котором предусмотрены внутренние отступы:
.wrapper
Настроив внутренние отступы контейнера, мы можем быть уверены в том, что края контейнера, в любом случае, будут находиться как минимум в 16px от краёв области просмотра, даже в том случае, если ширина области просмотра окажется меньше максимальной ширины контейнера. Внутренние отступы — это нечто вроде защитного механизма, который не даёт границам контейнера прижиматься к границам области просмотра даже в том случае, когда область просмотра уже, чем максимальная ширина контейнера.
▍Использование процентных значений при настройке контейнеров
Мне, после публикации исходного варианта этого материала, написали об использовании процентных значений при настройке контейнеров. В частности, речь идёт о применении CSS-свойства max-width: 90% вместо использования свойств padding-left и padding-right .
Использование процентных значений при настройке контейнеров и ситуации, когда значение max-width: 90% приводит к приемлемым и неприемлемым результатам
Хотя этот подход оказался вполне рабочим, выяснилось, что на больших экранах 90% ширины области просмотра — это слишком много. Но данную проблему можно решить, воспользовавшись медиа-запросом:
В результате оказывается, что, используя процентное значение, мы усложняем CSS-код. Для того чтобы избавить себя от необходимости применения медиа-запроса, мы можем использовать фиксированное значение для ширины. Ещё одно решение, предложенное в этом твите, заключается в применении комбинации свойств width: 90% и max-width: 1170px :
.wrapper
Это — интересный подход, но я предпочёл бы настраивать внутренние отступы самостоятельно, не полагаясь на процентные значения.
▍Свойство display элемента-контейнера
Так как для оформления контейнеров используют теги , контейнеры, по умолчанию, являются блочными элементами. Что если понадобится поменять свойство контейнера display на grid , сделав это для того чтобы разместить его дочерние элементы в сетке?
Я не рекомендую этого делать, так как это идёт вразрез с идеей разделения ответственностей. Элемент-контейнер, «обёртка», это сущность, предназначение которой заключается в том, чтобы «оборачивать» другие элементы. Если нужно разместить дочерние элементы контейнера в сетке, тогда стоит добавить в контейнер ещё один , включающий в себя другие элементы, свойство которого display установлено в значение grid . Это будет проще и чище, чем настройка сетки средствами основного контейнера. Такой подход, кроме того, позволяет говорить о том, что в будущем проект, в котором он используется, будет легче поддерживать.
Пусть имеется такой контейнер:
Задавать свойство display: grid подобного элемента не рекомендуется из-за того, что такой элемент может использоваться на разных страницах. Его особые настройки могут случайно привести к нарушению размещения элементов. Вот неудачный вариант настройки контейнера, о котором идёт речь:
.wrapper
Лучше будет использовать такой HTML-код:
Элемент с классом featured-news можно стилизовать так:
.featured-news
Обратите внимание на то, что в этом примере мы использовали отдельный элемент в качестве ещё одной обёртки для содержимого страницы. На имена классов, использованных здесь, можете внимания не обращать. Для решения подобной задачи можно подобрать более удачные имена классов, которые подойдут для многократного использования на различных страницах сайта. Однако именование CSS-сущностей выходит за рамки данного материала.
▍Настройка внешних отступов, разделяющих элементы-контейнеры
Помните, как выше я не рекомендовал использование сокращённого способа настройки внешних отступов для центрирования элемента-контейнера? Речь шла о такой конструкции:
.wrapper
Хотя это — вполне рабочий стиль, в том случае, если на странице имеется несколько элементов-обёрток, и между ними должно быть некоторое расстояние, применение подобного стиля может привести к путанице. Если вы, по какой-то причине, решите уточнить стилизацию элемента-обёртки, применив дополнительный класс, то настройка внешних отступов с помощью этого класса не даст нужных результатов из-за особенностей расчёта значений специфичности CSS-правил.
Я имею в виду такую схему стилизации:
.wrapper-variation
Свойство margin для элемента с классом .wrapper-variation не будет применено к элементу из-за того, что его переопределяет свойство margin: 0 auto . Краткая форма настройки свойства переопределяет его полную форму. Для того чтобы подобного избежать, рекомендуется в таких случаях использовать полную форму записи свойств. То есть, при стилизации элемента с классом .wrapper нужно поступить так:
.wrapper
Теперь поговорим о настройке внешних отступов элементов. При работе над каждым своим проектом я готовлю набор вспомогательных классов для настройки внутренних и внешних отступов. Я использую их там, где они нужны. Взгляните на следующий рисунок.
Автономный контейнер и контейнер внутри элемента
При таком подходе CSS-код для элемента-обёртки остаётся в неизменном виде, а расстояния между элементами настраиваются с использованием вспомогательных CSS-классов. Тут у вас может появиться вопрос о том, зачем мне понадобилось использовать на странице несколько контейнеров, когда можно обойтись одним. Обратите внимание на то, что в вышеприведённом HTML-коде имеется элемент , расположенный между двух элементов-обёрток.
Здесь хорошо показывает себя использование модификатора !important . Дело в том, что смысл использования вспомогательных классов заключается в том, чтобы принудительно менять значения свойств. Обеспечить такое поведение можно с помощью !important .
Контейнер внутри полноэкранного элемента
В некоторых случаях бывает так, что есть элемент с фоном, занимающий 100% ширины области просмотра, а внутри этого элемента имеется элемент-контейнер. Эта схема похожа на ту, которую мы рассматривали в предыдущем разделе.
HTML-структура страницы в такой ситуации может выглядеть так:
Элемент занимает 100% ширины области просмотра. Этому элементу можно назначить фоновое изображение или фоновый цвет. Контейнер, находящийся внутри этого элемента, не даёт содержимому занимать всю ширину области просмотра.
Элемент занимает всю ширину области просмотра, контейнер ограничивает пространство, в котором выводится содержимое страницы
На этом рисунке у элемента задано фоновое изображение. Он занимает всю ширину области просмотра, а содержимое страницы, выводимое в контейнере, ограничено шириной контейнера.
Нужно ли заключать в контейнер содержимое верхнего блока страницы?
Нужен ли контейнер для оформления верхнего блока страницы, который часто называют «Hero Section»? Это зависит от каждой конкретной ситуации. Исследуем два самых распространённых подхода к оформлению верхних блоков страниц.
Первый подход предусматривает центровку содержимого блока и ограничение ширины содержимого.
Ширина содержимого верхнего блока страницы ограничена
Второй вариант предусматривает распределение содержимого в пределах верхнего блока.
Содержимое распределено в пределах верхнего блока страницы
Для того чтобы лучше разобраться в этих паттернах, предлагаю исследовать особенности их внутреннего устройства.
Верхний блок страницы, содержимое которого выровнено по центру
Возможно, разрабатывая верхний блок страницы, вам захочется разместить в соответствующем элементе некое содержимое и выровнять его по центру без использования элемента-контейнера.
How to make bread at home
.
Sign up
При стилизации вышеприведённого HTML-кода выровнять его содержимое по центру можно, воспользовавшись свойством text-align :
.hero
При таком подходе всё будет выглядеть достойно до тех пор, пока не изменится ширина окна браузера. Вот разбор проблем, которые это может вызвать.
▍Проблема №1: содержимое раздела прижимается к краям области просмотра
Так как в данном примере не настроены правый и левый внутренние отступы, содержимое раздела будет размещено вплотную к границам этого раздела. Это создаёт неудобства для пользователей, так как им сложнее будет читать содержимое верхнего блока страницы.
Содержимое раздела прижато к его краям
▍Проблема №2: слишком большая длина строк текста на экранах большого размера
На экранах большого размера текст, оформленный тегом
, может быть очень тяжело читать из-за того, что длина абзаца окажется слишком большой. В соответствии с этим документом, рекомендованное число символов в строке составляет 45-75. Выход длины строки за пределы этого диапазона усложняет чтение.
Длина строки слишком велика
▍Решение проблем
Для решения вышеозначенных проблем можно использовать контейнер. Он позволит и удержать длину строки в разумных пределах, и предотвратить плотное прилегание содержимого к границам раздела.
How to make bread at home
.
Sign up
Здесь я, настраивая контейнер, использую имя класса hero__wrapper , так как этот контейнер, вполне возможно, будет уникальным и будет применяться только для оформления верхнего блока страницы. Поэтому, в частности, ширина контейнера может быть меньше, чем ширина контейнеров, используемых в обычных условиях.
.hero__wrapper
Выровнять содержимое верхнего блока страницы по центру можно, используя любой удобный подход. Тут всё зависит от каждой конкретной ситуации. В данном примере для выравнивания контента достаточно воспользоваться свойством text-align: center .
Как выравнивать контейнер: по центру, или по левому краю страницы?
Я не могу дать однозначного ответа на этот вопрос, однако я видел сайты, контейнеры, используемые на которых, выравниваются на экранах ноутбуков по центру, а на экранах настольных компьютеров — по левому краю страницы.
Примером такого сайта является Techcrunch. Обратите внимание на то, что на экране настольного компьютера содержимое сайта выровнено по левому краю страницы.
Выравнивание содержимого на экране ноутбука и на экране настольного компьютера
Мне нравится работать с сайтами, содержимое которых выровнено по центру. На страницах таких сайтов имеются симметричные отступы слева и справа. Но у того, что содержимое некоторых сайтов выравнивают по левому краю страницы, может быть какая-то причина, о которой я не знаю. Если вы знаете о том, почему это так, дайте мне знать.
Использование CSS-переменных для создания различных вариантов стилизации контейнеров
Редко бывает так, что все элементы-контейнеры, используемые в некоем проекте, имеют одну и ту же ширину. Ширина контейнера может меняться в зависимости от содержимого контейнера и от того, как именно он используется. Большую гибкость в работе с контейнерами даёт использование CSS-переменных. Это, кроме того, весьма современный подход к настройке контейнеров. Рассмотрим пример.
Вот HTML-код контейнера:
.wrapper
Если вы внимательно прочли CSS-код, вы могли заметить, что var() передаётся два значения: первое — это переменная —wrapper-width , второе — это обычное значение 1170px . Второе значение является запасным. Смысл его существования заключается в том, что оно будет использовано в том случае, если значение переменной —wrapper-width окажется неустановленным.
Что это значит? А это значит, что в наших руках оказывается инструмент для создания различных вариантов элементов-обёрток благодаря возможности переопределения значения переменной —wrapper-width . Выглядит это так:
Благодаря этому подходу я смог создать особый контейнер, не прибегая при этом к следующим действиям:
Добавление к элементу нового класса.
Копирование и дублирование существующих стилей.
Если вам не нравится этот подход из-за использования в нём встроенного стиля для переопределения значения CSS-переменной, вы вполне можете решить эту задачу и с помощью добавления к элементу нового класса. Например — так, как показано ниже.
Так выглядит стиль:
.wrapper--small < --wrapper-width: 720px; /* благодаря этому стандартная ширина контейнера будет переопределена. */ >
Здесь можно найти рабочий пример.
Использование display: contents
Для начала позвольте немного рассказать о значении contents свойства display . Каждый элемент в CSS — это блок. В этом блоке что-то содержится, у него есть внутренние и внешние отступы и граница. Использование свойства display: contents приводит к тому, что блок, которому оно назначено, удаляется из потока документа. Это можно представить себе как удаление открывающего и закрывающего тегов блока.
.site-header__wrapper
Элемент-обёртка
При реализации чего-то, напоминающего этот пример, может понадобиться сделать так, чтобы заголовочный раздел сайта мог бы растягиваться до полной ширины страницы, чтобы его ширина не ограничивалась бы свойствами контейнера.
Здесь, благодаря использованию свойства display: contents , элемент-обёртка будет как бы «скрыт». Теперь, когда свойство display: flex применяется к элементу с классом .site-header , дочерние элементы контейнера становятся дочерними элементами .site-header .
Заголовочная часть сайта занимает, в ширину, всё доступное пространство
Отзывчивый фон и фиксированное содержимое
В книге CSS Secrets представлена интересная техника, которая может быть использована для стилизации разделов, имеющих отзывчивый фон (фон, способный занимать всю доступную ширину области просмотра) и элемент-контейнер для содержимого. Рассмотрим обычный способ создания макетов подобных разделов.
section < background-color: #ccc; >.wrapper
Здесь значения свойств margin-left: auto и margin-right: auto вычисляются путём взятия половины ширины области просмотра и вычитания из неё ширины содержимого. Того же самого можно добиться с использованием внутренних отступов.
Внутренние отступы
section
Но дело пока ещё не сделано. На мобильных устройствах содержимое будет прижато к краям области просмотра. Решить эту проблему можно, например, так:
В качестве альтернативного решения можно предложить применение новой CSS-функции max() . Используя её, мы задаём минимальный размер внутреннего отступа, равный 1rem , а в качестве второго значения, передаваемого ей, указываем выражение 50% — 585px .
section
Если вам интересны подробности о CSS-функциях min() , max() и clamp() — вот мой материал на эту тему.
Как вы стилизуете элементы-контейнеры?
Компонент Контейнер Container
Компонент «Контейнер» позволяет выравнивать и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта.
Применение
Основы. Использование
Добавьте класс .uk-container к элементу блока, чтобы придать ему максимальную ширину (по умолчанию max-width: 1200px ). Элемент будет отцентрирован и будет иметь боковые внутренние отступы, которые автоматически адаптируются для больших экранов. Обычно в контейнер оборачивают основной контент сайта.
Модификатор «Размер»
Добавьте один из следующих классов в контейнер, чтобы применить необходимую максимальную ширину.
Класс
Описание
.uk-container-xsmall
Добавьте этот класс, если вы хотите установить малую ширину для контейнера. По умолчанию: max-width: 750px
.uk-container-small
Добавьте этот класс для небольшого размера контейнера. По умолчанию: max-width: 900px
.uk-container-large
Добавьте этот класс для широкого размера контейнера. По умолчанию: max-width: 1400px
.uk-container-xlarge
Добавьте этот класс для большого размера контейнера. По умолчанию: max-width: 1600px
.uk-container-expand
Добавьте этот класс, если вы не хотите ограничивать ширину контейнера, но хотите динамическое горизонтальное заполнение.
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
Примеры использования
Группировка элементов формы:
Создание панели навигации:
Если вы используете слишком много тегов для обёртывания содержимого, код может стать громоздким и трудночитаемым. В этом случае лучше использовать семантические теги или .
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
