这是我参与「第四届青训营 」笔记创作活动的的第3天
特异度与优先级
当两个以及两个以上的以上的选择器操作同一个元素时，它的最终元素会是什么呢？这就有了特异度和优先级的概念。
- 不同选择器的特异度如下：
特异度越高优先级则越高，优先级高的选择器最终生效。
- CSS中存在以下优先级： 继承<通配符<标签<类<id<行内样式<!important
注意：!important优先级最高，一般不会轻易使用
- CSS的层叠性：当选择器优先级相同时，最后一个选择器操作的样式生效。
继承
某些属性会自动继承父元素的计算值，除非显式指定一个值。但并不是所有属性都可以被继承。
- 比如大部分盒子模型属性，如
width和height是不可被继承的。 - 大多数文本元素属性，如
text-indent是可以被继承的。
如果想要设置默认不可被继承的属性可以被继承，则需要设置inherit属性值。
* {
box-sizing : inherit;
}
初始值
- 每个CSS属性都有默认的初始值。
如：background-color的初始值为transparent，是透明的意思。
- 当想要舍弃部分CSS样式时，有一种快捷的方式，就是可以使用initial关键字重置为初始值。
div {
background-color: initial;
}
CSS求值过程
简单来说就是：
声明值->层叠值->指定值->计算值->使用值->实际值
那么中间经历了什么呢？
CSS布局（Layout）
布局是什么？
与布局相关：
- 常规流
- 行级元素
- 块级元素
- 表格布局
- Flex Box布局
- Grid 布局
- 浮动（overflow）
- 绝对定位
页面布局的构成
width的介绍
height的介绍
padding
- 指定元素四个方向的内边距。
- 属性值为百分数时是相对于容器宽度而言。
padding有三种写法
padding: 10px,表示上下左右的内边距都为10px。如图：
padding: 10px 20px，表示上下为10px，左右为20px。如图：
padding: 10px 20px 10px 20px，表示上下为10px，左右为20px。如图：
padding小总结
细心的同学可能已经发现： 当填四个值时，padding: 上 左 下 右 。填两个值时，padding: 上下 左右。一个值时，padding: 上下左右。也可直接用padding-left属性来表示左内边距，其它同理。
border
指定容器边框的样式、粗细和颜色。
-
简介写法：
border: 2px dotted red，也可像拆分三种属性border-width、border-style、border-color来表示。 -
border也分上下左右，如border-left，表示只有左边框。当只有border时，默认使用到上下左右。
记忆方法： 三种属性、四个方向
border补充
当边框四个方向颜色不同时，如图：
margin（外边距）
- 与
padding的取值方式一样： - 当
margin: auto时，元素会水平居中。 margin不可被继承。- 在水平方向上两个元素的外边距永远不会重合，在垂直方向上外边距会合并成较大外边距的值。
border-sizing: box-sizing
包含border和padding，即不再像上面 页面布局的构成 说的那样，定义width时，满足盒子宽度就等于外边距、内边距、边框以及内容的和。大多数都是使用下面这种：
小结
介绍了CSS的特异度与优先级、继承的一些特性、求值过程以及布局的部分常用属性。
尾声
以上包含了部分个人观点，如有错误，敬请提出。
