在CSS中实现“Wrapper”的最佳方式
有时候，我们在新文档中写入的HTML的第一个比特是包裹页面上其他所有内容的元素。wrapper在html中是一个常见的术语。我们给它一个类，该类负责将所有可见元素封装在页面上。
我一直在努力寻找使用它的最佳方式。我在StackOverflow上发现了一个有超过25万个浏览量的 相关线程，显然我不是唯一想知道这件事的人！我将在本文中总结我最新的想法。
在我们深入研究之前，我们先来看看“wrapper”和“container”之间的区别。
“Wrapper” vs “Container”
我相信 wrapper和 container元素之间有区别。
在编程语言中，container通常用于可以包含多个元素的结构。另一方面，wrapper是围绕单个对象包装的，以提供更多的功能和接口。
所以，在我看来，有两个不同的名字是有意义的，因为它们有不同的功能。
说到wrapper，通常会想到用一个<div> 包含文档的HTML的其余部分。我相信我们中的许多人都经历过一段时间，我们把它设置为960像素的宽度，然后居中对齐。
Container，而另一方面，通常用于另一种控制。有时需要实现多个组件的行为或样式。它用于在语义和视觉上分组元素的目的。作为一个例子，Bootstrap有一个 “ container classes ”来容纳它们的网格系统或者包含各种其他组件。
Wrapper和container也可以代表着相同的东西，这取决于开发人员的想法。也可能有其他约定，所以最好的建议通常是实现对你最有意义的任何事情。但请记住，命名是开发者活动中最重要的部分之一。命名约定使我们的代码更加可读和可预测。谨慎选择！
以下是一般页面包装器的示例：
/**
* 1. Centers the content. Yes, it's a bit opinionated.
* 2. See the "width vs max-width" section
* 3. See the "Additional Padding" section
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}宽度VS最大宽度
为块级元素设置width将阻止它扩展到其容器的边缘（对于像可读行长度是很友好的）。因此，包装器元素将占用指定的宽度。当浏览器窗口比wraper的特定宽度窄时，就会出现此问题。这将触发一个水平滚动条，这几乎总是不合需要的。
使用max-width替代，在这种情况下，是更窄的浏览器窗口更好。当在小型设备上使用网站时，这很重要。这里有一个很好的例子来展示这个问题。
HTML：
<div class="width">This div element has width: 960px;</div> <br /> <div class="max-width">This div element has max-width: 960px;</div> <br /> <strong>Note:</strong> Drag the browser window to smaller than 960px wide, to see the difference between the two divs!
CSS：
/**
* 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
*/
戳我查看效果
在响应方面，max-width是更好的选择！
附加Padding
我看到很多开发人员忘记了一个特殊的边缘案例。假设我们有一个max-width设置为980px 的包装器。当用户的设备屏幕宽度正好为980px时，就会出现边缘情况。内容将完全粘合到屏幕的边缘，没有留下空余的空间。
我们通常希望在边缘上有一点填充。这就是为什么如果我需要实现一个总宽度为980px的wrapper，我会这样做：
.wrapper {
max-width: 960px; /* 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/* ... */
}因此，这就是为什么添加padding-left和padding-right到wrapper可能是个好主意，尤其是在移动设备上。
或者，考虑使用框大小，以使填充不会改变整体宽度。
要选择哪个HTML元素
包装没有语义。它只是在页面上保存所有的可见元素和内容。它只是一个通用的container。在语义方面， <div>是最好的选择。它<div>也没有语义，它只是一个通用的container。
人们可能会想知道是否有<section>可能符合这个目的的元素。但是，W3C规范说明了如下：
<section>元素带有自己的语义。它代表一个专题的内容分组。应该识别每个部分的主题，通常通过将标题（h1-h6元素）作为部分元素的子代。
这可能看起来不是很明显，但是是的！普通的ol' <div>最适合用wrapper！
使用<body>标签与使用额外的<div>
值得一提的是，有一些可以使用<body> 元素作为wrapper的实例。以下实现将完美正常工作：
body {
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}这样你就会少一个标记元素。
但是，由于灵活性和弹性，我不建议这样做。想象一下，如果在项目的后期阶段，这些情况可能会发生：
你需要将一个footer来固定在文档的末尾（当文档较短时，视口底部）。即使你可以使用最现代的方法来实现 - 使用flexbox，你也需要一个额外的包装<div>。
你需要设置整个页面的背景颜色。由于body标签有一个max-width，所以不可能使用它。但是，你可以使用<html>标记而不是标记来设置背景颜色<body>。但是我需要承认一点，我对这块不太清楚。我看了 HTML vs Body in CSS，对我来说这个有点不太寻常。但是，对<html>元素应用背景颜色，听起来有点奇怪，不是吗？
我得出的结论是，添加一个<div>实现CSS wrapper是最好的做法。这样，如果spec要求在以后更改，你不必再添加wrapper，并处理移动样式。毕竟，我们只谈到一个额外的DOM元素。
http://igeekbar.com/igeekbar/post/322.htm
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18