Wrapper html что это: html — Для чего теги «оборачивают» Wrapper’ом? – Как правильно верстать wrapper? — Хабр Q&A

Leave a Comment / Html / By /

html — Что такое правильный способ сделать CSS Wrapper?

Лучший способ сделать это зависит от конкретного сценария использования.

Однако, если мы говорим на общих передовую практику для реализации CSS Wrapper, вот мое предложение: ввести дополнительный <div>элемент со следующим классом :

/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 960px; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */
}

… для тех из вас, кто хочет понять , почему , вот 4 большие причины , которые я вижу:

В ответ в настоящее время принято Aron говорит width. Я не согласен , и я предлагаю max-widthвместо этого.

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

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

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Using max-width instead, in this situation,
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */
 
<div>This div element has width: 960px;</div>
<br />

<div>This div element has max-width: 960px;</div>

Так что в плане отзывчивости, это кажется, max-widthэто лучший выбор! —

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

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

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */

   padding-right: 10px;
   padding-left:  10px;

   /** ... omitted for brevity */
}

Таким образом, именно поэтому добавление padding-leftи padding-rightк вашей обертке может быть хорошей идеей, особенно на мобильных устройствах.

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

Можно было бы интересно , если возможно, <section>элемент может соответствовать этой цели. Тем не менее, вот что говорит W3C спецификации:

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

<section>Элемент несет это собственная семантику. Она представляет собой тематическую группировку контента. Тема каждой секции должна быть определена, как правило , путем включения заголовка (h2-h6 элемента) в качестве дочернего элемента раздела.

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

Это может показаться не очень очевидны на первый взгляд, но да! Простой старая <div>лучше подходит для обертки!

Вот связанный с этим вопрос . Да, есть некоторые случаи , когда вы могли бы просто использовать <body>элемент в качестве обертки. Тем не менее, я бы не рекомендовал вам сделать это, просто из — за гибкости и устойчивости к изменениям.

Вот вариант использования , который иллюстрирует возможный вопрос: Представьте себе , если на более позднем этапе проекта необходимо обеспечить соблюдение колонтитул в «прилипать» к концу документа (внизу окна просмотра , когда документ короток). Даже если вы можете использовать самый современный способ сделать это — с Flexbox , я думаю , вам нужна дополнительная Wrapper <div>.

Я хотел бы сделать вывод , что еще лучше практика , чтобы иметь дополнительный <div>для реализации CSS Wrapper. Таким образом , если спецификации изменения требований в дальнейшем вы не должны добавить Wrapper позже и иметь дело с перемещением стилей вокруг много. В конце концов, мы говорим только о 1 дополнительный элемент DOM.

Атрибут wrap | htmlbook.ru


Internet ExplorerChromeOperaSafari FirefoxAndroidiOS
4.0+1.0+6.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле <textarea> и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

<textarea wrap="soft | hard">
</textarea>

Значения

soft
Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы.
hard
Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут cols.
off
Нестандартное значение. Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

Значение по умолчанию

soft

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег textarea, атрибут wrap</title>
 </head>
 <body>
  <form action="handler.php" method="post">
   <p><textarea rows="10" cols="20" wrap="hard"></textarea></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Примечание

Некоторые старые браузеры также поддерживают нестандартные значения virtual вместо soft и physical вместо hard.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Лучший способ реализовать «обёртки» в CSS — CSS-LIVE

Перевод статьи The Best Way to Implement a “Wrapper” in CSS с сайта css-tricks.com для CSS-live.ru, автор — Калоян Косев

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

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

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

Обёртка ассоциируется с <div>, который содержит весь остальной HTML в документе. Уверен, что многие помнят то время, когда мы устанавливали для <div> ширину

960px и центрировали основной контент. Обёртки так же были полезны, чтобы прижать футер.

Контейнер, напротив, обычно предполагает другой вид содержимого. То, которое иногда необходимо для реализации поведения или оформления множественных компонентов. Он служит задаче группировки семантических и визуальных элементов. Например, у бутстрапа есть «классы контейнера», которые содержат их систему сеток или другие различные компоненты.

Термины «Обёртка» и «Контейнер» также могут означать одно и то же в зависимости от разработчика и его целей. Могут быть и другие соглашения, так что лучший совет, как правило — делать так, как вам самим логичнее. Но помните, что наименование — одна из наиглавнейших фундаментальных вещей в практике разработчика. Система наименования делает код читабельнее и предсказуемее. Выбирайте тщательнее!

Вот пример общей обёртки страницы:

/**
 * 1. Центрируем содержимое. Да, это немножко вкусовщина.
 * 2. См. раздел «width против max-width»
 * 3. См. раздел «Дополнительные внутренние отступы»
 */
.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

width против max-width

После установки ширины блочному элементу он больше не сможет растягиваться на всю ширину своего контейнера (полезно для комфортной длины строк). Следовательно, элемент-обёртка займёт указанную ширину. Но если окно браузера Уже указанной ширины обёртки, то появится нежелательный горизонтальный скролл.

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

See the Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper by Максим (@psywalker) on CodePen.

С точки зрения отзывчивости max-width лучший выбор!

Дополнительные внутренние отступы

Я видел, как многие разработчики забывали один граничный случай. Допустим, есть обёртка с max-width: 980px. Этот граничный случай проявляется при экране устройства 980px. Поэтому, её содержимое прилипнет точно к краям экрана, не оставляя «воздуха».

photogallery

Эта проблема нехватки «воздуха»

Обычно нам нужны отступы по краям. Вот почему, когда мне нужна обёртка шириной 980px, я делаю так:

.wrapper {
  max-width: 960px; /* на 20px меньше, чтобы уместить отступы по краям. */

  padding-right: 10px;
  padding-left: 10px;

  /* ...  */
}

Вот почему добавление padding-left и padding-right к обёртке будет хорошей идеей, особенно на мобильных устройствах.

Или подумайте о box-sizing, чтобы отступы вообще не влияли на общую ширину.

Какой HTML-элемент выбрать

У обёртки нет семантики. В ней просто находятся все визуальные элементы и контент на странице. Он всего лишь просто контейнер. С точки зрения семантики, <div> — лучший выбор. У <div> тоже нет семантического значения, это просто контейнер

Невольно возникает вопрос, а может ли для этой цели подойти элемент <section>. Однако, спецификация W3C говорит вот что:

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

Элемент <section> несёт в себе собственную семантику. Он подходит для тематической группировки контента. В каждом разделе должен быть заголовок (элемент h2-h6) в качестве дочернего элемента (прим. перев.: это не строгое правило, но крайне желательно соблюдать его).

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

Сходу это может показаться неочевидным. Но да, старый добрый <div> лучше всего подходит для обёртки!

Тег <body> против дополнительного <div>

Следует отметить, что в качестве обёртки иногда может подойти <body>. Вот такая реализация отлично работает:

body {
  margin-right: auto;
  margin-left:  auto;
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
}

И в результате у вас в разметке будет одним элементом меньше, поскольку удалён ненужный обёрточный <div>.

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

  • Вам нужно «прибить» футер к концу документа (к низу окна, если документ короткий). И если даже воспользоваться flexbox в качестве современного способа, всё равно не обойтись без обёрточного <div> (прим. перев.: на самом деле можно задать display: flex самому body, тем более в примере по ссылке так и сделано).
  • Вам требуется установить background-color целой странице. Поскольку у body есть max-width, то его нельзя использовать. Но тогда можно установить фон тегу <html>. Но тут я сомневаюсь. После прочтения статьи HTML vs Body in CSS это звучит для меня немного необычно. Однако, я не слышал каких-то проблем или трудностей с применением цвета фона для элемента <html>. Но это по-прежнему звучит немного странно, да? (Прим. перев.: проблема с фоновым цветом преувеличена, поскольку по стандарту CSS любой фон, указанный для <body>, и так применяется ко всему <html>, если тому явно не задан собственный фон. Но могут быть другие проблемы, например, со сторонними скриптами, позиционирующими всплывающие окна и т.п. именно относительно <body>)

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

P.S. Это тоже может быть интересно:

Каков правильный способ создания CSS Wrapper?

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

Однако, если мы говорим об общих рекомендациях по внедрению CSS Wrapper, вот мое предложение: введите дополнительный <div>элемент со следующим классом :

/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 960px; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */
}

… для тех из вас, кто хочет понять, почему , вот 4 большие причины, которые я вижу:

В ответе, который в настоящее время принимается, говорит Арон width. Я не согласен и предлагаю max-widthвместо этого.

Установка widthэлемента уровня блока предотвратит его растяжение до краев его контейнера. Поэтому элемент Wrapper займет указанную ширину. Проблема возникает, когда окно браузера меньше ширины элемента. Затем браузер добавляет горизонтальную полосу прокрутки на страницу.

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

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Using max-width instead, in this situation,
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */
<div>This div element has width: 960px;</div>
<br />

<div>This div element has max-width: 960px;</div>

Так что с точки зрения оперативности, кажется, что max-widthэто лучший выбор!

Я видел, что многие разработчики все еще забывают о одном краевом случае. Допустим, у нас есть Wrapper с max-width980px. Случай края появляется, когда ширина экрана устройства пользователя составляет ровно 980 пикселей. Затем содержимое будет точно склеиваться с краями экрана, а не оставлять лишнее пространство для дыхания.

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

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */

   padding-right: 10px;
   padding-left:  10px;

   /** ... omitted for brevity */
}

Поэтому именно поэтому добавление padding-leftи padding-rightваш Wrapper может быть хорошей идеей, особенно на мобильных устройствах.

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

Интересно, может ли <section>элемент соответствовать этой цели. Однако вот что говорит спецификация W3C:

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

<section>Элемент несет это собственная семантику. Он представляет собой тематическую группировку контента. Тема каждого раздела должна быть идентифицирована, как правило, путем включения заголовка (элемент h2-h6) в качестве дочернего элемента элемента секции.

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

На первый взгляд это может показаться не очень очевидным, но да! Простой старый <div>подходит лучше всего для Wrapper!

Вот связанный с этим вопрос . Да, есть несколько случаев, когда вы могли бы просто использовать этот <body>элемент в качестве обертки. Однако я бы не рекомендовал вам это делать, просто из-за гибкости и устойчивости к изменениям.

Вот пример использования, который иллюстрирует возможную проблему. Представьте, что если на более позднем этапе проекта вам нужно обеспечить нижний колонтитул, чтобы «вставить» в конец документа (внизу окна просмотра, когда документ короток). Даже если вы можете использовать самый современный способ сделать это — с помощью Flexbox , я думаю, вам нужен дополнительный Wrapper <div>.

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

Автор: Kaloyan Kosev Размещён: 12.07.2017 08:22

html — обертка — wrapper что это

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

Однако, если мы говорим об общих рекомендациях по внедрению CSS Wrapper, вот мое предложение: добавьте дополнительный элемент <div> со следующим классом :

/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 960px; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */
}

… для тех из вас, кто хочет понять, почему , вот 4 большие причины, которые я вижу:

В ответе, который в настоящее время принят, Арон говорит о width . Я не согласен и предлагаю max-width вместо этого.

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

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

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Using max-width instead, in this situation,
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */
<div>This div element has width: 960px;</div>
<br />

<div>This div element has max-width: 960px;</div>

Так что с точки зрения оперативности, кажется, что max-width — лучший выбор! —

Я видел, что многие разработчики все еще забывают о одном краевом случае. Допустим, у нас есть Wrapper с max-width до 980px. Случай края появляется, когда ширина экрана устройства пользователя составляет ровно 980 пикселей. Затем содержимое будет точно склеиваться с краями экрана, а не оставлять лишнее пространство для дыхания.

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

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */

   padding-right: 10px;
   padding-left:  10px;

   /** ... omitted for brevity */
}

Поэтому, поэтому добавление padding-left и padding-right на ваш Wrapper может быть хорошей идеей, особенно на мобильных устройствах.

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

Интересно, может ли элемент <section> соответствовать этой цели. Однако вот что говорит спецификация W3C:

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

Элемент <section> содержит собственную семантику. Он представляет собой тематическую группировку контента. Тема каждого раздела должна быть идентифицирована, как правило, путем включения заголовка (элемент h2-h6) в качестве дочернего элемента элемента секции.

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

На первый взгляд это может показаться не очень очевидным, но да! Простой старый <div> подходит для Wrapper!

Вот связанный с этим вопрос . Да, есть несколько примеров, ко

html — это — Каков правильный способ создания CSS Wrapper?

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

Однако, если мы говорим об общих рекомендациях по внедрению CSS Wrapper, вот мое предложение: добавьте дополнительный элемент <div> со следующим классом :

/**
 * 1. Center the content. Yes, that's a bit opinionated.
 * 2. Use `max-width` instead `width`
 * 3. Add padding on the sides.
 */
.wrapper {
    margin-right: auto; /* 1 */
    margin-left:  auto; /* 1 */

    max-width: 960px; /* 2 */

    padding-right: 10px; /* 3 */
    padding-left:  10px; /* 3 */
}

… для тех из вас, кто хочет понять, почему , вот 4 большие причины, которые я вижу:

В ответе, который в настоящее время принят, Арон говорит о width . Я не согласен и предлагаю max-width вместо этого.

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

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

/**
 * The problem with this one occurs
 * when the browser window is smaller than 960px.
 * The browser then adds a horizontal scrollbar to the page.
 */
.width {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Using max-width instead, in this situation,
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #73AD21;
}

/**
 * Credits for the tip: W3Schools
 * https://www.w3schools.com/css/css_max-width.asp
 */
<div>This div element has width: 960px;</div>
<br />

<div>This div element has max-width: 960px;</div>

Так что с точки зрения оперативности, кажется, что max-width — лучший выбор! —

Я видел, что многие разработчики все еще забывают о одном краевом случае. Допустим, у нас есть Wrapper с max-width до 980px. Случай края появляется, когда ширина экрана устройства пользователя составляет ровно 980 пикселей. Затем содержимое будет точно склеиваться с краями экрана, а не оставлять лишнее пространство для дыхания.

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

.wrapper {
   max-width: 960px; /** 20px smaller, to fit the paddings on the sides */

   padding-right: 10px;
   padding-left:  10px;

   /** ... omitted for brevity */
}

Поэтому, поэтому добавление padding-left и padding-right на ваш Wrapper может быть хорошей идеей, особенно на мобильных устройствах.

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

Интересно, может ли элемент <section> соответствовать этой цели. Однако вот что говорит спецификация W3C:

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

Элемент <section> содержит собственную семантику. Он представляет собой тематическую группировку контента. Тема каждого раздела должна быть идентифицирована, как правило, путем включения заголовка (элемент h2-h6) в качестве дочернего элемента элемента секции.

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

css — Как правильно написать свойства wrapper-а?

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти Регистрация

  7. текущее сообщество

    • Stack Overflow на русском справка чат

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *