共计 6766 个字符，预计需要花费 17 分钟才能阅读完成。
作者：Ahmad shaded
译者：前端小智
起源：sitepoint
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文
GitHubhttps://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。
在布局中，对于每块性能的 DOM 构造，咱们个别应用一个带有 wrapper 类元素把它包裹起来，让代码或者网页内容更易于浏览。为此，咱们个别应用 wrapper 或者 container。在 CSS 中应用wrapper 可能有多种形式，这些形式中，有些会带来一些问题。
在本文中，将介绍 CSS 中 的 wrapper 布局，它们如何工作，如何应用它们以及何时不应用它们。请留神，在本文中，可能会提到 wrapper 和container 这两个术语，它们的含意雷同。
wrapper 简介
当咱们说到 wrapper 或 container，实际上是指一组元素被 包装 或蕴含 在另一个元素内。咱们能够为 <body> 元素增加一个 wrapper类，这样咱们就不必额定元素，如下所示：
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 有必要的
通过多加一层 wrapper 布局，有很多益处：
- 使内容更具可读性。没有多加一层
wrapper，文本和图像之类的内容就能够拉伸以占据整个屏幕宽度。对于小屏幕，这仿佛能够。然而，对于大屏幕，这是十分烦人的。 - 对设计元素进行分组能够更好地减少间距。
- 在没有
wrapper的状况下，将设计元素划分为列是不容易实现的。
在 CSS 中实现 wrapper
目前咱们曾经理解了 wrapper 基础知识和长处，接下来咱们来具体的看看在 CSS 如何应用它。
设置宽度
实现 wrapper 第一件事就是要确认它的宽度。而宽度如何这取决于 UI 的设计。一般来说，最罕用宽度是 1000px-1300px。例如，风行的框架 Bootstrap 应用1170px 的宽度。
.wrapper {width: 1170px;}然而，不倡议应用 width 属性，因为当屏幕尺寸小于 1170 像素时，会呈现程度滚动。能够max-width 来解决这个问题。
.wrapper {
width: 1170px;
max-width: 100%;
}咱们还能够更简略点，仅应用 max-width。
.wrapper {max-width: 1170px;}当初有了宽度，咱们能够将它居中。
居中 wrapper
为了让 wrapper 居中，应用让左右外边距的值为 auto，如下所示：
.wrapper {
max-width: 1170px;
margin: 0 auto;
}依据 CSS 标准，上面是 margin: 0 auto; 的工作原理
如果 ’margin-left’ 和 ’margin-right’ 均为 ’auto’，则它们的应用值相等。这会让元素绝对于蕴含块的边缘程度居中。
这里我应用 margin:0 auto，这基本上将顶部和底部的margin 重置为零，并使其左侧和右侧为auto。应用此性能会有一些结果，这将在本文前面介绍。目前，倡议应用简化版边距:
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}在左侧和右侧增加 padding
要思考的重要事项是在左侧和右侧增加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 的回答。
我常常能够到间接在 ‘wrapper’ 应用百分比宽度，如 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，而不是依赖于百分比宽度。
Wrapper 的 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 之间增加 margin
下面咱们说到不倡议应用简写版本来居中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;}这样，wrapper 的 CSS 放弃原样，并且应用附加的 CSS 类增加了间距。当初，你可能会问，为什么能够在一个页面上增加多个 wrapper？在下面的 HTML 中，两个wrapper 之间有一个 <section> 元素。
在这里应用 !important 很好，因为实用程序类的要点是 强制属性，通过增加!important，咱们能够确保做到这一点。
全屏中的 Wrapper
在某些状况下，如果某个局部的背景视口宽度为 100%，并且其中蕴含wrapper`，则可能会呈现这种状况。与上一个示例中介绍的相似。
<section>
<div class="wrapper"></div>
</section>
<section>
<div class="wrapper"></div>
</section><section>的宽度是 100%。咱们能够向其增加背景色彩或图像。在其中，wrapper可避免内容占据视口的整个宽度。
主内容须要增加 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，因而内容将粘在边缘上。这对用户是不敌对的，因为使内容浏览变得更加艰难。
大屏幕的行长
在大屏幕上，因为行长太长，段落文本可能很难看清。依据利用于 Web 的版式款式元素，行的倡议字符数为 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局部都不会渲染。然而，继承的属性如色彩 (color) 和字体 (font) 却能照常影响到子元素。
<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 r 元素时，.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);
}
}原文：https://ishaded.com/article/s…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。