03-CSS盒模型概念及企业应用规则

border(边框)

border-top(-width/-style/-color)	宽度 种类 颜色
border-right(-width/-style/-color)	宽度 种类 颜色
border-bottom(-width/-style/-color)	宽度 种类 颜色
border-left(-width/-style/-color)	宽度 种类 颜色

padding（边框距离内容区的距离)

实际占据宽度=width+左padding+右padding**+左border+右border**
实际占据高度=height+上padding+下padding**+上border+下border**

怪异盒模型（box-sizing:border-box)

普通盒模型的padding加上之后，实际宽度会撑大，因为他要保证内容区 尺寸不变

怪异盒模型的padding加上之后，实际宽度不变，因为计算机会计算减少内容区来保证整体宽高不变

怪异盒模型的实际宽度 只由 width决定

如何解决外边距合并现象？

1. 设置边框

2. 设置内边距

3. overflow:hidden

4. 给父级或者子集任何一方设置 float

5. 给父级或者子集任何一方设置 定位

6. 给父级或者子集任何一方设置为行内块元素

注：子元素的外边距负数 可以解除其父元素的内边距效果