深入探讨：CSS3 Box-Sizing

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

不久前，当我们在网页中创建一个框时，假设使用div ，我们将宽度和高度都指定为100px ，然后使用10px的padding和大约10px边框。

div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px solid #eaeaea;
}

浏览器将框的大小扩展到140px，其中总宽度/高度的140px由以下padding和borders ； 100像素[宽度/高度] +（2 x 10像素[填充]）+（2 x 10像素[边框]）。

但是，有时此结果不是我们期望的结果。 有时，无论填充边框或边框如何，我们都需要框始终为100px 。

为了克服创建网页布局时出现的此类反复出现的问题，我们可以使用CSS3 box-sizing属性来控制CSS box模型在浏览器中的工作方式。

使用框大小

box-sizing属性具有两个值选项，第一个是content-box 。 这是默认值，使用此值时，盒模型的行为将如上所述。

第二个是border-box ，其中框的大小将通过减去指定内容的大小并加上填充和边框来计算。

div {
	width: 100px;
	height: 100px;
	padding: 10px;
	border: 10px solid #eaeaea;
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */	
}

例如，当我们有一个如上所述的盒子时（100px的正方形，其中的填充和边框为10像素），内容的大小将减小为60px ，并且盒子的总大小仍为100px ，其中减法可描述如下。 100px [宽度/高度] –（（2 x 10px [padding]）+（2 x 10px [border]））。

• 演示版
• 下载源

浏览器支持

所有浏览器都支持 box-sizing属性； Firefox 3.6 +，Safari 3，Opera 8.5+和Internet Explorer 8及更高版本。

因此，如果您知道大多数访问者都不会使用低于8的Internet Explorer版本，则可以使用此有用的建议（感谢Paul Irish ）。

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box; /*Firefox 1-3*/
	-webkit-box-sizing: border-box; /* Safari */
}

上面的代码片段会将box-sizing属性应用于您网页上的所有元素。

例

在本节中，我们将向您展示一个真实的示例，说明如何利用此box-sizing属性。 我们将基于下面HTML标记创建一个简单的导航，其中包含五个链接菜单。

<ul>
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
	<li><a href="#">Menu 4</a></li>
	<li><a href="#">Menu 5</a></li>
</ul>

然后，我们将添加一些装饰样式； 例如，将导航的固定宽度设置为500px ， 将链接的宽度设置为100px ，然后内联列表项，并为每个链接菜单提供不同的背景，以便您可以看到它们之间的区别。

nav {
	width: 500px;
	margin: 50px auto 0;
	height: 50px;
}
nav ul {
	padding: 0;
	margin: 0;
}
nav li {
	float: left;
}
nav a {
	display: inline-block;
	width: 100px;
	height: 100%;
	background-color: #ccc;
	color: #555;
	text-decoration: none;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	line-height: 300%;
	text-align: center;
}
nav a {
	display: inline-block;
	width: 100px;
	height: 100%;
	color: #555;
	text-decoration: none;
	font-family: Arial, sans-serif;
}
nav li:nth-child(1) a {
	background-color: #E9E9E9;
	border-left: 0;
}
nav li:nth-child(2) a {
	background-color: #E4E4E4;
}
nav li:nth-child(3) a {
	background-color: #DFDFDF;
}
nav li:nth-child(4) a {
	background-color: #D9D9D9;
}
nav li:nth-child(5) a {
	background-color: #D4D4D4;
	border-right: 0;
}

至此，我们的导航看起来很正常。

但是，当我们在链接菜单中添加左右边框时，就会出现问题。

nav a {
	border-left: 1px solid #aaa;
	border-right: 1px solid #f3f3f3;
}

菜单将溢出到底部，因为链接的宽度不再是100px 。 现在为102px ，这导致导航的总宽度比上面指定的宽度（ 500px ）长10px 。

为了克服这个问题，我们需要应用box-sizing属性，如下所示：

nav a {
	border-left: 1px solid #aaa;
	border-right: 1px solid #f3f3f3;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

• 演示版
• 下载源

进一步阅读

最后，如果您是喜欢冒险的人，并且想更深入地研究这个主题，我们为您整理了一些精选参考资料：

• 了解CSS Box模型 –技术共和国
• Firefox中的大小调整错误 – BugZilla
• 箱型FTW – Paul Irish

翻译自: https://www.hongkiat.com/blog/css3-box-sizing/