CSS的尺寸也分为
- 内部尺寸——尺寸由内部元素决定
- 外部尺寸——尺寸由外部元素决定
外部尺寸——流宽度
块级元素的流特征：块级元素（如div）的尺寸表现和水流一样，会自动填满容器，但一旦设置了宽度，流动性就会丢失。
所谓流动性，并不是看上去的宽度100%显示这么简单，而是一种margin/border/padding和content内容区域自动分配水平空间的机制。
链接中是一个因设置宽度 width:100% 而破坏流动性的例子 http://demo.cssworld.cn/3/2-3.php
外部尺寸——格式化宽度、高度
格式化宽度仅出现在“绝对定位模型”中（position属性值为absolute或fixed的元素）。
“格式化宽度”具有完全的流体性，也就是margin、border、padding和content内容区域同样会自动分配水平（和垂直）空间。
默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定。
但是，有一种情况其宽度是由外部尺寸决定的
对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算。
div { position: absolute; left: 20px; right: 20px; }
假设该div元素最近的具有定位特性的祖先元素的宽度是1000像素，则这个div元素的宽度是960（即1000−20−20）像素。
格式化高度同格式化宽度。
内部尺寸——首选最小宽度
- 东亚文字（如中文）最小宽度为每个汉字的宽度
- 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。例如，“display:inline-block”这几个字符以连接符“-”作为分隔符，形成了“display:inline”和“block”两个连续单元，由于连接符“-”分隔位置在字符后面，因此，最后的宽度就是“display:inline-”的宽度
- 类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度。
如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。
内部尺寸——包裹性
元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。
button标签是展示“包裹性”最好的例子，具体表现为：按钮文字越多宽度越宽（内部尺寸特性），但如果文字足够多，则会在容器的宽度处自动换行（自适应特性）。
内部尺寸——最大宽度
最大宽度就是元素可以有的最大宽度。如果内部没有块级元素或者块级元素没有设定宽度值，则“最大宽度”实际上是最大的连续内联盒子的宽度。
“内联盒子”是display为inline、inline-block、inline-table等的元素。“连续内联盒子”指的全部都是内联级别的一个或一堆元素，中间没有任何的换行标签br或其他块级元素。
大部分需要使用“最大宽度”的场景可以通过设置一个“很大宽度”来实现。
比方说，有5张图片，每张图片宽度200像素，假设图片元素紧密排列，则“最大宽度”就是1000像素。但是，实际开发的时候，我们懒得计算，可能直接设置容器 width:2000px ，这个2000像素就是“很大宽度”，宽度足够大，作用是保证图片不会因为容器宽度不足而不在一行内显示。
