未定义行为
我们总认为一些所谓的浏览器个性差异是一种bug，但实际上这种表现的差异，是一种未定义行为。
即，标准并未对这种渲染做出一种强制性的规定，故，浏览器根据自己的理解进行渲染，造成浏览器之间的一种表现差异。
举个例子：
假设给一个button按钮绑定一个:active事件，鼠标点击，元素执行:active伪类对应的CSS样式，按钮变红，
普通浏览器：鼠标按下，还未离开，则按钮变红
火狐：鼠标按下，离开之后，才能触发按钮变红
这个原因在于火狐认为:active应该发生在mouse down之后
这种就是因为标准没有统一定义，所以各自理解，造成的“未定义事件”.
块级元素
块级元素和display为block的元素不是一个概念 块级元素的基本特征：一个水平流上，只能单独显示一个元素，多个块级元素则换行显示。（换行特性）display:list-item / table（都是块级元素--满足换行特性）
换行特性：配合clear属性清除浮动
// 换行特性：配合clear属性清除浮动
.clear:after{
content:'';
display:table;// 也可以是block，或者是list-item
clear:both;
}
上述示例中，一般只会用display:block，而不会用display:list-item
原因如下：
1：block拼写更短
2：list-item会出现项目符号，虽然可以用list-style:none清除，不过这不是很麻烦吗
3：list-item兼容性不好，对于IE，普通法元素设置display:list-item可以，对于伪元素:after/:before不可以
盒子
从上面的最后一句，我们可以看到，IE不支持伪元素的display:list-item，
为什么不支持呢？
这可以追溯到，为什么display:list-item会出现项目符号。
首先简单了解一下“盒子”
元素有块级元素、内联元素，
块级元素用块级盒子装着，内联元素用内联盒子装着，
块级盒子负责结构，内联盒子负责内容。
但是现在多了个display:list-item，它默认要显示项目符号的，一个盒子显然解释不了，怎么办？
于是又创造了一个“附加盒子”。
附加盒子，学名“标记盒子”，专门用来放远点、数字这些项目符号的
可能IE没办法在为元素应用display:list-item就是没办法创建这个“标记盒子”
然后深入学习一下“盒子”
我们在上面了解到三个盒子：
块级盒子、内联盒子、附加盒子
搞不清楚的可以回去捋一下思路。
display:inline-block的盒子
刚才提到的三个盒子，没办法解释display:inline-block的特性，
那怎么办呢？
于是规定每个元素都有一个内在盒子（这个是俗名，不用记，学名“容器盒子”）和一个外在盒子。
内在盒子负责宽高、内容呈现
外在盒子负责元素是否一行显示还是换行显示。
内在盒子，学名“容器盒子”
| display | 容器盒子（内在盒子） | 外在盒子 |
|---|---|---|
| block | 块级容器 盒子 | 块级 盒子 |
| inline | 内联 盒子 | 内联 盒子 |
| inline-block | 块级容器 盒子 | 内联 盒子 |
| inline-table | table 盒子 | 内联 盒子 |
当然，我们应该意识到display:table-cell的容器盒子是cell盒子，外在盒子是table盒子……
盒子小结
上面出现了很多盒子，这里来捋一下，
块级元素用块级盒子装着，
内联元素用内联盒子装着
标记盒子：专门用来放远点、数字这些项目符号的（“附加盒子”这个名词只是便于理解）
容器盒子负责宽高（这句话说明了width作用在容器盒子上）、内容呈现（同样“内在盒子”这个名词只是便于理解）
外在盒子负责元素是否一行显示还是换行显示。
数了数得有五个盒子的名词，他们之间什么关系呢？
从我的理解来看，块级盒子和内联盒子是我们理解元素最开始所定义的盒子，
只不过后来发现这么理解可能不太对劲，
于是我们对元素的解析上升一个版本，进入2.0时代。
一个元素并不仅仅是被内联盒子或者块级盒子包裹在内的，
一个元素是由外在盒子和容器盒子共同包裹着的，
这个外在盒子和容器盒子可能是块级盒子也可能是内联盒子。
width:auto
这句语句有四种不同的表现形式：
(1)充分利用可用空间
比如说，普通来说，div、p这些元素，都会默认充满整个父元素标签，这就是充分利用可以用的空间，把自己的宽度充满整个父元素。
(2)收缩与包裹shrink-to-fit
CSS3中的fit-content即指此
参考文章：CSS中的包裹性
哪些元素具有包裹性？
就我已知的有：absolute，fixed，float，inline-box等等。
(3)收缩到最小
CSS3中的min-content即指此
(4)超出容器限制
CSS3中的max-content即指此
子元素既保持了收缩包裹的特性，又无视父元素的宽度冲了出去（让内容宽度最大）
父元素定宽，而子元素white-space:nowrap或者子元素是一串特别长不能断开的英文字母（英文单词不能断开）
外部流尺寸与流体特性
上面四种尺寸表现，哪个是“外部尺寸”？哪个是“内部尺寸”？
其实，只有第一种“充分利用可用空间”，即div默认宽度100%是“外部尺寸”，其余的是“内部尺寸”。
这个唯一的“外部尺寸”，即文档流、流的精髓所在。
（1）正常流宽度
正常来说一个div的宽度是正常铺满整个容器的，如果说设置了宽度，反而会使流动性丢失\
流动性：并不是仅仅看上去的宽度100%那么简单。
而是一种margin/border/padding和content内容区域自动分配水平空间的机制。
看个例子：
下面那个设置了width:100%反而丢失了流动性
（2）格式化宽度
格式化宽度仅仅会出现在绝对定位模型中
简而言之就是，如果一个绝对定位的非替换元素，同时设置了两个相反方向的属性值，那么，它的宽度将会表现为格式化宽度。
div{
position: absolute;
left: 20px;
right: 20px;
}
如果这个div的第一个有定位（非static）的祖父元素宽度为1000，则这个div宽度表现为1000-20-20=960
