CSS3 知识量：11 - 43 - 138
box-sizing属性可以定义盒模型的尺寸解析方式，以解决IE传统盒模型下元素尺寸定义问题。其语法为：
box-sizing : content-box | border-box | inherit
参数简要说明如下：
box-sizing：默认值，使元素维持W3C标准盒模型。此时，元素的宽度或高度=元素内容的宽度或高度+border+padding。
border-box：使元素维持IE传统盒模型。此时，元素的宽度或高度=元素内容的宽度或高度。元素内容的宽度或高度包含了元素的border、padding、width（或height）。
inherit：表示元素继承父元素的盒模型模式。
box-sizing属性主要用于控制盒模型的解析模式，且其默认属性值时box-sizing，这样使用兼容box-sizing属性的浏览器会更方便页面布局的设计。
下面使用box-sizing属性来展示一下W3C标准盒模型与IE传统盒模型在页面布局上的区别。
1、W3C标准盒模型的示例：
<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
<meta charset="UTF-8">
<style type="text/css">
/*设置所有元素的内外边距为0，消除浏览器默认定义的影响*/
*{
margin: 0;
padding: 0;
}
.page{
width: 600px;
color: #333;
font-size: 14px;
text-align: center;
background-color: yellow;
}
#header{
height: 60px;
background-color: #F7A35C;
margin-bottom: 10px;
}
#left{
width: 150px;
height: 150px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #90ED7D;
float: left;
}
#main{
width: 310px;
height: 150px;
margin-right: 10px;
background-color: #fcc;
float: left;
}
#right{
width: 120px;
height: 150px;
background-color: #66ffff;
float: left;
}
#footer{
height: 60px;
background-color: #ccc;
clear: both;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
<p>页眉</p>
<p>height: 60px</p>
</div>
<div id="left">
<p>左边栏</p>
<p>width: 150px</p>
<p>height: 150px</p>
<p>margin-right: 10px</p>
</div>
<div id="main">
<p>主内容</p>
<p>width: 310px</p>
<p>height: 150px</p>
<p>margin-right: 10px</p>
</div>
<div id="right">
<p>右边栏</p>
<p>width: 120px</p>
<p>height: 150px</p>
</div>
<div id="footer">
<p>页脚</p>
<p>height: 60px</p>
</div>
</div>
</body>
</html>显示的效果如下：
在W3C标准盒模型下，中间部分（左边栏、主内容、右边栏）的宽度合计是150px+10px+310px+10px+120px=600px，与div.page的宽度一致，因此，正好可以铺满一行。如果中间部分任何一个元素再添加内边距（padding），中间部分的总宽度将超过600px，右边栏将被挤到下一行，页面布局将被破坏。
2、IE传统盒模型的示例：
<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
<meta charset="UTF-8">
<style type="text/css">
/*设置所有元素的内外边距为0，消除浏览器默认定义的影响*/
*{
margin: 0;
padding: 0;
}
.page{
width: 600px;
color: #333;
font-size: 14px;
text-align: center;
background-color: yellow;
}
#header{
height: 60px;
background-color: #F7A35C;
margin-bottom: 10px;
}
#left{
width: 150px;
height: 150px;
padding: 20px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #90ED7D;
float: left;
box-sizing: border-box;
}
#main{
width: 310px;
height: 150px;
padding: 20px;
margin-right: 10px;
background-color: #fcc;
float: left;
box-sizing: border-box;
}
#right{
width: 120px;
height: 150px;
padding: 20px;
background-color: #66ffff;
float: left;
box-sizing: border-box;
}
#footer{
height: 60px;
background-color: #ccc;
clear: both;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
<p>页眉</p>
<p>height: 60px</p>
</div>
<div id="left">
<p>左边栏</p>
<p>width: 151px</p>
<p>height: 150px</p>
<p>padding: 20px</p>
<p>margin-right: 10px</p>
</div>
<div id="main">
<p>主内容</p>
<p>width: 310px</p>
<p>height: 150px</p>
<p>padding: 20px</p>
<p>margin-right: 10px</p>
</div>
<div id="right">
<p>右边栏</p>
<p>width: 120px</p>
<p>height: 150px</p>
<p>padding: 20px</p>
</div>
<div id="footer">
<p>页脚</p>
<p>height: 60px</p>
</div>
</div>
</body>
</html>显示的效果如下：
如以上结果所示，中间部分3个元素都添加了内边距（padding:20px），因为是IE传统盒模型，3个元素的内容宽度定义包含内边距，因此只会向内压缩空间，其元素空间尺寸将保持不变，中间部分宽度合计仍是600px，因此，页面布局没有被破坏。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6