这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天✌
课堂笔记
本堂课重点内容：
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
详细知识点介绍
1.选择器特异度（Speeificity）
-
CSS的“层叠”效果： 如果应用了权重均匀的样式，后定义的样式将会覆盖之前定义的样式。
可以用这一特性进行属性覆盖从而实现代码的重复使用。
-
权重计算： 将两个具有相同权重的选择器应用于一个元素时，它将算作权重的2倍。 因此，例如，选择了两个类的元素将比CSS中的一个元素具有更高的权重。
举例：
| 选择器 | #id | .（class类） | type（标签） |
|---|---|---|---|
| #nav .list li a:link | 1 | 2 | 2 |
| .hd ul .links a | 0 | 2 | 2 |
因为，在 1 中的特异度为 122 大于 在 2 中的特异度为 22 。
所以，在 2 中的选择器的优先级更高。
- CSS优先级规则 ：!important > 内联样式 > ID 选择器（#id{}） > 类选择器（.class{}） = 属性选择器（a[href="segmentfault.com"]{}） = 伪类选择器（ :hover{}） > 标签选择器（span{}） = 伪元素选择器（ ::before{}）= 后代选择器（.father .child{}）> 子选择器（.father > .child{}） = 相邻选择器（ .bro1 + .bro2{}） > 通配符选择器（*{}）
2. CSS 继承
-
某些属性会⾃动继承其⽗元素的计算值，除⾮显式指定⼀个值。
-
一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距等都不可以继承。
- 显式继承
如果一个属性不可继承，可以使用关键字 inherit 让子元素能从父级继承该属性。
举例：
/* box-sizing 这个属性是不可以继承的。这样设置之后，这个属性就要从父级开始读取。 */
* {
box-sizing: inherit;
}
/* 如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。 */
html {
box-sizing: border-box;
}
3. 初始值
在 CSS 中，每一个属性都有一个初始值。
// background-color 的初始值为 transparent
background-color: transparent;
// margin-left 的初始值为 0
margin-left: 0;
可使用关键字 initial 将属性显式重置为初始值。
background-color: initial;
//此时的 background-color 为 transparent;
4. CSS 求值过程
5. CSS 布局与常规
1.相关技术：
1. 常规流：
行级、块级、表格布局、FlexBox、Gird布局
2. 浮动
3. 绝对定位
2.盒模型：
-
width：content box宽度
height：content box高度
取值均为：
-
长度
-
百分数（相对容器content box的长度，容器有指定高度时百分数才凑效）
-
auto（width由浏览器根据其他属性确定，height由内容计算得来）
-
padding：内边距
- 百分数相对于容器的宽度
- 四个方向：padding-left、padding-right、padding-bottom、padding-top
-
border：边框
- 三种属性：border-width、border-style、border-color
- 四个方向：border-left、border-right、border-bottom、border-top
- 圆角边框（border-radius）
- 4个： 左上 右上 右下 左下 （顺时针）
- 3个： 左上 右上和左下 右下
- 2个： 左上和右下 右上和左下
- 1个： 适用于所有四个角
-
margin：外边距
- 百分数相对于容器的宽度
- 四个方向：margin-left、margin-right、margin-bottom、margin-top
- 取值为：长度、百分数、auto
-
CSS盒模型大小计算
-
W3C标准盒模型
标准盒模型的width/height不包含padding和border，因此总宽高需要额外加上padding、border和margin的值。
-
IE怪异盒模型
怪异盒模型width/height中包含padding和border，因此总宽高只用额外加上margin值即可。
默认使用标准盒模型，也可以通过控制box-sizing属性决定盒模型：border-box代表怪异盒模型、content-box代表标准盒模型。
-
应用实例
使用margin:auto属性，实现水平居中
- overflow
- 对溢出内容的处理
- visible为overflow 的默认值，为超出显示
- hidden为超出隐藏
- auto为自动，即超出会出现滚动条， 不超出就没有滚动条
- scroll为内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
课后个人总结
- 不容易掌握的知识点
- padding、border、margin的熟练运用
- 容易混淆的知识点
- 标准盒和怪异盒大小计算
