今天我们分享关于盒子模型的内容。
在HTML入门知识中，我们学习了一个很重要的理论：块元素和行内元素。现在我们介绍一个极其重要的CSS理论：CSS盒子模型。
在CSS盒子模型理论中，页面中所有元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两个方面来理解：
一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型是由content内容、padding内边距、margin外边距、border边框，这4个属性组成。此外盒子模型还有宽度width和高度height两个属性辅助。
记住，所有元素都可以看成一个盒子！
下图是一个CSS盒子模型的内部结构图。
从上图可以看出每个元素模拟盒子模型时的状态。
| CSS盒子模型的属性 | |
| 属性 | 说明 |
| border | 边框 |
| margin | 外边距，定义页面中元素与元素之间的距离 |
| padding | 内边距，定义内容与边框之间的距离 |
| content | 内容，可以是文字或者图片 |
其中，padding称为内边距，也可以叫做补白。图中的margin-top指的是顶部外边距、margin-right指的是右部外边距，以此类推。
1、内容区content
内容区是CSS盒子模型的中心，它呈现了盒子的主要内容，这些内容可以是文本、图片等多种类型。
内容区是盒子模型必备的组成部分，其他三个属性则是可选的。
内容区自己有三个属性：width宽度，height高度和overflow溢出。使用width和height属性可以指定盒子内容区的宽度和高度。这个宽度和高度只是针对内容区而言，不包括padding部分。
当内容信息太多时，超出了内容区所占的范围，可以使用overflow溢出属性来指定是否换行处理。
2、内边距padding
内边距，是指内容区和边框之间的空间距离，可以看做是内容区的背景区域。
关于内边距属性有5种，分别是padding-top，padding-bottom，padding-left，padding-right和简洁写法的padding。
3、边框border
在CSS盒子模型中，边框和之前我们学习的边框是一样的。
边框属性有，border-width、border-style、border-color和简洁写法的border。
border-width指定边框宽度，border-style指定边框的类型，border-color指定边框的颜色。
4、外边距margin
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不需要紧凑的连接在一起，这是CSS布局的一个重要技巧。
外边距的属性也是5种，margin-top，margin-bottom，margin-left，margin-right和简洁写的的margin。
另外，CSS允许给外边距属性指定负数值，当指定外边距为负值时，整个盒子将向相反方向移动，会产生盒子重叠效果。这个就是“负margin技术”。
内容区、内边距、边框、外边距这些概念比较抽象，对于初学者来说，理解起来是有一定难度的，这个就需要自己多写代码来体会了。
示例代码：
<html><head><title>盒子模型</title><style type="text/css">#main {display: inline-block;border: 1px solid black;}.ye {display: inline-block;padding: 20px;margin:40px;border: 1px solid red;background-color: #fce9b8;}span {border: 1px solid blue;background-color: #c5fcdf;}</style></head><body><div id="main"><div class="ye"><span>虾米大王</span></div></div></body></html>
我们把class为ye的div层看做一个盒子，则span浅蓝色部分代表内容区，浅红色部分表示内边距区，红色边框与黑色边框之间的空白为外边距区，红色的边框为盒子的边框。
宽度width和高度height：
从W3C标准的CSS盒子模型中，元素的宽度width和高度height是针对内容区而言的，这个大家需要非常清楚的记住。很多初学者容易把内边距也认为是内容区的一部分。
语法：
width:像素值；height:像素值；
只有块元素可以设置width和height，行内元素是无法设置width和height。
示例代码：
<html><head><title>设置宽高</title><style type="text/css">#div1 div {width:100px;height:30px;border: 1px solid black;margin-bottom:30px;}#div1 span {width:100px;height:30px;border: 1px solid black;}</style></head><body><div id="div1"><div></div><span><span></div></body></html>
“#div1 div”表示选择器，选中id为div1下的全部div层元素，“#div1 span”也是选择器，选中id为div1下的全部span元素。
div元素是块元素，设置了宽度和高度就有效果，而span是行内元素，即使设置了宽度和高度，也没有效果。
下节我们接着分享关于盒子模型的内容。
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
