Использование этой техники может значительно повысить эффективность внешнего интерфейса.

JavaScript CSS

作者：Ahmad shaded Переводчик: Front-end Xiaozhi 来源：sitepoint

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

В макете для каждой функциональной структуры DOM мы обычно используемwrapperЭлементы класса оборачивают его, чтобы упростить чтение кода или веб-контента. Для этого мы обычно используемwrapperилиcontainer. Использование в CSSwrapperСпособов может быть несколько, некоторые из них могут вызвать некоторые проблемы.

В этой статье мы познакомимся с CSSwrapperмакеты, как они работают, как их использовать и когда их не использовать. Обратите внимание, что в этой статье может быть упомянуто, чтоwrapperа такжеcontainerОба термина имеют одинаковое значение.

Введение в обертку

когда мы говоримwrapperилиcontainer, что на самом деле означает, что набор элементовУпаковкаилиВключатьвнутри другого элемента. мы можем<body>элемент добавляетwrapperclass, чтобы у нас не было лишнего элемента, например:

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

Однако будетwrapperдобавить в<body>элемент непрактичный.wrapperЭлементы мешают детям выходить за свои пределы. Рассмотрим следующую схему:

У нас здесьasideа такжеmainэлементы, они размещаютсяwrapperв элементе. Конечно,.wrapperЭлементы имеют ширину.

<div class="wrapper">
    <aside>...</aside>
    <main>...</main>
</div>

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

Изображение выше показывает, когда не используетсяwrapperКак разворачивается элемент при обёртывании, пользователь не должен сталкиваться с таким поведением. Объясним причину этого.

Зачем нужна обертка на странице?

путем добавления дополнительного слояwrapperмакет, имеет много преимуществ:

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

  2. Группировка элементов дизайна позволяет увеличить расстояние между ними.

  3. В отсутствиеwrapperВ случае , разделить элементы дизайна на столбцы непросто.

Реализовано в CSSwrapper

До сих пор мы узналиwrapperБазовые знания и преимущества, давайте конкретно рассмотрим, как использовать их в CSS.

установить ширину

выполнитьwrapperПервым делом нужно подтвердить его ширину. И то, как ширина зависит от дизайна пользовательского интерфейса. Как правило, наиболее часто используемые значения ширины:1000px-1300px. Например, популярный фреймворк Bootstrap использует1170pxширина.

.wrapper {
    width: 1170px;
}

Однако не рекомендуется использоватьwidthсвойство, потому что, когда размер экрана меньше, чем1170Пиксели, происходит горизонтальная прокрутка. Могуmax-widthДля решения этой проблемы.

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

Мы также можем сделать это проще и просто использоватьmax-width.

.wrapper {
    max-width: 1170px;
}

Теперь, когда у нас есть ширина, мы можем центрировать ее.

центральная обертка

чтобыwrapperЦентрирование, используйте значение левого и правого полейauto,Следующим образом:

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

Согласно спецификации CSS, следующееmargin: 0 auto;как это работает

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

Здесь я используюmargin:0 auto, который в основном преобразует верхнюю и нижнююmarginобнулить и сделать его левую и правую части какauto. Существуют некоторые последствия использования этой функции, которые описаны далее в этой статье. В настоящее время рекомендуются упрощенные поля:

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

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

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

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

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

используя процентwrapper

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

Я часто могу использовать процентную ширину непосредственно в «оболочке», напримерmax-width: 90%. Вместо того, чтобы использоватьpadding-leftа такжеpadding-right.

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

.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свойства объединяются.

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

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

ОберткаdisplayТипы

из-заwrapperда<div>, поэтому по умолчанию это элемент блочного уровня. Проблема в том, когдаwrapperСодержимое внутри помещается вgridсредняя школа, что мне делать? мы напрямуюwrapperдобавитьdisplay: grid?

Я не рекомендую делать это, поскольку это противоречит концепции разделения задач.wrapperИспользуется для обертывания его содержимого, не более того. При необходимости используйтеgridмакет, добавьте еще один слой<div>посвященныйgridМакет станет проще, понятнее и проще в обслуживании.

<div class="wrapper">
    <!-- Content -->
</div>

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

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

Лучшее решение выглядит следующим образом:

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

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

добавить отступ между обертками

Выше мы сказали, что не рекомендуется использовать сокращенную версию для центрированияwrapperэлемент:

.wrapper { 
    margin: 0 auto;
}

Пока это работает, когда на странице несколькоwrapperКогда и нужно добавить интервал между ними, это может сбить с толку. Из-за потребностей макета нам нужноwrapperДобавьте еще один класс, напримерwrapper-variation,ТакmarginОн может работать неправильно.

.wrapper-variation {
    margin-top: 50px;
}

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

.wrapper-variationэлементальmarginнельзя использовать, потому что он былmargin: 0 autoпокрытие.为避免此类混淆，建议在这种情况下使用非简写格式 。

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

<div class="wrapper mb-5"></div>
<section>
    <div class="wrapper"></div>
</section>
<div class="wrapper"></div>

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

так,wrapperCSS оставляем как есть, а интервал добавляется с помощью дополнительных классов CSS. Теперь вы можете спросить, почему вы можете добавить несколько на страницуwrapper? В приведенном выше HTML дваwrapperEсть<section>элемент.

использовать здесь!importantЭто нормально, потому что суть служебного класса强制属性, добавлением!important, мы можем убедиться, что сделать это.

Обертка на весь экран

В некоторых случаях, если раздел имеет ширину фонового окна просмотра 100%，并且其中包含wrapper`, такое может случиться. Подобно тому, что было введено в предыдущем примере.

<section>
    <div class="wrapper"></div>
</section>
<section>
    <div class="wrapper"></div>
</section>

<section>Ширина100%. Мы можем добавить к нему фоновый цвет или изображение. В этом,wrapperНе позволяет содержимому занимать всю ширину области просмотра.

Нужно ли к основному контенту добавлять обертку?

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

Первый центрируется по своему содержимому и ограничивается определенной шириной.

Второй расширен до края содержимого основного содержимого.

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

Содержимое по центру

вы можете использоватьwrapperДержите контент по центру.

<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Содержимое центра

.hero { text-align: center; }

Если вы не измените размер окна браузера, вы можете игнорировать эту проблему.

Содержимое подходит плотно

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

длина строки на большом экране

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

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

<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класс, потому чтоwrapperможет просто игла对heroЧастично настроенный, поэтому он может иметь ширину меньше, чем общийwrapperэлемент.

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

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

правильноwrapperИспользуйте переменные CSS

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

<div class="wrapper"></div>

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

varЕсть два значения, первое значение является переменной--wrapper-width, второе значение1170px, если не установлено--wrapper-widthпеременная, вы будете использовать1170px.

Конечно, мы можем напрямую--wrapper-widthНазначение, чтобы мы могли динамически устанавливать желаемое значение.

<div class="wrapper" style="--wrapper-width: 720px"></div>

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

<div class="wrapper wrapper--small"></div>

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

использоватьdisplay: contents

Во-первых, краткое введение в это свойство. Каждый элемент в CSS представляет собой коробку, содержащуюcontent,padding,marginа такжеborder.display: contentsправила стиля делаютdivЭлемент не создает никакой ограничивающей рамки, поэтому элементmargin,borderа такжеpaddingЧасти не будут отображаться. Однако унаследованные свойства, такие как цвет и шрифт, могут влиять на дочерние элементы, как обычно.

<header class="site-header">
    <div class="wrapper site-header__wrapper">
            <!-- Header content -->
    </div>
</header>

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

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

.site-header__wrapper {
    display: contents;
}

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

так,.wrapperЭлемент будет скрыт (похож). Теперь, когдаdisplay:flexприменительно к.site-headeр элемент,.wrapperПотомки станут为.site-headerребенок .

Плавный фон, фиксированный контент

Lea Verouв ее《CSS Secrets》В книге описан интересный прием, который можно использовать для плавного фона (занимающего всю ширину области просмотра) с внутреннимwrapperчасть. Давайте рассмотрим распространенные практики.

<section>
	<div class="wrapper"></div>
</section>

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Это работает так: вычисляется половина ширины области просмотра за вычетом ширины содержимого. использоватьpaddingтакже можно сделать.

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

С этим еще есть проблема, на мобильных устройствах контент будет прилипать к краю устройства, одно из решений заключается в следующем:

section {
  padding: 1rem;
}

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

оригинал:Я заштриховал.com/article/Загорать…

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

Статья постоянно обновляется каждую неделю, вы можете искать в WeChat **【Moving the World】Сначала прочитай, ответь[Благополучие] **Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.

Категории