Aro*_*eel 34
最基本的例子(这里的实例):
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 500px width div centered on the page
</div>
</body>
原理如何运作:
创建您的包装并为其指定一定的宽度.然后使用margin: 0 auto;或为其应用自动水平边距margin-left: auto; margin-right: auto;.自动边距确保您的元素居中.
Kal*_*sev 13
最好的方法取决于您的具体用例.
但是,如果我们代表实现CSS Wrapper 的一般最佳实践,那么这是我的建议:引入一个<div>带有以下类的附加元素:
/**
* 1. Center the content. Yes, that's a bit opinionated.
* 2. Use `max-width` instead `width`
* 3. Add padding on the sides.
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}
...对于那些想了解原因的人,我认为这有四个重要原因:
max-width改用width在目前接受的答案中, Aron说width.我不同意,而是提议max-width.
设置width块级元素将阻止它伸展到其容器的边缘.因此,Wrapper元素将占用指定的宽度.当浏览器窗口小于元素的宽度时,会发生此问题.然后浏览器向页面添加水平滚动条.
在这种情况下,使用max-width将改进浏览器对小窗口的处理.在使网站在小型设备上可用时,这一点很重要.这是一个展示问题的好例子:
/**
* 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
*/<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>所以在响应方面,似乎max-width是更好的选择! -
我见过很多开发人员仍然忘记了一个边缘案例.假设我们有一个max-width设置为980px 的Wrapper .当用户的设备屏幕宽度恰好为980px时,会出现边缘情况.然后内容将完全粘贴到屏幕的边缘,而不留下任何呼吸空间.
一般来说,我们希望在侧面有一些填充.这就是为什么如果我需要实现总宽度为980px的Wrapper,我会这样做:
.wrapper {
max-width: 960px; /** 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/** ... omitted for brevity */
}
因此,这就是为什么添加padding-left和padding-right你的Wrapper可能是一个好主意,特别是在移动设备上.
<div>而不是a<section>根据定义,Wrapper没有语义含义.它只包含页面上的所有可视元素和内容.它只是一个通用的容器.因此,在语义方面, <div>是最好的选择.
人们可能想知道一个<section>元素是否适合这个目的.但是,这是W3C规范所说的:
该元素不是通用容器元素.当一个元素仅用于样式目的或作为脚本编写的便利时,鼓励作者使用div元素.一般规则是,只有元素的内容在文档的大纲中明确列出时,section元素才是合适的.
该<section>元素带有它自己的语义.它代表了内容的主题分组.应该识别每个部分的主题,通常通过将标题(h1-h6元素)包括为section元素的子元素.
部分的示例可以是章节,选项卡式对话框中的各种选项卡式页面,或论文的编号部分.网站的主页可以分为几个部分,用于介绍,新闻和联系信息.
乍一看似乎不太明显,但是是的!普通的旧<div>适合包装!
<body>标记与使用附加<div>这是一个相关的问题.是的,在某些情况下,您可以简单地将<body>元素用作包装器.但是,我不建议您这样做,只是因为灵活性和适应性的变化.
这是一个用例,说明了一个可能的问题:想象一下,如果在项目的后期阶段,您需要强制页脚"粘贴"到文档的末尾(当文档很短时,视口的底部).即使您可以使用最现代的方式 - 使用Flexbox,我想您需要一个额外的包装器<div>.
我会得出结论,最好还是有一个<div>实现CSS Wrapper 的附加功能.这样,如果规范要求稍后改变,您不必在以后添加Wrapper并处理大量移动样式.毕竟,我们只谈论一个额外的DOM元素.
你不需要一个包装器,只需使用body作为包装器.
CSS:
body {
margin:0 auto;
width:200px;
}
HTML:
<body>
<p>some content</p>
<body>