CSS三大特性
css层叠性
层叠性是指多种css样式的叠加。
是浏览器冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个会将另一个属性层叠掉
一般情况下，如果出现样式冲突，则会按照css书写顺序，以最后的样式为准
- 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
css继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是:子承父业。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-, font-,，1ine-这些元素开头的都可以继承，以及co1or属性)
css优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况， 具体如下:
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖维承来的样式。
行内样式优先。应用sty1e属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important 都具有最大优先级。
css特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算, 这个就是CSS Specificity,我们称为CSS特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下:
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，-级大于- -级，数位之间没有进制，级别之间不可超越。
| 继承或者*的贡献值 | 0，0，0，0 |
|---|---|
| 每个元素（标签）贡献值为 | 0，0，0，1 |
| 每个类，伪类贡献值为 | 0，0，1，0 |
| 每个ID贡献值为 | 0，1，00 |
| 每个行内样式贡献值 | 1，0，0， |
| 每个!important | ∞无穷大 |
权重是可以叠加的
div ul li ------>0,0,3
.nav ul li ------>0,0,1,2
a: hover ------>0,0,1,1
.nav a ------>0,0,1,1
#nav p ------>0,1,0,1
1.数位之间没有进制比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10而不是0,0, 1, 0,所以不会存在10个div能赶上一个类选择器的情况
2.继承的权重是0
1.使用了!important声明的规则。
2.内嵌在HTML元素的style属性里面的声明。
3.使用了ID选择器的规则。
4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5.使用了元素选择器的规则。
6.只包含-个通用选择器的规则。7.同一类选择器则遵循就近原则。
盒子模型（css重点）
其实，CSS就三个大模块:盒子模型、 浮动、定位， 其余的都是细节。要求这三部分，无论如何也要学的非常精通。.
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子， 也就是一个盛装内容的容器。 每个矩形都由元素的内容、内边距(padding) 、边框(border) 和外边距(margin) 组成。
看透网页布局的本质
看透网页布局的本质: 把网页元索比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
盒子模型（Box Model）
所有的文档元素(标签)都会生成一个矩形框， 我们成为元索框(element box)，它描述了一个文档元索再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
盒子边框（border）
语法：
border : border-width || border-style || border-color
边框属性-设置边框样式（border-style）
边框样式用于定义页面中边框的风格，通用属性值如下：
none:没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线（最为常用）
dashed：边框为虚线
dotted:边框为电线
double：边框为双实线
盒子边框写法总结表
| 设置
内容 |
样式属性 | 常用属性值 |
|---|---|---|
| 上边
框 |
border-top-style：样式；border-top-width:
宽度;border-top-color:颜色;border-top:宽度，样式 颜色； |
|
| 下边框 | border-bottom-style：样式；border-bottom-width:
宽度;border-bottom-color:颜色;border-bottom:宽度，样式 颜色； |
|
| 左边框 | border-left-style：样式；border-left-width:宽度;
border-left-color:颜色;border-left:宽度，样式 颜色； |
|
| 右边框 | border-right-style：样式；border-right-width:
宽度;border-right-color:颜色;border-right:宽度，样式 颜色； |
|
| 样式综
合设置 |
border-style
:上边[右边 下边 左边]; |
none无(默认),
solid单实线,dashed虚线, dotted点线,double双实线 |
| 宽度综
合设置 |
border-width:
上边[右边 下边 左边]; |
像素值 |
| 颜色综
合设置 |
border-color:上边[右边 下边 左边]; | 颜色值，#十六进制，
rgb（r,g,b）, rgb(r%,g%,b%) |
| 边框综
合设置 |
border:四边宽度
四边样式 四边颜色; |
表格的细线边框
table{boder-cellapse:aollapse;}
collapse单词是合并的意思
border-collapse:collapse;
表示边框合并在一起
圆角边框（css3）
语法格式：
border-radius:左上角 右上角 右下角 左下角；
内边距
padding属性用于设置内边距。是指边框与内容之间的距离padding-top：上边距
padding-right：右边距
padding-bottom：下边距
padding-left：左边距
| 值得个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右边距 |
| 2个值 | padding：上下边距，左右边距 |
| 3个值 | padding：上边距，左右边距，下边距 |
| 4个值 | padding：上边距，左边距，右边距，下边距 |
来源：https://blog.csdn.net/sometimesrain/article/details/100920725