CSS的盒子模型

CSS的三大特性：层叠性 继承 优先级
层叠性：是浏览器处理冲突的一个能力，如果同一个属性被两个相同的选择器设置在同一个元素上，，那么前面的属性会被后面的属性层叠掉。
继承性：子标签会继承父标签的某些样式（text-/font-/line-/color这些开头的元素都可以继承）
优先级：!important > 行内样式 > id选择器 > 类选择器（伪类选择器）> 元素标签

CSS的三大模块：盒子模型 浮动 定位，其余的都是细节
盒子模型：把html页面中的元素看做是一个矩形的盒子，也就是装内容的容器，每个矩形都是由元素的内容 内外边距和边框组成
每个盒子除了有自己的大小和位置意外，还影响着其他盒子的大小和位置。

盒子边框：border-style:none(默认值) solid(单实线) dashed(虚线) dotted(虚点线) double(双实线)
表格的细线边框：border-collapse：collapse（表示边框合并在一起）
圆角边框：border-radius：数值或百分比
padding（内边距） margin（外边距）
外边距实现盒子居中： 1.必须是块元素 2.盒子必须指定了宽度

外边距合并
相邻块元素外边距合并：上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直距离
是两者中的较大者，这种现象称之为相邻块元素外边距合并（也称外边距塌陷）
嵌套相邻块元素外边距合并：对于两个嵌套的块元素，如果父元素没有上内边距及边框，则父元素上外边距会于子元素的上外边距合并
合并后的外边距外两者中的较大值，父元素的上边距为0也会发生合并。
解决方案：
1.为父元素定义1px的上边框或上内边距
2.为父元素添加overflow:hidden