这是我参与第四届青训营笔记创作活动的第1天。
PPT：
【HTML】slides.com/fe-fairy/fe…
HTML部分
HTML是什么？
HyperText Markup Language
HTML 语法
-
标签和属性不区分大小写，推荐小写
-
空标签可以不闭合，比如 input、meta
-
属性值推荐用双引号包裹
-
某些属性值可以省略，比如 required、readonly
ol标签是有序列表，ul标签是无序列表，dl 标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
CSS部分
CSS是什么？
Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS是如何工作的？
选择器Selector
- 通配选择器 * { }
- 标签选择器
- id选择器
- 类选择器
- 属性选择器
- 伪类 (pseudo-classes)：不基于标签和属性定位元素（状态伪类，结构性伪类）
组合 (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 |
-
CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
-
可以使用 initial 关键字显式重置为初始值
- background-color: initial
CSS的求值过程
布局（Layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
块级 vs. 行级
| 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 |
display 属性
| block | 块级盒子 |
|---|---|
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
行级排版上下文
-
Inline Formatting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
块级排版上下文
-
Block Formatting Context (BFC)
-
某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是 visible 的块盒
- display: flow-root;
BFC 内的排版规则
- 盒子从上到下摆放
- 垂直 margin 合并
- BFC 内盒子的 margin 不会与外面的合并
- BFC 不会和浮动元素重叠
