这是我参与「第四届青训营 」笔记创作活动的第10天
深入CSS
css能让我们实现一些简单的样式，但是很多东西我们学的好不够深入，它的一些进阶规则我们还是得一一掌握。
css的特异度
当我们使用css来设置样式的时候，可能会存在两个样式的设置包含了同一块区域，这时我们就看css的特异度，特异度高的则优先展示。标签、类（伪类）、id、内联样式分别对应个、十、百、千。
- 举例：如果有一个内联样式，就相当于特异度为1000.如果有一个id，就意味着是100，两个就是200.
很显然，上面的特异度是122，下面的特异度为022，因此上面定义的样式优先展示。
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值。
显示继承
如果一个属性不具备继承性，但你又想让它后代继承的话，可以使用强制继承，但是好像并不推荐。且继承过来的不是设置值，而是计算值。
* {
box-sizing:inherit; //显性继承
}
html{
box-sizing:border-box;
}
. some-widget{
box-sizing:content-box;
}
初始值
-
css中，每一个属性都有一个初始值： background-color的初始值为transparent。 margin-left的初始值为0。
-
可以使用initial关键字显性重置为初始值：background-color：initial
布局（Layout）
- 布局是确定内容的大和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局的相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
width
- 指定content box宽度
- 取值：长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box 宽度
height
语法和width一样：
- 指定content box高度
- 取值：长度、百分数、auto
- auto取值由内容计算得来的
- 百分数相对容器的content box高度
- 容器有指定的高度是，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细、颜色
- 三种属性：border-width、border-style、border-color
- 四个方向：border-top\border-right\border-bottom\border-left
margin
-指定元素四个方向的外边距 -取值可以是百分数、长度、auto -百分数相对于容器宽度
