CSS 揭秘(7)--满幅的背景,定宽的内容

Posted by liveipool on February 9, 2017

满幅的背景,定宽的内容

进几年我们经常可以看到这样类似的页面设计:
39.1.png
这样的页面设计被称为背景宽度满幅,内容宽度固定。

要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满幅的背景,内层用来实现定宽的内容,并通过margin:auto实现水平居中的。

<footer>
	<div class="wrapper">
	  <!-- content -->
	</div>
</footer>

footer {
	background: #333;
}
.wrapper {
	max-width: 900px;
	margin: 1em auto;
}

然而我们来想一想,究竟有没有必要来专门设置一个wrapper这样的div元素?
实际上,margin:auto这条声明所产生的左右外边距都等与视口宽度的一般减去内容宽度的一半,因此可以表示为50% - 450px。
那么我们可以使用clac()来代替margin:auto。并且,因为我们这里写的是450px,那么实际上也就是留出了最多450 × 2 = 900px的空间,max-width也不用写了,因此,代码可以简化为:

<footer>
	<!-- content -->
</footer>

footer {
	padding: 1em;  // 回退机制,以防不支持calc()
	padding: 1em calc(50% - 450px);
	background: #333l
}