一、盒模型基本概念
1. 认识盒模型
什么是盒模型：
- 所有HTML标签都可以看成矩形盒子，由width、height、 padding、margin、border构成，称为“盒模型”。
2. width和height属性详解
width属性：
- width属性表示盒子
内容的宽度 width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。当块级元素(div、h系列、li等)没有设置width属性时，它 将自动撑满，但这并不意味着width可以继承。
height属性：
- height属性表示盒子
内容的高度 height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。
3. padding属性详解
padding是盒子的内边距，即盒子边距内壁到文字的距离。- 四个方向的padding，可以分别用小属性进行设置
padding的数值写法四数值写法:四个数值以空格隔开进行设置，分别表 示上、右、下、左的padding。
三数值写法:三个数值以空格隔开进行设置，分别表 示上、左右、下的padding。
二数值写法:二个数值以空格隔开进行设置，分别表 示上下、左右的padding。
灵活设置padding
样例一：
样例二：
样例三：
样例四：
用小属性层叠大属性。
4. margin属性详解
- margin是盒子的外边距，即盒子和其他盒子之间的距离
- margin的四个方向
margin的塌陷:
竖直方向的margin有塌陷现象：小的margin会塌陷到大的 margin中，从而margin不叠加，值以大值为准。- 一些元素(比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除。
尽量不要使用通配符，存在性能问题。一般项目中使用第三方写好的reset.css。
盒子的水平居中:
- 将盒子左右两边的margin都设置为auto，盒子将水平居中。css
margin: 0 auto;
5. 盒模型计算
相关高度：
width、height不是盒子总高度。盒子的实际总宽度= width + 左右padding + 左右border盒子的实际总高度= height + 上下padding + 上下border盒子的宽度的空间尺寸= width + 左右padding + 左右border + 左右margin盒子的高度的空间尺寸= height + 上下padding + 上下border + 上下margin
6. box-sizing属性
- 将盒子添加了
box-sizing: border-box;之后，盒子的width 、height数字就表示盒子实际占有的宽高(不含margin) 了，即padding、border变为“内缩”的，不再“外扩”。 box-sizing属性大量应用于移动网页制作中，因为它结合百 分比布局、弹性布局等非常好用，在PC页面开发中使用较少。- box-sizing属性兼容到IE9
二、行内元素和块级元素
1. display属性
- img和表单元素是特殊的
行内块，它们既能够设置宽度高度 ，也能够并排显示
2. 行内元素和块级元素的相互转换
- 使用
display:block;即可将元素转为块级元素。 - 使用
display:inline;即可将元素转为行内元素，将元素转 为行内元素的应用不多见。 - 使用
display:inline-block;即可将元素转为行内块。
3. 元素的隐藏
- 使用
display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。 - 使用
visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置。