我听过很多朋友谈论在CSS中使用包装器来集中网站的“主要”部分。
这是实现这一目标的最佳方法吗?什么是最佳做法?还有其他方法吗?
答案 0 :(得分:33)
最基本的例子(live example here):
<强> 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;
为其应用自动水平边距。自动边距确保您的元素居中。
答案 1 :(得分: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
在answer currently accepted 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的包装器。当用户的设备屏幕宽度恰好为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 */
}
因此,这就是为您的Wrapper添加padding-left
和padding-right
可能是一个好主意,尤其是在移动设备上。
<div>
而不是<section>
根据定义,Wrapper没有语义含义。它只包含页面上的所有可视元素和内容。它只是一个通用的容器。因此,就语义而言,<div>
是最佳选择。
有人可能想知道<section>
元素是否符合此目的。但是,这是W3C规范所说的:
元素不是通用容器元素。当一个元素仅用于样式目的或作为脚本编写的便利时,鼓励作者使用div元素。一般规则是,只有元素的内容在文档大纲中明确列出时,section元素才适用。
<section>
元素带有它自己的语义。它代表了内容的主题分组。应通过将标题(h1-h6元素)作为section元素的子元素来识别每个部分的主题。
部分的示例可以是章节,选项卡式对话框中的各种选项卡式页面,或论文的编号部分。网站的主页可以分为几个部分,用于介绍,新闻和联系信息。
乍一看似乎不太明显,但是是的!简单的旧<div>
最适合包装!
<body>
代码与使用其他<div>
Here's a related question。是的,在某些情况下,您可以简单地使用<body>
元素作为包装器。但是,我不建议您这样做,只是因为灵活性和对变化的适应能力。
这是一个用例,说明了一个可能的问题:想象一下,如果在项目的后期阶段,您需要强制执行页脚以“粘贴”到文档的末尾(当文档很短时,视口的底部) 。即使您可以使用最现代的方式进行操作 - with Flexbox,我猜您还需要一个额外的包装器<div>
。
我认为最好还是有一个额外的<div>
来实现CSS Wrapper。这样,如果规范要求稍后改变,您不必在以后添加Wrapper并处理大量移动样式。毕竟,我们只讨论了一个额外的DOM元素。
答案 2 :(得分:7)
您不需要包装器,只需将主体用作包装器。
CSS:
body {
margin:0 auto;
width:200px;
}
HTML:
<body>
<p>some content</p>
<body>
答案 3 :(得分:3)
<div class="wrapper">test test test</div>
.wrapper{
width:100px;
height:100px;
margin:0 auto;
}
答案 4 :(得分:1)
最简单的方法是设置一个“包装”div
元素,其中width
设置为auto
,左右边距为<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
body { margin: 0; padding: 0 }
</style>
</head>
<body>
<div class="wrapper">
your content...
</div>
</body>
</html>
。
示例标记:
{{1}}
答案 5 :(得分:0)
还有其他方法吗?
负边距也用于水平(和垂直!)居中,但是当你调整窗口浏览器的大小时有很多缺点:没有窗口滑块;如果窗口浏览器的尺寸太小,则无法再看到内容 毫不奇怪,它使用绝对定位,一个野兽从未被完全驯服过!
示例:http://bluerobot.com/web/css/center2.html
所以那只是你所要求的FYI,margin: 0 auto;
是一个更好的解决方案。
答案 6 :(得分:0)
“包装器”只是某个元素的术语,它封装了页面上的所有其他可视元素。 body
标记似乎符合要求,但如果您调整max-width
,您将受浏览器的支配以确定显示在其下方的内容。
相反,我们使用div
,因为它充当一个不会破坏的简单容器。 HTML5中的main
,header
,footer
和section
标记只是恰当命名的div
个元素。由于这种趋势,似乎可能(或应该)是wrapper
标签,但您可以使用最适合您情况的任何包装方法。通过类,ID和CSS,您可以以非常类似的方式使用span
标记。
我们经常使用或甚至不知道有很多HTML元素标签。做一些研究会告诉你用纯HTML做什么。
答案 7 :(得分:0)
居中的内容有很多途径,因此无法真正通过单个答案进行探讨。如果您想探索它们,CSS Zen Garden is an enjoyable-if-old resource探索了许多甚至旧浏览器都可以忍受的布局内容的方法。
如果您没有缓解要求,那么正确的方法是将margin: auto
应用于侧面,再加上width
。如果您的页面没有内容需要超出这些限制,则将其应用于正文:
body {
padding: 0;
margin: 15px auto;
width: 500px;
}
https://jsfiddle.net/b9chris/62wgq8nk/
因此,在这里,我们获得了以所有*尺寸为中心的500px宽的内容集。 padding 0是用来处理一些浏览器的,这些浏览器喜欢应用一些默认的padding并将我们甩开一些。在示例中,我确实将内容包装在article
标签中,以使其适合屏幕阅读器,Pocket等,例如,盲人可以跳过您可能拥有的导航(应该在nav
中)并直接转到内容。
我全部说*,因为低于500像素会搞乱-我们的反应不灵敏。要获得响应能力,您可以只使用Bootstrap等,但是您可以使用Media Query自己构建它,例如:
body {
padding: 0;
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
请注意,这是SCSS / SASS语法-如果您使用的是纯CSS,则会被颠倒:
body {
padding: 0;
margin: 15px;
}
@media (min-width: 500px) {
body {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/6/
但是,通常只将页面的一小部分居中,因此在最后一个示例中,仅将其应用于article标签。
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
article {
margin: 15px;
@media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/17/
请注意,此最后一个示例还在导航中使用了CSS Flexbox,这也是使事物居中的新方法之一。所以,这很有趣。
但是,在特殊情况下,您需要使用其他方法来使内容居中,并且每种方法可能都值得提出自己的问题(其中许多已经在此站点上得到了解答)。
答案 8 :(得分:-2)
/******************
Fit the body to the edges of the screen
******************/
body {
margin:0;
padding:0;
}
header {
background:black;
width:100%;
}
.header {
height:200px;
}
nav {
width:100%;
background:lightseagreen;
}
.nav {
padding:0;
margin:0;
}
.nav a {
padding:10px;
font-family:tahoma;
font-size:12pt;
color:white;
}
/******************
Centered wrapper, all other content divs will go inside this and will never exceed the width of 960px.
******************/
.wrapper {
width:960px;
max-width:100%;
margin:0 auto;
}
<!-------- Start HTML ---------->
<body>
<header>
<div id="header" class="wrapper">
</div>
</header>
<nav>
<div id="nav" class="wrapper">
</div>
</nav>
</body>