CSS盒模型
一、元素
- 块元素：独占一行，可以设置宽高。常用的块元素有
p,h1-h6,div,ul,ol,tr,li,form
- 内联元素：所有内联元素都在一行显示，放不下会截断，不可以设置宽高。常用的内联元素有
a,span,em,i,strong,u
- 行内块元素：在一行内显示，可以设置宽高。常用的行内块元素有
input img
注意：HTML5中已经抛弃了【内联元素】的概念，所有元素都可以通过CSS变成内联的！
二、盒模型
1. content-box(内容盒)
- width只包含content，不包含padding和border
2. border-box(边框盒)
三、margin外边距合并
1. 外边距合并出现的条件：
- 只有垂直方向的外边距会出现合并，水平方向上不会出现外边距合并；
- 垂直方向上相邻的元素才会有外边距合并的问题
2. 兄弟元素间的外边距合并
- 若两者都是正值，取值为两者间最大值；
- 若两个外边距一正一负，取值为两者之和；
- 若两个外边距都是负值，取值为绝对值较大的外边距
3. 父子元素间的外边距合并
4. 解决办法
- 给原本设置给子元素的margin值，修改为设置父元素的padding，并相应减少父元素的height；
- 给父元素添加边框属性；
- 给父元素或子元素设置浮动属性；
- 给父元素设置overflow：hidden；
- 给父元素或子元素设置display：inline-block
