第四章 样式初始化 元素类型转换 外边距合并

一、样式初始化

清除浏览器默认样式，以避免造成不必要的兼容性问题。

1. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
2. ol,ul{margin:0;padding:0;list-style:none;}
3. a{text-decoration:none;}
4. img{border:none;}
5. *{margin:0;padding:0}

---

二、元素类型

1. 块级元素：单独占据一行，其他元素被迫换行显示。
   自由设置宽高
   margin自由设置
   padding自由设置
2. 行级元素：只占据内容的位置，其他的行级元素在一行显示。
   设置宽高无效，宽高对行级元素没有影响
   margin设置时 上下无效 左右有效
   padding样式有效 padding-left；padding-right有效果；padding-top；padding-bottom不影响它的高度 但是会影响它的背景高度。
   总结：行级元素的padding、margin、border等不起作用的原因：没有影响到元素的line-height属性
3. 行内块级元素：综合了块级元素和行级元素的特征。
   在一行显示
   可以自由设置宽高
   可以自由设置margin和padding属性

元素的相互转换：display
值：
1. block 块级元素
2. inline 行级元素
3. inline-block 行内块级元素

元素的显示和隐藏：display
值
1. none 隐藏
2. block 显示

---

三、外边距合并【待验证】

1. 同级元素之间的上下外边距相遇 取两者较大者
2. 父子关系的元素之间的外边距相遇 取较大者；如果父级没有外边距 那么就取子级
3. 空元素之间的外边距也会进行合并 取较大者