盒模型继承层叠边框

所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。
可见的板式模型主要由三个属性控制：
position属性、display属性和float属性。
position属性控制页面上元素间的位置关系。
display属性控制元素是堆叠、并排或者不在页面上显示。
float属性提供控制的方法，以便于把元素组成成多栏布局。
在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。所以我们不能直接的看到页面中的盒子结构。我们要通过设置盒子的边框来显示出我们的盒子。
我们先从盒子的属性开始，这些属性分为3组：
1、边框(border):可以设置边框的宽度、样式、颜色。
2、内边距(padding):可以设置盒子内容区(content)和边框的间距。 3、外边距(margin):可以设置盒子和邻元素的间距。
解释：
内容(content)就是盒子里装的东西。
内边距(padding)怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。
边框(border)就是盒子的本身。外边距(margin)就是两个盒子之间的距离。
一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是：
上(top)右(right)下(bottom)左(left)
border-top,border-right,border-bottom,border-left
padding-top,padding-right,padding-bottom,padding-left
margin-top,margin-right,margin-bottom,margin-left
简写样式：CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。例如：
{margin-top:3px;margin-right:4px;margin-bottom:5px; margin-left:7px;}
简写：{margin:3px 4px 5px 7px;}有时不需要将4个值全部写出，哪一边没写，就用对边的值。{margin:3px 4px 5px;}那么左边的值就和右边的值一样，4px。
继承：我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。例如边框、内外边距。
层叠：层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。
层叠规则：
1.找到应用给每个元素和属性的声明。说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，并标识出所有受到影响的HTML元素。
2.按照顺序和权重排序。按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。权重排序：!important。
3.按特指度排序。计算特指度(ICE 公式) I ：id；C ：class；E：Element。l等于100，c等于10，E等于1。
4.顺序决定权重。
说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，则位置最靠下的胜出。