五、盒模型
1、盒模型基本概念
1）认识盒模型
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型“
width属性表示盒子内容的宽度（不包括padding）
height属性表示盒子内容的高度（不包括padding）
border属性表示内容区域之外的一圈边框
padding属性表示边框内层和内容文字之间的空白边距（内边距）
<u>盒子的总宽度 = width + 左右padding + 左右border</u>
<u>盒子总高度 = height + 上下padding + 上下border</u>
2）width和height属性
width属性表示盒子内容宽度，单位通常为px，移动端开发也会涉及百分数、rem等单位
当<u>块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满网页</u>，但并不意味着width可以继承。
height表示盒子内容高度，单位通常为px，移动端开发也会涉及百分数、rem等单位
<u>盒子的height属性如果不设置，它将自动被其内容撑开</u>，如果没有内容，则height默认是0。所以height属性可以省略
3）padding属性
padding是盒子的内边距，即盒子边框内壁到文字的距离
padding属性是四个方向的，可以分别使用小属性进行设置
padding-top 上padding
padding-right 右padding
padding-bottom 下padding
padding-left 左padding
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左（顺时针）的padding，如padding:10px 20px 30px 40px
padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding，如padding:10px 20px 40px
padding属性如果用两个数值以空格隔开进行设置，分别表示上下、左右的padding，如padding:10px 20px
padding属性如果用一个数值以空格隔开进行设置，表示上下左右的padding，如padding:20px
当padding属性中的值为 0 时，单位可省略，但 0 不可省略
4）margin属性
margin属性是盒子的外边距，即盒子和其他盒子之间的距离
margin属性也有四个方向，与padding一致
<u>竖直方向的margin属性有塌陷现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准</u>（左右方向上的margin会叠加！）【浮动元素不会出现塌陷，依然是叠加】
两个Div（A、B）上下之间没有margin值，但是A中有子元素有margin，这时该子元素的margin值会传递到两者间，会使A、B两个元素之间填充上margin，仅限垂直方向
一些元素（如body、ul、p等）都有默认的margin，在开始制作网页的时候要将他们清除
<style>
*{
margin:0;
padding:0;
}
/* * 表示通配符选择器，表示选择所有元素 */
/* 但是通配符有效率问题，所以一般在工作时使用并集选择器 */
body,ul,p{
margin:0;
padding:0;
}
</style>
盒子的水平居中：将盒子左右两边margin都设置为auto，盒子将水平居中（区别于文本居中text-align:center）
.box{
margin:0 auto;
}
/*上下为0，左右自动*/
盒子的垂直居中，则需要使用绝对定位技术实现
5）盒模型计算
6）box-sizing属性
box-sizing属性用于修改盒模型类别，
border-box即为IE盒模型，width和height是盒子的实际宽度和高度，包含padding和border；
content-box即为标准盒模型，width和height是盒子中内容使用的宽度和高度，不包含padding和border属性。
将盒子添加了box-sizing:border-box;之后，盒子的width、height属性就表示盒子实际占有的宽高（不含marign），即padding、border变为内缩，不再外扩
box-sizing:content-box即为默认情况（外扩）
（div、button默认遵守不同的盒模型，前者为content-box，后者为border-box）
box-sizing属性大量应用于移动网页的制作，因为它结合百分比布局、弹性布局非常好用，在PC页面开发中使用较少，其兼容至IE9
2、行内元素和块级元素
1）display属性
| display属性类型 | 是否能并排显示 | 是否能设置宽高 | 不设置width属性时 |
举例 |
|---|---|---|---|---|
| 块级元素 | 否 | 是 |
width自动撑满 |
div、section、header、h系列、li、ul等 |
| 行内元素 | 是 | 否 |
width自动收缩 |
a、span、em、b、u、i等 |
行内块，<u>既能设置宽度高度，也能并排显示</u>，如表单和img标签
2）行内元素和块级元素的互相转换
使用display:block;即可将元素转化为块级元素
使用display:inline;即可将元素转化为行内元素，将元素转为行内元素的应用不多见
使用display:inline-block;即可将元素转化为行内块
3）元素的隐藏
使用display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility:hidden;也可以隐藏元素，但是元素不放弃自己的位置
