Определение стилей контейнера макетов в CSS

Определение стилей контейнера макетов в CSS Сайтостроение

Определение стилей контейнера макетов в CSS

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

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

Короткое описание контейнеров

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

CSS

1234567body {    max-width: 1170px;    margin-left: auto;    margin-right: auto;    padding-left: 16px;    padding-right: 16px;}

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

Определение стилей контейнера макетов в CSS

У нас есть элементы aside и main, и они размещены снутри другого элемента, который их оборачивает. Элемент .wrapper имеет, естественно, ширину.

1234<div class=»wrapper»>    <aside>…</aside>    <main>…</main></div>

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

Определение стилей контейнера макетов в CSS

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

Для чего необходимы контейнеры

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

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

Группировка частей дизайна улучшает прибавления интервалов.

Поделить элементы дизайна на столбцы без оболочки достаточно трудно.

Реализация оболочки в CSS

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

Добавление ширины

Определение стилей контейнера макетов в CSS

1-ое, что необходимо решить при реализации контейнера, это его ширина. Какая для вас нужна ширина контейнера? Это зависит от дизайна. Совершенно говоря, ширина контейнера, которая колеблется меж 1000px — 1300px, является более нередко применяемой. Пользующийся популярностью фреймворк Bootstrap, к примеру, употребляет ширину 1170px.

CSS

123.wrapper {    width: 1170px;}

Но не рекомендуется применять свойство width, потому что оно приведет к горизонтальной прокрутке, если размер экрана меньше, чем 1170px. Вы сможете решить это, добавив max-width.

CSS

1234.wrapper {    width: 1170px;    max-width: 100%;}

Пока это работает, вы сможете избавиться от width и применять лишь max-width.

CSS

123.wrapper {    max-width: 1170px;}

Сейчас, когда мы указали ширину контейнера. Давайте перейдем к центрированию.

Центрирование контейнера

Определение стилей контейнера макетов в CSS

Чтоб центрировать контейнер, для вас необходимо добавить слева и справа auto-поля:

CSS

1234.wrapper {    max-width: 1170px;    margin: 0 auto;}

Согласно спецификации CSS, ах так работают auto-поля:

Если ‘margin-left’ и ‘margin-right’ имеют значение ‘auto’, их применяемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.

Я употреблял margin: 0 auto, это в сбрасывает верхнее и нижнее поля на ноль и задает auto для левого и правого поля. Есть некие последствия использования этого, но я вернусь к ним позднее. На данный момент я рекомендую применять расширенную версию полей.

READ
Введение в CSS-анимацию

CSS

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

Добавление отступов слева и справа

Определение стилей контейнера макетов в CSS

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

CSS

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

Добавляя отступы, мы можем убедиться, что у нас будет смещение 16px с левой и правой сторон, даже если размер области просмотра меньше наибольшей ширины. Отступы являются защитной стратегией, которая дозволяет избежать прилипания контейнера к краям области просмотра, когда места недостаточно.

Обновление от 22 июня: внедрение для контейнера ширины в процентах

Я получил ответ о использовании для контейнера процентной ширины, таковой как max-width: 90%, заместо padding-left и padding-right.

Определение стилей контейнера макетов в CSS

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

CSS

123456789101112.wrapper {    max-width: 90%;    margin-left: auto;    margin-right: auto;} /* A media query for a large screen */@media (min-width: 1170px) {    .wrapper {        max-width: 1170px;    }}

Используя процентную ширину, мы добавили доп шаг. Мы можем просто избежать этого шага, используя фиксированное значение ширины. Другое решение, предложенное в этом твите, мы можем сочетать width: 90% со свойством max-width: 1170px.

CSS

123456.wrapper { width: 90%; max-width: 1170px; margin-left: auto; margin-right: auto;}

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

Тип display для контейнера

Так как контейнер является по дефлоту элементом div, это элемент уровня блока. Вопросец в том, что нам созодать, если мы желаем поменять тип отображения на grid, если содержимое снутри контейнера обязано быть расположено в сетке?

Ну, я не рекомендую созодать это, так как это противоречит концепции разделения задач. Контейнер предназначен для упаковки другого содержимого, вот и все. Если для вас нужна оболочка-сетка, то добавление в контейнер еще 1-го div с display: grid будет проще, понятнее и удобнее.

123<div class=»wrapper»>    <!— Content —></div>

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

CSS

12345.wrapper {    display: grid;    grid-template-columns: 2fr 1fr;    grid-gap: 16px;}

Наилучшее решение было бы последующим:

12345<div class=»wrapper»>    <div class=»featured-news»>        <!— Elements that needs to be placed in a grid —>    </div></div>

CSS

12345.featured-news {    display: grid;    grid-template-columns: 2fr 1fr;    grid-gap: 16px;}

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

Добавление поля меж контейнерами

Помните, когда я не рекомендовал применять сокращенную версию для центрирования элемента контейнера? Я имею в виду это:

CSS

123.wrapper {     margin: 0 auto;}

Хотя это работает, это может сбить с толку, когда у вас на страничке есть несколько контейнеров, и для вас необходимо добавить интервал меж ними. Если по какой-нибудь причине вы добавили для .wrapper иной вариант класса, добавление поля может не сработать по причинам специфики.

CSS

READ
Работа с якорями в HTML
1234567891011.wrapper-variation {    margin-top: 50px;} .wrapper {     max-width: 1170px;    margin-left: auto;    margin-right: auto;    padding-left: 16px;    padding-right: 16px;}

margin для элемента .wrapper-variation не будет работать, поэтому что он переопределен margin: 0 auto. Сокращенное свойство имеет ценность над полным. Чтоб избежать таковой неурядицы, рекомендуется применять условные обозначения для таковых случаев.

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

Определение стилей контейнера макетов в CSS

12345<div class=»wrapper mb-5″></div><section>    <div class=»wrapper»></div></section><div class=»wrapper»></div>

CSS

123.mb-5 {    margin-bottom: 3rem !important;}

Таковым образом, CSS-оболочка остается без конфигураций, а интервал добавляется при помощи доп служебного класса CSS. Сейчас вы сможете спросить, для чего мне добавлять несколько контейнеров на страничку, когда я могу добавить один? В приведенном выше HTML-коде есть элемент section меж 2-мя контейнерами.

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

Контейнер снутри полноэкранного раздела

Могут быть случаи, когда у вас есть раздел с фоном, который растягивается на 100% ширины области просмотра, и снутри него есть контейнер. Это похоже на то, что представлено в прошлом примере. Структура HTML странички быть может таковой:

123456<section>    <div class=»wrapper»></div></section><section>    <div class=»wrapper»></div></section>

section имеет ширину 100% окна просмотра. Вы сможете добавить к нему цвет фона либо изображение. Снутри него контейнер не дозволяет содержимому занимать всю ширину области просмотра.

Определение стилей контейнера макетов в CSS

На рисунке выше раздел имеет фоновое изображение и занимает всю ширину области просмотра. Содержимое снутри ограничено шириной контейнера.

Нужен ли контейнер для Hero-раздела?

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

Определение стилей контейнера макетов в CSS

Во 2-м содержимое распространяемое на ширину главный оболочки.

Определение стилей контейнера макетов в CSS

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

Hero-раздела с центрированным содержимым

У вас может появиться соблазн поместить содержимое Hero-раздела, а потом центрировать все, не беря во внимание контейнер.

12345<section class=»hero»>    <h2>How to make bread at home</h2>    <p>….</p>    <p><a href=»/sign-up»>Sign up</a></p></section>

Используя приведенный выше HTML-код, вы сможете центрировать содержимое при помощи text-align:

CSS

1.hero { text-align: center; }

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

Содержимое прилипает к краям

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

Определение стилей контейнера макетов в CSS

Большая длина строчки для огромных экранов

На огромных экранах текст абзаца быть может весьма сложным для чтения, так как длина строчки очень велика. Согласно Элементам типографского стиля, используемым в Вебе, рекомендуемое количество знаков для строчки составляет от 45 до 75. Что-либо намного большее этого сделает труднее чтение.

Определение стилей контейнера макетов в CSS

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

1234567<section class=»hero»>    <div class=»hero__wrapper»>            <h2>How to make bread at home</h2>            <p>…</p>            <p><a href=»/sign-up»>Sign up</a></p>    </div></section>

Я употреблял этот класс hero__wrapper, так как эта оболочка быть может настроена лишь для раздела hero, потому она может иметь определенную ширину, которая меньше, чем у обыденного элемента оболочки.

CSS

1234567.hero__wrapper {    max-width: 720px;    margin-left: auto;    margin-right: auto;    padding-left: 16px;    padding-right: 16px;}

Для центрирования контента можно применять технику по вашему выбору, в зависимости от варианта внедрения. Для этого примера довольно text-align: center.

Должен ли контейнер быть центрирован либо выровнен по левому краю?

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

READ
:focus-visible уже доступно

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

Определение стилей контейнера макетов в CSS

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

Внедрение переменных CSS для вариантов контейнера

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

1<div class=»wrapper»></div>

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

Если вы увидели, у var есть два значения: 1-ое, если переменная —wrapper-width, и 2-ое 1170px. 2-ая переменная является запасной, что значит, что если переменная —wrapper-width не установлена, будет употребляться 2-ая. Что это означает? Это значит, что вы сможете сделать вариант оболочки, переопределив —wrapper-width, как показано ниже:

1<div class=»wrapper» style=»—wrapper-width: 720px»></div>

Таковым образом, я сделал свою оболочку без:

Добавление новейшего класса

Копирования и дублирования стилей

Она наиболее перспективна и быть может просто изменена при помощи инструментов разраба

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

1<div class=»wrapper wrapper—small»></div>

CSS

1234.wrapper—small {    —wrapper-width: 720px;    /* this will override the default wrapper width. */}

Демонстрация

Внедрение CSS Display: Contents

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

12345<header class=»site-header»>    <div class=»wrapper site-header__wrapper»>            <!— Header content —>    </div></header>

CSS

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

Определение стилей контейнера макетов в CSS

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

CSS

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

При всем этом элемент .wrapper будет укрыт. Сейчас при применении к элементу .site-header display: flex дочерние элементы .wrapper будут дочерними элементами .site-header.

Определение стилей контейнера макетов в CSS

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

123<section> <div class=»wrapper»></div></section>

CSS

1234567891011section { 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 работает таковым образом, что вычисляют половину ширины окна просмотра, минус ширина содержимого. То же самое можно создать при помощи отступов.

Определение стилей контейнера макетов в CSS

CSS

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

Мы еще не окончили. Контент будет прикреплен к краям на мобильном экране. Решение для этого будет последующим.

CSS

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

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

CSS

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

Это все. Спасибо за чтение.

Создатель: Ahmad Shadeed

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.