盒模型
CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域
网页中的大部分对象，实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的。
盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。
包含：margin border padding content(内容)
padding(内边距)
设定页面中一个元素内容到元素边缘（边框）之间的距离
规定了内容到达元素边缘的位置关系
规定了子元素与父元素的位置关系
注* Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值
border(边框属性)
语法：border:边框宽度 边框风格 边框颜色
border-style:设定边框风格 border-style:none(无)/solid(实现)/dotted(点划线)/dashed(虚线)/double(双线)
border-width:设定边框宽度 border-width:数值 单位px
border-color:设定边框颜色 border-color:颜色
边框类型：（不常用属性值）groove定义3D凹槽边框 ridge定义3D垄状边框 inset outset定义3D边框（都取决于边框颜色）
margin(外边距，外补丁)
设定一个元素所占空间的边缘（边框）到相邻元素边框的距离
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：四个方向
margin-top解决办法（三种）
给父元素添加overflow:hidden;
给父元素添加盒模型相关属性（border）
给其中一个元素添加浮动
补充说明
margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图。
margin可以定义负值，但border和padding不支持负值。
如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式。
每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。
浏览器窗口是所有元素的根元素，也就是说html是最大的盒子，也有浏览器把body看作是最大的盒子。
盒模型尺寸
盒子的实际大小（公式）
宽：左右margin+左右border+左右padding+width
高：上下margin+上下border+上下padding+height
CSS权重
类型选择符的权重为：0001
类(CLASS)选择符的权重为：0010
ID选择符的权重为：0100
子选择符（E>F）的权重为：0000
属性选择符的权重为：0010
伪类选择符的权重为：0010
伪元素选择符的权重为：0001
包含选择符的权重为：包含的选择符权重值之和
内联样式的权重为：1000
继承的样式的权重为：0000
CSS层叠
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性!important作用是提高指定CSS样式规则的应用优先权
层叠与权重的关系：
层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠。
如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器