CSS文档流

什么是流

“流”实际上是CSS 世界中的一种基本的定位和布局机制。

CSS世界构建的基石是HTML，而HTML最具代表的两个基石<div>和<span>正好是CSS
世界中块级元素和内联级元素的代表。

所以，所谓“流”，就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。

流体布局

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身
具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于“自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为100%自适应，但表格和“流”不是一路的，并不属于“流体布局”。

因此，曾经风靡的“div+CSS 布局”，实际上指的就是这里的“流体布局”。

css3世界

（1）布局更为丰富。
• 移动端的崛起，催生了CSS3 媒介查询以及许多响应式布局特性的出现，如图片元素
的srcset 属性、CSS 的object-fit 属性。
• 弹性盒子布局（flexible box layout）终于熬出了头。
• 格栅布局（grid layout）姗姗来迟。
（2）视觉表现长足进步。
• 圆角、阴影和渐变让元素更有质感。
• transform 变换让元素有更多可能。
• filter 滤镜和混合模式让Web 轻松变成在线的Photoshop；
• animation 让动画变得非常简单。

上面提到的全部都是CSS3 的新属性。因为CSS3 的设计初衷是为了实现更丰富、更复杂
的网页，所以基本上和“流”的关系并不大。

css中的专业术语

1. 属性
2. 值：整数值，数值，百分比值，长度值，颜色值等
3. 关键字：常见的solid、inherit 等
4. 变量：CSS 中目前可以称为变量的比较有限，CSS3 中的currentColor 就
   是变量，非常有用。
5. 长度单位：CSS 中的单位有时间单位（如s、ms），还有角度单位（如deg、rad 等），但最常见的自然还是长度单位（如px、em 等）。需要注意的是，诸如2%后面的百分号%不是长度单位。再说一遍，%不是长度单位！因为2%就是一个完整的值，就是一个整体，我想你一定认为0.02 是值，没错，2%也同样是值。<number> + 长度单位 = <length>，
   如果继续细分，长度单位又可以分为相对长度单位和绝对长度单位。
   （1）相对长度单位。相对长度单位又分为相对字体长度单位和相对视区长度单位。
   . 相对字体长度单位，如em 和ex，还有CSS3 新世界的rem 和ch（字符0 的宽度）。
   . 相对视区长度单位，如vh、vw、vmin 和vmax。
   （2）绝对长度单位：最常见的就是px，还有pt、cm、mm、pc 等
6. 功能符：值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba 和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等。
7. 属性值：属性冒号后面的所有内容统一称为属性值。
8. 声明：属性名加上属性值就是声明，例如：color: transparent;
9. 声明块：声明块是花括号（{}）包裹的一系列声明。
10. 规则或规则集：出现了选择器，而且后面还跟着声明块。
11. 选择器：选择器是用来瞄准目标元素的东西，ID选择器，类选择器等。
12. @规则：@规则指的是以@字符开始的一些规则，像@media、@font-face、@page 或者@support，诸如此类。

了解CSS 世界中的“未定义行为”

当某个浏览器中出现与其他浏览器不一样的行为或样式表现的时候，我们总会习惯把这种
不一样的表现认为是浏览器的bug。实际上，此时遇到的表现差异并不是浏览器的bug，用
计算机领域的专业术语描述应该是“未定义行为”（undefined behavior）。像这种规范顾及不到的细枝末节的实现，就称为“未定义行为”。

HTML 常见的标签有<div>、<p>、<li>和<table>以及<span>、<img>、<strong>
和<em>等。虽然标签种类繁多，但通常我们就把它们分为两类：块级元素（block-level element）和内联元素（inline element）。

块级元素

“块级元素”对应的英文是block-level element，常见的块级元素有<div>、<li>和<table>
等。需要注意是，“块级元素”和“display 为block 的元素”不是一个概念。例如，<li>元
素默认的display 值是list-item，<table>元素默认的display 值是table，但是它们
均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear 属性来清除浮动带来的影响。

display

width 值作用的细节

content box 环绕着width 和height 给定的矩形。

如果设定了宽度，则存在两个缺点：

（1）流动性丢失。

（2）与现实世界表现不一致的困扰。

CSS 流体布局下的宽度分离原则

很简单，分离，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

宽度分离的目的是便于维护。

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

box-sizing 被直译为“盒尺寸”，改变了width 作用的盒子。

理论上，box-sizing 可以有下面这些写法：
.box1 { box-sizing: content-box; }
.box2 { box-sizing: padding-box; }
.box3 { box-sizing: border-box; }
.box4 { box-sizing: margin-box; }

实际

理论美好，现实残酷。实际上，支持情况如下：
.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */

相对简单而单纯的height:auto

height:auto 要比auto 简单而单纯得多。，CSS 的默认流是水平方向的，宽度是稀缺的，高度是无限的。因此，宽度的分配规则就比较复杂，高度就显得比较随意。