三、盒子模型
这一部分我们介绍盒子模型，我们每一个标签（元素）都可以在浏览器的检查功能中（快捷键F12）显现为一个盒子，可以帮助我们更好的理解外边距，边框，内边距，内容区之间所占空间的关系。
一般形式都是如这个状态的，整个盒子模型分为四个大块：
1.内容区：放置文本或其他内容 （content）
2.内边距：内容区到边框的距离 （padding）
3.边框：围绕在内边距外的边框，可以自行设计样式 （border）
4.外边距：边框以外的区域 （margin）
3.1 content
对于内容区，相对简单，只需要在body中设值内容区相应的文本内容即可，样式属性有比较常用的width height，back-ground等，还可以在内容区设置后面的border
3.2 padding
内边距定义了边框到内容区的距离，这块区域是没有颜色的，但是在计算分辨率时需要加上，它有四个属性，分别是上，右，下，左，（top,right,botton,left）,在具体定义时，可以选择四种不同的定义方法，形如：
padding:上 右 左 下 padding:上 左右 下 padding：上下 左右 padding：上下左右
3.3 border
边框指的是内容区和内边距撑起来的区域，用border圈出，通常会设计三种 属性：
-
边框宽度：border-width
-
边框颜色：border-color
-
边框样式：border-style
宽度的单位是像素，边框的颜色可以直接输入英文字母，边框的样式可以选择实线 solid
点虚线dotted dashed代表虚线 默认值 none 可以实现。
我们所能在网页中见到的元素，就是由边框+内边距+内容区所决定的。
3.4 margin
外边距指的是分布在元素周围的空间，我们可以通过设置外边距来决定元素所处在网页中的位置，分成上，右，左，下，这个与内边距是相像的，我们既可以分别设置四个属性，也可以用一个属性margin来设置所有的外边距属性，这与内边距的操作方法相同，在这里就不过多赘述，形如：
margin: 上 右 下 左
margin: 上 左右 下
margin: 上下 左右
margin: 上右下左
需要注意的是，定义时的顺序是逆时针定义，不要想当然利用上下左右直接去定义，这是不合理的
margin也可以给定负值，这样的话元素之间就会有重叠的效果
3.6盒子的水平布局
所有元素在盒子中水平方向上的位置由以下几个元素共同决定：
左右外边距（margin）
左右边框 （border）
左右内边距（padding ）
内容区的宽度 （width）
他们七个属性的和，必须等于其父元素区的宽度，如果不满足，其中个某一个属性会自动填充，然后使等式满足
①七个值中没有auto，浏览器会自动调整右外边距的值来满足等式，形如：
0+0+0+200+0+0+0=800
200+0+100+100+0+0+200=800
浏览器会自动填充：
0+0+0+200+0+0+600=800
200+0+100+100+0+0+400=800
②由auto自动值的情况，内容区，左右外边距可以设置为auto，形如：
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 width的值为auto 则设置为 800
如果有多个auto，则平均分配应该补齐的值
我们经常使用水平布局来让一个元素在其父元素中居中：
选择器{
width：1000px；
margin：0 auto；
}
3.7盒子的垂直布局
垂直距离相对简单，没有水平距离复杂，只需要修改上下的外边距即可，需要注意的是：
元素的整体垂直大小，由上下外边距，边框的宽度，上下内边距，内容区的高度规定，如果屏幕由于垂直宽度导致发生了溢出，也可以在其父元素中设置overflow属性：
可选值： visible 默认值，表示可以看见
hidden 将溢出的部分裁剪下去
scroll 添加上下和左右的滚动条
auto 自动添加滚动条
3.8 外边距的折叠
对于块元素来讲，每个都是独占一行，因此只会出现垂直方向上的外边距的重叠，即两个元素的相邻外边距可能发生重叠。
兄弟元素
兄弟元素间相邻的垂直外边距会取两个之间的最大值（全正），取两个的和（一正一负）
区绝对值较大的（全为负），兄弟元素之间的外边距重叠，对开发网页来讲并不是坏事，所以并不需要处理
父子元素
父子元素间相邻的外边距，子元素会传递给父元素（上外边距）
父子间的外边距折叠会影响到页面的布局，必须要进行处理（只需要为父元素添加border属性）
3.9行内元素的盒模型
对于行内元素来说，他们是不支持设置垂直方向上的内边距，边框，外边距的，因为他们是被用内容数据撑起来的，但是如果想让这些垂直方向上的样式生效，可以使用display属性将行内元素转换为块元素来设置
display属性的可选值：
none 隐藏，表示不再占用原有的空间
block 变成块元素的样式来显示，注意：并不是直接变成了块元素
inline 变为了行内元素的样式显示，并不是直接变为了行内元素
inline-block 同时具有块元素和行内元素的样式：
<style>
#s1{
width: 300px;
height: 200px;
border: 5px solid red;
padding: 20px;
margin: 40px;
/* 设置display的值为block，那么该行内元素的上下外边距，边框，内边距都生效
宽与高也生效，而且还具有独占一行的特点。
*/
display: block;
}
div div{
width: 200px;
height: 100px;
/* 将display的值设置为inline，那么块元素就具有了行内元素的样式特点：
宽，高，上下边框，上下内边距失效。并且不再独占一行 */
/* display: inline; */
/* 将将display的值设置为inline-block，那么该元素既有块元素也有行内元素样式特点：
宽，高，上下边框，上下内边距都生效。并且还在一行上 */
display: inline-block;
}
#d1{
background-color: aqua;
}
#d2{
background-color: pink;
}
</style>
</head>
<body>
<div>
<span id="s1">我是一只鹅</span>
<span id="s2">你也是一只鹅</span>
<div id="d1">1</div>
<div id="d2">2</div>
</div>
</body>
可以看出span元素虽然是块元素，但是也具有了行内元素的样式特征。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
