第1章 概述

1.1 CSS世界的“世界观”

以完整的体系来学习 CSS 要比单纯关注属性值理解得更加深刻，可以培养从宏观层面认识与理解 CSS 的习惯

1.2 世界都是创造出来的

CSS 世界的诞生就是为图文信息展示服务的

1.3 CSS完胜SVG的武器 —— （文档）流

流式布局，利用元素流特性实现的各类布局效果，往往具有适应性。 但流失布局不等于自适应布局，自适应是对 凡是具有自适应特性的一类布局的统称，流式则狭窄得多。

第2章 需提前了解的术语和概念

• 属性
• 值 与数字挂钩
• 关键字 transparent inherit等
• 变量 currentColor
• 长度单位 相对长度单位 em 绝对长度单位 px
• 功能符 calc url rgba
• 属性值 冒号后面的所有内容统一成为属性值
• 声明 属性名加上属性值就是声明
• 声明块 是花括号{}包裹的一系列声明
• 规则或规则集 出现选择器且跟声明块
• 选择器 用来瞄准目标元素的东西 .class #id tag
• 关系选择器 > ~ + 等

了解未定义行为 引起的样式 行为不一致

第3章 流、元素与基本尺寸

块级元素

块级元素和display为block的元素 不是一个概念

块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示

正是由于“块级元素”具有换行特性，理论上它都可以配合clear属性来清除浮动带来的影响

.clear:after {
  content: '';
  display: table; /* 也可以是 block , list-item 等 */
  clear: both;
}

为什么list-item元素会出现项目符号 因为生成了一个附加盒子——标记盒子（marker box），专门用来放圆点、数字这些项目符号。

延伸，每个元素都有两个盒子，外在盒子和内在盒子，外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。

width / height 作用在哪个盒子上 答曰：内在盒子

width / height 作用的具体细节

width: auto的4种宽度表现：

1. 充分利用可用空间 fill-available
2. 收缩与包裹 fit-content
3. 收缩到最小 min-content
4. 超出容器限制 max-content

外部尺寸与流体特性：

1. 正常流宽度
2. 格式化宽度

内部尺寸与流体特性：

1. 包裹性
2. 首选最小宽度

CSS流体布局下的宽度分离原则——width属性不与影响宽度的padding/border属性共存

改变width/height作用细节的box-sizing