何为“流”？ 即文档流，实际上是 CSS 世界中的一种基本的定位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工的表现。”
SVG
2003 年 1 月，SVG 1.1 被确立为 W3C 标准，而 CSS 2.1 是 2007 年才发布的。
SVG 的强项是图形，做不好基本的文字排版都做不好。CSS 被“重用”，SVG 被“冷藏”。但是，如今技术得到了发展，Web 呈现更加复杂和丰富多彩，图文显示仅仅是网页功能的一部分，于是，矢量且图形领域颇有造诣的 SVG 开始迎来了自己的第一春。
CSS 与 CSS3 CSS 是为图文信息展示服务的。
CSS3 是为了实现更丰富、更复杂的网页，基本上和“流”的关系不大。
外在盒子、内在盒子和附加盒子 每个元素都有两个盒子，外在盒子和内在盒子（学名“容器盒子”）。
外在盒子负责元素是可以一行显示的，还是只能换行显示的，内在盒子负责宽高、内容呈现等。
list-item 除了外在盒子和内在盒子之外，还有一个“附加盒子”（学名“标记盒子”），专门用来放圆点、数字等项目符号。
width 和 height 作用在内在盒子上。“内在盒子”被分成了 4 个盒子，分别是 content box、padding box、border box、margin box。width 是作用在 conent box 上的。
内部尺寸与外部尺寸 盒子分为“内在盒子”和“外部盒子”，显示分为“内部显示”和“外部显示”，尺寸也分为“内部尺寸”和“外部尺寸”。
块级元素默认宽度 100% 显示，是“外部尺寸”，其余的都是“内部尺寸”。
表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。
所谓“流动性”是一种 margin、border、padding 和 content 自动分配水平空间的机制。
外部尺寸
内部尺寸 所谓“内部尺寸”，简单的讲就是元素的尺寸由内部的元素决定，而非外部的容器决定。
如果一个元素里面没有内容时，宽度为 0，那使用的就是“内部尺寸”。
内部尺寸的表现：
“连续的内联盒子”指的是全部是内联级别的一个或一堆元素，中间没有任何换行标签或其他块级元素。
width width 的默认值为 auto，其样式表现如下：
块级元素的宽度默认是 100% 于父级容器的，充分利用可用空间（fill-available）
浮动元素、绝对定位元素、inline-block 元素或者 table 元素的宽度会 收缩到合适（shrink-to-fit）。
表格布局 table-layout 为 auto 时，当每一列空间都不够的时候，文字能断则断（中文随便断，英文有一定的规则），表现为 收缩到最小（min-content）。
当文字内容是很长的连续的英文和数字，或者内联元素设置了 white-space:nowrap，则会 超出容器限制。
height:100% 如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，其计算值为 auto。
auto 和 100% 是无法计算的，因此父级不显示设置高度的话，子元素 height:100% 是无效的。
绝对定位元素 height:100% 有计算值，即使定位父级的 height 计算值为 auto。
绝对定位元素的宽、高百分比是相对于 padding box 计算的，但是非绝对定位元素则是相对于 content box 计算的。
min-width/max-width 虽然 MDN 和 W3C 维基的文档上都显示 min-width/min-heigh 的初始值是 0，但是所有浏览器 min-width 的默认值是 auto。max-width 的默认值是 none。
min-width 和 max-width 发生冲突是，min-width 会覆盖 max-width。
max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，权重比 !important 还要高。