Что такое container в html

@container¶

Правило @container — это правило условной группы, которое применяет стили к контексту включения. Объявления стилей фильтруются по условию и применяются к контейнеру, если условие истинно. Условие оценивается, когда контейнер меняет размер.

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

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис¶

1 2 3

@container container-condition>  /* */ > 

Значения¶

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

Набор объявлений CSS.

Логические ключевые слова¶

Логические ключевые слова можно использовать для определения состояния контейнера:

• and — сочетает в себе два или более условий.
• or — сочетает в себе два или более условий.
• not — отрицает условие. Для каждого запроса контейнера допускается только одно условие «не», которое нельзя использовать с ключевыми словами and или or .

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@container not (width  400px)  /* */ > @container (width > 400px) and (height > 400px)  /* */ > @container (width > 400px) or (height > 400px)  /* */ > @container (width > 400px) not (height > 400px)  /* */ > 

Именованные контексты изоляции¶

Контекст включения может быть назван с помощью свойства container-name .

1 2 3 4

.post  container-name: sidebar; container-type: inline-size; > 

В контейнерных запросах свойство container-name используется для фильтрации набора контейнеров до контейнеров с совпадающим именем контейнера запроса:

1 2 3

@container sidebar (width > 400px)  /* */ > 

Дескрипторы¶

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

Соотношение сторон контейнера, рассчитанное как отношение ширины к высоте контейнера, выраженное как значение .

Размер блока контейнера, выраженный в виде значения .

Высота контейнера, выраженная как значение .

Инлайновый размер контейнера, выраженный в виде значения .

Ориентация контейнера: landscape или portrait .

Ширина контейнера, выраженная в виде значения .

Спецификация¶

container-type¶

Свойство container-type используется для определения типа включения, используемого в запросе контейнера.

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис¶

container-type: type>; 

Значения¶

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

Устанавливает контейнер запросов для многомерных запросов на встроенной оси контейнера. Применяет макет, стиль и встроенный размер к элементу.

Элемент не является контейнером запросов для любых запросов размера контейнера, но остается контейнером запросов для запросов в стиле контейнера.

Спецификация¶

Пример¶

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

 1 2 3 4 5 6 7 8 9 10

div class="container"> div class="card"> img src="image.png" alt="Cat with two different color eyes" /> h2>Card titleh2> p>Card contentp> div> div> 

Чтобы создать контекст контейнера, добавьте к элементу свойство container-type . В следующем примере значение inline-size используется для создания контекста включения для встроенной оси контейнера:

1 2 3

.container  container-type: inline-size; > 

Написание запроса к контейнеру с помощью at-правила @container применит стили к элементам контейнера, если он шире 400 пикселей:

1 2 3 4 5 6

@container (min-width: 400px)  .card  display: grid; grid-template-columns: 2fr 1fr; > > 

Контейнеры

Контейнеры являются фундаментальным строительным блоком Bootstrap, которые содержат ваш контент, дополняют и выравнивают его на устройствах или в областях просмотра.

На этой странице

Как это устроено

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Контейнеры используются для размещения в них содержимого, дополнений и (иногда) центрирования содержимого внутри них. Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

В Bootstrap используется три разных типа контейнеров:

• .container , который устанавливает максимальную ширину max-width в каждой отзывчивой контрольной точке;
• .container-fluid , ширина которого width: 100% на всех контрольных точках;
• .container- , то есть ширина width: 100% до указанной контрольной точки.

В приведенной ниже таблице показано, как максимальная ширина max-width каждого контейнера .container и .container-fluid сравнивается с исходными в каждой контрольной точке.

Посмотрите их в действии и сравните их в нашем примере Сеток.

Extra small	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Контейнер по умолчанию

По умолчанию класс .container является адаптивным контейнером фиксированной ширины, что означает, что его максимальная ширина max-width изменяется в каждой контрольной точке.

div class="container"> div>

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

Адаптивные контейнеры позволяют указывать класс шириной 100%, пока не будет достигнута указанная контрольная точка, после чего мы применяем max-width для каждой из более высоких контрольных точек. Например, .container-sm будет иметь ширину в 100% до тех пор, пока не будет достигнута контрольная точка sm , где он будет масштабироваться уже с помощью md , lg , xl и xxl .

div class="container-sm">100% wide until small breakpointdiv> div class="container-md">100% wide until medium breakpointdiv> div class="container-lg">100% wide until large breakpointdiv> div class="container-xl">100% wide until extra large breakpointdiv> div class="container-xxl">100% wide until extra extra large breakpointdiv>

Подвижные контейнеры

Используйте .container-fluid для создания контейнера полной ширины, охватывающего всю ширину области просмотра.

div class="container-fluid"> . div>

Sass

Как показано выше, Bootstrap генерирует серию предопределенных контейнерных классов, чтобы помочь Вам создать желаемые макеты. Вы можете настроить эти предопределенные классы контейнеров, изменив карту Sass (находится в _variables.scss ), которая их поддерживает:

$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); 

Помимо настройки Sass, Вы также можете создавать свои собственные контейнеры с помощью нашего миксина Sass.

// Исходный миксин @mixin make-container($padding-x: $container-padding-x)  width: 100%; padding-right: $padding-x; padding-left: $padding-x; margin-right: auto; margin-left: auto; > // Применение .custom-container  @include make-container(); > 

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

W3.CSS Контейнери

Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Мені вже набридло повторювати, що ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Ця стаття світло-сіра, а текст коричневий. Зрозуміло?!��

Це нижній колонтитул

Клас контейнера

Клас w3-container додає 16px лівий і правий відступ (padding) до будь-якого елементу HTML. Клас w3-container є ідеальним класом для використання на всіх елементах контейнера HTML, таких як: , , , , , та ін.

Контейнери забезпечують рівність

• Спільні поля (margin)
• Спільні відступи (padding)
• Спільні вирівнювання (align)
• Спільні шрифти (font)
• Спільні кольори (color)

Щоб використовувати контейнер, просто додайте клас w3-container до будь-якого елементу:

Приклад

Щоб додати колір, просто додайте клас w3-color:

Приклад

Заголовки (header) та нижні колонтитули (footer)

Клас w3-container може використовуватись для стилізації заголовків: