这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
本堂课主要讲解的重点内容
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- CSS 的调试
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
- CSS 盒模型 - 行级 + 块级
对讲解的部分知识点进行介绍
特异度
即选择器的优先级，可以根据下图的特异度进行判断
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
<p>This is a <em>test</em>
of <strong>inherit</strong>
</p>
<style>
body {
font-size: 20px;
}
p {
color: blue;
}
em {
color: red;
}
</style>
求值过程解析
CSS部分布局方式以及相关技术
1、height属性
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
2、padding
3、border
4、margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
CSS盒模型
| 块级 | 行级 |
|---|---|
| Block Level Box | Inline Level Box |
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
个人总结
总结下来仍然是老师视频里头所说的👇：
- 充分利用MDN和W3CCSS规范
- 保持好奇心，善用览器的开发者工具
- 持续学习，CSS新特性还在不断出现
以上都应该是每一个前端人需要用心去学习的！今天这堂课帮助我回忆了不少不常用或是并不明白原理的知识点，感觉收获良多！
