От создателя: контент-ориентированный сайта обязан иметь ограничивающую оболочку либо ширину, облегчающую чтение. Чтоб достигнуть этого, мы можем применять то, что именуется контейнером. Применять контейнер в CSS может быть разными методами, что может привести к появлению неких заморочек.
В данной нам статье я расскажу о контейнерах макетов в CSS, как они работают, как их применять и когда их не применять. Направьте внимание, что в данной нам статье я использую определения оболочка и контейнер, и оба они означают одно и то же.
Короткое описание контейнеров
Когда вы слышите слово оболочка либо контейнер, это практически значит, что группа частей обернута либо содержится снутри другого элемента. Без использования доп частей мы можем добавить оболочку к элементу body, как показано ниже:
CSS body { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 1234567 | body { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;} |
Но добавление оболочки к элементу body может оказаться непрактичным для нашей нынешней задачки. Элемент-оболочка может препятствовать выходу дочерних частей за его границы. Разглядим последующий набросок:
У нас есть элементы aside и main, и они размещены снутри другого элемента, который их оборачивает. Элемент .wrapper имеет, естественно, ширину.
… …
| 1234 | … … |
Без оболочки дочерние элементы будут примыкать к краям экрана. Это быть может весьма раздражающим для юзера, в особенности на большенном экране.
На рисунке выше показано, как элементы будут растягиваться, когда нет частей, обертывающих их. Это не то поведение, с которым должен встречаться юзер. Разрешите мне разъяснить причину этого.
Для чего необходимы контейнеры
Внедрение контейнера странички может иметь много преимуществ, о которых вы должны знать как дизайнер либо разраб. Вот некие из их:
Создать контент наиболее читабельным. Без контейнера таковой контент, как текст и изображения, может растягиваться на всю ширину экрана. Для малеханьких экранов это может показаться обычным. Но для огромного экрана это очень раздражает.
Группировка частей дизайна улучшает прибавления интервалов.
Поделить элементы дизайна на столбцы без оболочки достаточно трудно.
Реализация оболочки в CSS
Сейчас, когда вы осознаете базы и достоинства оболочки, давайте разглядим, как ее сделать в CSS.
Добавление ширины
1-ое, что необходимо решить при реализации контейнера, это его ширина. Какая для вас нужна ширина контейнера? Это зависит от дизайна. Совершенно говоря, ширина контейнера, которая колеблется меж 1000px — 1300px, является более нередко применяемой. Пользующийся популярностью фреймворк Bootstrap, к примеру, употребляет ширину 1170px.
CSS .wrapper { width: 1170px;
}
| 123 | .wrapper { width: 1170px;} |
Но не рекомендуется применять свойство width, потому что оно приведет к горизонтальной прокрутке, если размер экрана меньше, чем 1170px. Вы сможете решить это, добавив max-width.
CSS .wrapper { width: 1170px; max-width: 100%;
}
| 1234 | .wrapper { width: 1170px; max-width: 100%;} |
Пока это работает, вы сможете избавиться от width и применять лишь max-width.
CSS .wrapper { max-width: 1170px;
}
| 123 | .wrapper { max-width: 1170px;} |
Сейчас, когда мы указали ширину контейнера. Давайте перейдем к центрированию.
Центрирование контейнера
Чтоб центрировать контейнер, для вас необходимо добавить слева и справа auto-поля:
CSS .wrapper { max-width: 1170px; margin: 0 auto;
}
| 1234 | .wrapper { max-width: 1170px; margin: 0 auto;} |
Согласно спецификации CSS, ах так работают auto-поля:
Если ‘margin-left’ и ‘margin-right’ имеют значение ‘auto’, их применяемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.
Я употреблял margin: 0 auto, это в сбрасывает верхнее и нижнее поля на ноль и задает auto для левого и правого поля. Есть некие последствия использования этого, но я вернусь к ним позднее. На данный момент я рекомендую применять расширенную версию полей.
CSS .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto;
}
| 12345 | .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto;} |
Добавление отступов слева и справа
Принципиальной вещью, которую следует учесть, является добавление отступов для левой и правой сторон. Когда размер области просмотра меньше наибольшей ширины оболочки, это приведет к тому, что края оболочки будут прилипать к краям области просмотра.
CSS .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 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.
Хотя это работает, ширина области просмотра 90% будет очень большенный на огромных экранах, вы сможете переопределить ее при помощи медиа-запроса.
CSS .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; }
}
| 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 .wrapper { width: 90%; max-width: 1170px; margin-left: auto; margin-right: auto;
}
| 123456 | .wrapper { width: 90%; max-width: 1170px; margin-left: auto; margin-right: auto;} |
Это увлекательный подход, но я бы предпочел добавлять отступ по собственному усмотрению, а не в зависимости от ширины в процентах.
Тип display для контейнера
Так как контейнер является по дефлоту элементом div, это элемент уровня блока. Вопросец в том, что нам созодать, если мы желаем поменять тип отображения на grid, если содержимое снутри контейнера обязано быть расположено в сетке?
Ну, я не рекомендую созодать это, так как это противоречит концепции разделения задач. Контейнер предназначен для упаковки другого содержимого, вот и все. Если для вас нужна оболочка-сетка, то добавление в контейнер еще 1-го div с display: grid будет проще, понятнее и удобнее.
| 123 |
Это не рекомендуется, элемент оболочки можно применять на иной страничке, и это может привести к ненамеренному нарушению макета.
CSS .wrapper { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;
}
| 12345 | .wrapper { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;} |
Наилучшее решение было бы последующим:
| 12345 |
CSS .featured-news { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;
}
| 12345 | .featured-news { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;} |
Направьте внимание, что я добавил отдельный элемент div для обертывания содержимого. Пожалуйста, не обращайте внимания на классы и соглашения о именах для этого примера. Мы можем предложить еще наилучшее решение, используя именование классов, которое можно повторно применять на различных страничках сайта. Но соглашения о именах CSS выходят за рамки данной нам статьи.
Добавление поля меж контейнерами
Помните, когда я не рекомендовал применять сокращенную версию для центрирования элемента контейнера? Я имею в виду это:
CSS .wrapper { margin: 0 auto;
}
| 123 | .wrapper { margin: 0 auto;} |
Хотя это работает, это может сбить с толку, когда у вас на страничке есть несколько контейнеров, и для вас необходимо добавить интервал меж ними. Если по какой-нибудь причине вы добавили для .wrapper иной вариант класса, добавление поля может не сработать по причинам специфики.
CSS .wrapper-variation { margin-top: 50px;
}
.wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 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. Сокращенное свойство имеет ценность над полным. Чтоб избежать таковой неурядицы, рекомендуется применять условные обозначения для таковых случаев.
Сейчас давайте перейдем к добавлению поля. В любом проекте я готовлю набор служебных классов для полей и отступов и использую их при необходимости. Разглядим последующий набросок.
| 12345 |
CSS .mb-5 { margin-bottom: 3rem !important;
}
| 123 | .mb-5 { margin-bottom: 3rem !important;} |
Таковым образом, CSS-оболочка остается без конфигураций, а интервал добавляется при помощи доп служебного класса CSS. Сейчас вы сможете спросить, для чего мне добавлять несколько контейнеров на страничку, когда я могу добавить один? В приведенном выше HTML-коде есть элемент section меж 2-мя контейнерами.
Тут полезно применять !important, потому что смысл служебных классов состоит в том, чтоб закрепить свойство, и, добавляя !important, мы можем гарантировать это.
Контейнер снутри полноэкранного раздела
Могут быть случаи, когда у вас есть раздел с фоном, который растягивается на 100% ширины области просмотра, и снутри него есть контейнер. Это похоже на то, что представлено в прошлом примере. Структура HTML странички быть может таковой:
| 123456 |
section имеет ширину 100% окна просмотра. Вы сможете добавить к нему цвет фона либо изображение. Снутри него контейнер не дозволяет содержимому занимать всю ширину области просмотра.
На рисунке выше раздел имеет фоновое изображение и занимает всю ширину области просмотра. Содержимое снутри ограничено шириной контейнера.
Нужен ли контейнер для Hero-раздела?
Это зависит от. Давайте разглядим два более нередко применяемых дизайна Hero-раздела. В первом контент размещен по центру и ограничен определенной шириной.
Во 2-м содержимое распространяемое на ширину главный оболочки.
Чтоб лучше осознать эти два шаблона, давайте разглядим, как сделать любой из их.
Hero-раздела с центрированным содержимым
У вас может появиться соблазн поместить содержимое Hero-раздела, а потом центрировать все, не беря во внимание контейнер.
How to make bread at home
….
Sign up
| 12345 |
How to make bread at home
….
Sign up |
Используя приведенный выше HTML-код, вы сможете центрировать содержимое при помощи text-align:
CSS .hero { text-align: center; }
| 1 | .hero { text-align: center; } |
Это будет смотреться отлично, пока вы не измените размер окна браузера. Вот трудности, с которыми вы сможете столкнуться.
Содержимое прилипает к краям
Так как на левой и правой сторонах нет отступов, содержимое будет прилипать к краям без соответствующего интервала. Это плохо для юзера, потому что это усложнит чтение контента.
Большая длина строчки для огромных экранов
На огромных экранах текст абзаца быть может весьма сложным для чтения, так как длина строчки очень велика. Согласно Элементам типографского стиля, используемым в Вебе, рекомендуемое количество знаков для строчки составляет от 45 до 75. Что-либо намного большее этого сделает труднее чтение.
Чтоб избежать появления вышеуказанных заморочек, можно применять оболочку, чтоб предупредить очень огромную длину текста и добавить интервал на мобильном экране.
How to make bread at home
…
Sign up
| 1234567 |
How to make bread at home
…
Sign up
|
Я употреблял этот класс hero__wrapper, так как эта оболочка быть может настроена лишь для раздела hero, потому она может иметь определенную ширину, которая меньше, чем у обыденного элемента оболочки.
CSS .hero__wrapper { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 1234567 | .hero__wrapper { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;} |
Для центрирования контента можно применять технику по вашему выбору, в зависимости от варианта внедрения. Для этого примера довольно text-align: center.
Должен ли контейнер быть центрирован либо выровнен по левому краю?
Я не понимаю, есть ли четкий ответ на этот вопросец, но я лицезрел веб-сайты, которые центрируют оболочку на экранах ноутбуков, и она выровнена по левому краю на настольных компах.
:focus-visible уже доступно
веб-сайт Techcrunch является примером этого. Направьте внимание, как содержимое выравнивается по левому краю на огромных экранах.
Лично мне нравится читать сайт, который имеет центрированный контент и симметричный интервал слева и справа. Но это быть может предпосылкой того, что я не понимаю не плохих пример обратного.
Внедрение переменных CSS для вариантов контейнера
Изредка, когда для вас нужен контейнер лишь 1-го размера. Ширина контейнера быть может малеханькой либо большенный, в зависимости от содержимого и варианта использования. Используя CSS-переменные, мы можем сделать современную оболочку, и вы получите огромную упругость. Разглядим пример ниже:
| 1 |
.wrapper { max-width: var(—wrapper-width, 1170px); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 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 |
Таковым образом, я сделал свою оболочку без:
Добавление новейшего класса
Копирования и дублирования стилей
Она наиболее перспективна и быть может просто изменена при помощи инструментов разраба
Если для вас не нравится решение прибавления встроенного стиля для переопределения переменной CSS, вы сможете заместо этого добавить новейший класс:
| 1 |
CSS .wrapper—small { —wrapper-width: 720px; /* this will override the default wrapper width. */
}
| 1234 | .wrapper—small { —wrapper-width: 720px; /* this will override the default wrapper width. */} |
Демонстрация
Внедрение CSS Display: Contents
Во-1-х, разрешите мне проинформировать вас о существовании этого характеристики. Любой элемент в CSS является блоком, и этот блок содержит контент, отступы, поля и границы. Используя display: contents это поле будет удалено из потока. Я могу представить это как удаление окружающих открывающих и закрывающих тегов.
| 12345 |
CSS .site-header__wrapper { display: flex; flex-wrap: wrap; justify-content: space-between;
}
| 12345 | .site-header__wrapper { display: flex; flex-wrap: wrap; justify-content: space-between;} |
В приведенном выше примере для вас может потребоваться расширить заголовок до полной ширины странички, а не ограничиваться шириной оболочки.
CSS .site-header__wrapper { display: contents;
}
.site-header { display: flex; flex-wrap: wrap; justify-content: space-between;
}
| 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» Лиа Веру представила увлекательную технику, которую можно применять для разделов, которые имеют гибкий фон (с полной шириной области просмотра) с оболочкой снутри. Давайте разглядим общий метод создать это.
| 123 |
CSS section { background-color: #ccc;
}
.wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}
| 1234567891011 | 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 работает таковым образом, что вычисляют половину ширины окна просмотра, минус ширина содержимого. То же самое можно создать при помощи отступов.
CSS section { padding: 1rem calc(50% — 585px);
}
| 123 | section { padding: 1rem calc(50% — 585px);} |
Мы еще не окончили. Контент будет прикреплен к краям на мобильном экране. Решение для этого будет последующим.
CSS section { padding: 1rem;
}
@media (min-width: 1170px) { section { padding: 1rem calc(50% — 585px); }
}
| 123456789 | section { padding: 1rem;} @media (min-width: 1170px) { section { padding: 1rem calc(50% — 585px); }} |
Другим решением было бы применять новейшую функцию CSS max(). Просто мы устанавливаем малый отступ 1rem, и вычисление 50% — 585px может употребляться как другое значение.
CSS section { padding: 1rem max(1rem, (50% — 585px));
}
| 123 | section { padding: 1rem max(1rem, (50% — 585px));} |
Это все. Спасибо за чтение.
Создатель: Ahmad Shadeed
Редакция: Команда webformyself.
Источник
Вам также может понравиться