这是我参与「第五届青训营 」伴学笔记创作活动的第2天，活动详情查看：📚 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营 - 掘金 (juejin.cn)
1. 了解CSS
1.1 CSS是什么？
Cascading Style Sheets-用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
一个基础的CSS代码的示例
h1 {
color: white;
font-size: 14px;
}
h1选择器selector，选中页面中的元素，给这些元素定义样式color选择器property，定义元素样式的相关属性white属性值valuefont-size: 14px声明declaration，多条声明用分号隔开
1.2 在页面中使用CSS
- 外链
<link rel="stylesheet" href= " /assets/style.css">
- 嵌入
<style>
li { margin: 0; list-sty1e: none;}
p { margin: 1em 0; }
- 内联
<p style="margin:1em O">Example Content</p>
1.3 CSS的工作模式
1.4 选择器Selector
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
如：通配选择器，标签选择器，id选择器，类选择器，属性选择器
1.5 伪类(pseudo-classes)
- 不基于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
1.6 组合(Combinators)
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section> p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2~ p |
| 相邻选择器 | A + B | 选中B;如果它紧跟在A后面 | h2 + p |
1.7 属性
- 颜色
- RGB
- HSL:色相，饱和度，亮度
- alpha:透明度
- 字体 font-family
- 通用字体族
1.8 调试CSS
- 右键点击页面， 选择「检查」
- 使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mас)
2. 深入CSS
2.1 CSS求值过程
2.2 布局
2.3 行级 块级
| Block Level Box | Inline Level Box |
|---|---|
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子 ；内容分散在多个行盒(line box)中 |
| body、article、 div、 main、 section、h1-6、 p、ul、li等 | span、em、strong、 cite、 code等 |
| display: block | display: inline |
2.4 display属性
2.5 常规流normal flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内(in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
-
行级排版上下文
-
块级排版上下文
-
Table排版上下文
-
Flex排版上下文
-
Grid排版.上下文
-
