一、层叠
1. 什么是层叠？
层叠是一种机制，用于解决CSS声明冲突。即**当出现声明冲突时，浏览器自动触发层叠机制**。
层叠的过程（3步走，通过后只剩1条样式）：
①比较优先级：一个声明的优先级，与它的**来源**和**重要性**有关。
按来源分为：作者样式表、浏览器默认样式表、用户样式表。
若属性值后面跟上 !important ，则表示一条重要声明，否则表示普通声明。
例如：color：red; 普通声明
color: red!important; 重要声明
②比较特殊性： 一个声明的特殊性，取决于规则使用范围的大小。规则使用范围越大，特殊性越低，反之特殊性越大。
特殊性（权重）从高到低排序：行内样式表>ID选择器>类选择器>元素选择器>通配符选择器
特殊性比较方法 ：在比较特殊性时，每一个冲突的声明，会生成4个数字（用abcd分别表示），以比较特殊性：
- a：若声明是行内样式，则为1，否则为0；
- b：规则中ID选择器的个数；
- c：规则中类选择器、伪类选择器和属性选择器的个数；
- d：规则中元素选择器、伪类选择器的个数。
注：通配符选择的特殊性为0。当计算选择器分组（并集选择器）的时候，要分开计算。 .
.main>div #nav *.home a:link{color:green;}
其中.main 为类选择器，div为元素选择器，#nav为ID选择器，*为通配符选择器，.home为属性选择器，a为元素选择器，:link为伪类选择器。
则： a b c d
0 1 3 2
③比较源次序： 特殊性相同的情况下，最后出现的声明胜出，其他全部淘汰。
内部和外部样式表在特殊性相同的情况下，位置靠后的胜出。
二、盒子的组成
①margin：
- 外边距，与其他盒子之间的距离。
- 分为上（top）下（bottom）左（left）右（right）
- margin-top：上外边距，不可继承，默认值：0px，其他可取：em，%（其他三个和这个一样）。
- margin里简化取值为顺时针方向：
如：1个值时（margin：10px）：四边都一样 2个值时（margin：10px 20px）：上下都是10px，左右都是20px 3个值时（margin：10px 20px 30px）：上10px，左右20px，下30px 4个值时（margin：10px 20px 30px 40px）：上上10px，左20px，下30px，右40px
②border：
- 分割内部和外部的界限，也分上下左右。
- 边框样式：border-top-style，不可继承，默认值none，其他取值：solid（实线），dashed（虚线），dotted（点线），double（双实线）
- 边框厚度：border-top-width，不可继承，默认值：medium（中等边框，3px），其他取值：px，em
- 边框颜色：border-top-color，不可继承，默认值：currentcolor（目前区域中字体的颜色）。
- 简化书写：border-top：厚度 样式 颜色
③padding：与margin相同用法。
④content：
- 用于存放文本或其他元素的区域。
- 属性：width宽，height高，overflow：hidden（超出部分文本隐藏），min-width（最小宽度），max-width（最大宽度），min-height（最小高度），max-height（最大高度）。
原文地址：https://www.cnblogs.com/zhangzhiyong/p/9502562.html