这是我参与[第五届青训营]伴学笔记创作活动的第6天，继续和大家分享自己学习《理解CSS》章节课程的收获。

一、本堂课重点内容

• CSS选择器的特异性
• CSS继承
• CSS求值过程解析
• CSS布局方式以及相关技术

二、详细知识点介绍

1.选择器的特异度

特异度：特殊的程度，特异度越高，优先级越高。

2.继承

定义：某些属性会自动继承其父元素的计算值，除非显式指定一个值。

3.初始值

• 在CSS中，每个属性都有一个初始值
• • background-color的初始值为transparent
• • margin-left的初始值为0
• 可以使用initial关键字显式重置为初始值
• • background-color: initial

4.布局（Layout）

（1）定义

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

（2）相关技术

• 常规流（行级、块级、表格布局、FlexBox、Grid布局）
• 浮动
• 绝对定位

（3）盒模型（CSS基础）

• width

• • 指定content box宽度
• • 取值为长度、百分数、auto
• • auto由浏览器根据其它属性确定
• • 百分数相对于容器的content box宽度

• height

• • 指定content box高度
• • 取值为长度、百分数、auto
• • auto取值由内容计算得来
• • 百分数相对于容器的content box高度
• • 容器有指定的高度时，百分数才生效

• padding

• • 指定元素四个方向的内边距
• • 百分数相对于容器宽度

• border

• • 指定容器边框样式、粗细和颜色
• • 三种属性：border-width,border-style,border-color
• • 四个方向：border-top,border-right,border-bottom,border-left

-margin

• • 指定元素四个方向的外边距
• • 取值可以是长度、百分数、auto
• • 百分数相对于容器宽度
• • 使用margin:auto水平居中

三、课后个人总结

重温了CSS选择器的特异性、CSS继承、CSS求值过程解析、CSS布局方式以及相关技术等知识，其中对于选择器的特异性的熟练度还有待提升。