最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
通过添加padding，我们可以确保从左右两边得到一个16px的偏移量，即使视口的大小小于最大宽度。padding作为一种保护策略，避免在宽度不足时让 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 是<div>，因此默认情况下它是块级元素。 问题是，当要将wrapper内的内容放置在grid中时，该怎么办？ 我们直接在 wrapper 上添加 display: grid ？
我不建议您这样做，因为这与关注点分离的概念背道而驰。 wrapper用于包裹其内容，仅此而已。 如果需要使用grid布局，则在多添加一层 <div>专门用来 grid 布局会更容易也更清晰还容易维护。
不建议这样做，因为wrapper元素可以在另一页上使用，这可能会无意间破坏布局。
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 16px;
}
更好的解决方案如下：
.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的实用工具类，在必要时使用它们，考虑下图。
.mb-5 {
margin-bottom: 3rem !important;
}
这样，wrapper 的 CSS保持原样，并且使用附加的 CSS 类添加了间距。 现在，你可能会问，为什么可以在一个页面上添加多个wrapper？ 在上面的HTML中，两个wrapper之间有一个<section>元素。
在这里使用!important很好，因为实用程序类的要点是强制属性，通过添加!important，我们可以确保做到这一点。
在某些情况下，如果某个部分的背景视口宽度为100%，并且其中包含wrapper`，则可能会出现这种情况。 与上一个示例中介绍的类似。
<section>的宽度是 100%。 我们可以向其添加背景颜色或图像。 在其中，wrapper可防止内容占据视口的整个宽度。
这要看情况。 让我们探讨两种最常用内容区间的设计。
第一个以其内容为中心，并受特定宽度限制。
第二个将其内容扩展到主内容的边缘。
为了更好地理解这两种模式，我们来一起探讨如何构建其中的每种模式。
内容居中
你可能想在不使用 wrapper前提下让内容居中。
How to make bread at home
....
在上面的 HTML 中，可以使用text-align将内容居中
.hero { text-align: center; }
除非你调整浏览器窗口的大小，不然你可能会忽略掉这个问题。
内容紧贴边缘
由于左侧和右侧没有padding，因此内容将粘在边缘上。 这对用户是不友好的，因为使内容浏览变得更加困难。
大屏幕的行长
在大屏幕上，由于行长太长，段落文本可能很难看清。 根据应用于 Web 的版式样式元素，行的建议字符数为45到75。超出该范围的任何字符都会使阅读更加困难。
为避免上述问题，可以使用wrapper来防止文本长度变得过长并在移动设备中增加间距。
How to make bread at home
...
这里使用了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很少。 wrapper的宽度可以小也可以大，具体取决于内容。 通过利用 CSS 变量，我们可以创建一个更现代的wrapper，它拥有极大的灵活性。 考虑以下内容：
.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 进行赋值，这样就能动态设置我们想要的值。
如果你不使用 CSS 变量的方式，也可以通过多加一个类来解决：
.wrapper–small {
–wrapper-width: 720px;
/* this will override the default wrapper width. */
}
首先，简要介绍一下这个属性。CSS中的每个元素都是一个盒子，该盒子包含content、padding、margin和border。display: contents样式规则使div元素不产生任何边界框，因此元素的margin、border和padding部分都不会渲染。然而，继承的属性如颜色(color)和字体(font)却能照常影响到子元素。
.site-header__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ader class=“site-header”>
.site-header__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-9mKcPOA3-1715671896044)]
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
