有时候，我们在新文档中写入的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>元素是 不是一个普通的container元素。当需要元素仅用于样式目的或作为脚本的便利时，鼓励作者改用div元素。一般的规则是，只有当元素的内容在文档的大纲中被明确列出时，section元素才适用。
<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
相关推荐
### CSS 实现垂直居中的五种方法 在前端开发中，如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现...实际应用中，开发者可以根据实际情况灵活选择合适的方法，以实现最佳的布局效果。
- **性能优化**：尽量减少不必要的条件分支，避免在Media Queries中使用过于复杂的CSS选择器，以提高加载速度和渲染效率。 - **测试与调试**：使用工具如Chrome DevTools模拟不同设备环境，进行充分测试，确保样式...
传统的方法是通过`value`属性来实现，但这并不是最佳实践。这种方法的问题在于，提示文字实际成为了输入框的初始值，当用户聚焦输入框后，这些提示文字会被删除，而当用户移开焦点且未输入任何内容时，这些提示文字...
### CSS兼容方案整理 在网页开发过程中，不同的浏览器由于对CSS的支持程度不一，经常会遇到兼容性问题。...在实际项目中，开发者还需要根据具体的浏览器环境和需求，灵活运用这些技巧，以达到最佳的兼容效果。
本文将详细介绍CSS命名及书写方面的一系列最佳实践。 #### CSS书写顺序 在编写CSS时，按照一定的顺序组织属性可以提高代码的整洁度，便于后续的阅读与维护。通常推荐的顺序如下： 1. **位置属性**：包括`position...
由于各浏览器解析CSS样式存在差异，如`ul`在Firefox和IE中的默认样式不同，需要针对性地设置，如`ul{margin:0;padding:0;}`解决火狐中的`padding`问题。 六、CSS命名规则 1. 使用英文小写字母，如`header`、`...
在实现过程中，需要注意的是不同浏览器对CSS属性的支持情况可能有所不同。通过为video、iframe、object以及video容器设置相应的CSS规则，可以确保弹性视频在包括Chrome、Safari、Firefox、Internet Explorer、Opera...
在CSS（层叠样式表）编程中，正确的命名规则和方法对于提高代码可读性、维护性和团队协作至关重要。以下是一些常用的CSS命名规则和命名方法： ### 命名规则 1. **语义化**：命名应具有描述性，反映元素的实际功能...
由于不同的浏览器（如Internet Explorer 6/7、Firefox等）对于CSS的支持程度存在差异，因此开发者必须采取一系列措施来确保网页在各种浏览器中的表现一致。 #### 二、CSS兼容性问题 为了更好地理解和解决这些兼容性...
这样，`#box`元素就可以在`body`和`.wrapper`内实现垂直居中了。这个解决方案适用于大多数现代浏览器，但请注意对于非常老旧的浏览器可能需要额外的兼容性处理。 CSS布局的技巧和方法远不止这些，例如浮动（float）...
这四个部分一起构成了 CSS 中元素的盒模型。 2. 行内元素、块级元素和空元素： 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、...
在网页设计中，`position: fixed` 是一种常用的CSS定位方式，它可以将元素固定在视口的某个位置，即使页面滚动，该元素也会保持在屏幕的特定位置。然而，有些老旧的浏览器或特殊环境下可能不支持 `position: fixed`...
在网页设计中，为了增强视觉吸引力和用户体验，经常会使用各种动态效果。"WEB网页DIV层背景图循环向上滚动效果"是一种...在实践中，可以根据需求调整动画速度、循环次数，以及背景图片的选择，以达到最佳的视觉效果。
它通过使用媒体查询（MediaQuery）、流体布局（Fluid Layout）等技术，确保网页内容能够在不同尺寸的设备上自适应显示，实现“内容所见即所得”，避免因终端升级而导致的页面不可用问题。响应式设计的核心优势在于...
在HTML和CSS面试中，了解并掌握各种布局技术、页面性能优化策略以及SEO最佳实践是非常关键的。以下是一些相关的知识点： 1. **自适应填补方法**： - **Flexbox布局**：在示例中，`.father`元素使用了`display: ...
在FF中，`ul` 标签默认带有 `list-style` 和 `padding`，在设计时应先进行重置，以免出现意料之外的表现。 **6. 高度自适应** 外部包裹的div应避免固定高度，而使用 `overflow: hidden` 以实现自适应。 **7. 手形...
Swiper 是一款强大的移动触摸滑动插件，广泛应用于网页中的轮播图、产品展示等场景。最新的 Swiper 9 版本进一步提升了性能和用户体验，尤其...在实践中，记得根据项目的具体需求调整和优化这些配置，以达到最佳效果。
在本教程中，我们将探讨如何利用Swiper实现一个类似所示的横向循环焦点图片功能。 首先，我们需要在项目中引入Swiper。你可以通过CDN链接或者下载其源码到本地来引用。Swiper通常提供CSS和JS两个文件，确保两者都被...
2. `mvnw`：这是Spring Boot项目中的Maven Wrapper，允许开发者在没有全局安装Maven的情况下，通过这个脚本来运行Maven命令，例如编译、打包和运行应用。 3. `src`目录：这是源代码存放的地方，分为`main`和`test`...
它在HTML、CSS和JavaScript基础上提供了一套强大的API和配置选项，使得开发者可以方便地在网站和移动应用中实现复杂的滑动交互。在"swiperhtml中的使用"这个主题中，我们将深入探讨如何在HTML页面中集成Swiper，以及...