[toc] ## pre 以下讨论的皆为width大小的值为`auto`的情况 ## 什么是外部（决定）尺寸与内部（决定）尺寸 在CSS世界中盒子分为**外在盒子**和**内在盒子**， 尺寸也同样分为**外部尺寸**和**内部尺寸**。 其中`内部尺寸`英文写作`Intrinsic Sizing`（因纯sik， 本质的，固有的），表示尺寸由内部元素决定，SO这个尺寸并不是表示内部的尺寸，而是内部因素决定的尺寸。 而`外部尺寸`英文写作`Extrinsic Sizing`（ 外在的；外来的；非固有的），表示尺寸由外部元素决定，SO，同样的，这个尺寸并不是表示外部的尺寸，而是外部因素决定的尺寸 So，以上两个东东并不是特指元素某一部分的大小，而更像是一种**规则**。 ## 外部(决定)尺寸与流特性 外部尺寸，即外部因素决定元素尺寸，我们也这种影响称之为`流特性`，它会充分利用可用空间(`fill-available`)。 所谓流特性，**并不是**简单的width:100%，而是一种`margin/border/padding/content`内容区域**自动分配水平空间**的机制。 正常块级元素都具有这样的特性（垂直方向这种特性发挥得并不全面），另外，特殊的，绝对定位模型（absolute/fixed）的`格式化宽度`也具有这种特性。 并且格式化宽度，在**垂直方向**上**也**具有流特性！ ### 格式化宽度 具有绝对定位的元素（absolute/fixed），具有包裹性，正常情况下它的宽高由内部决定， 但有一种特殊情况，当其对立方位的属性值同时存在时（left/right或则top/bottom），其宽度是由外部决定的，我们将这种情况下的宽高称之为`格式化宽度` 其宽度大小相对于离它最近的定位祖先元素进行计算，如果没有，则是视口。 ## 内部（决定）尺寸与流特性 所谓内部尺寸，其实它的意思是这样的 由内部的元素决定当前元素的尺寸大小（不手动指定父级尺寸，这里讲的是内部尺寸与流嘛） So，它是**一种规则**，而不是指元素某一部分的大小 内部尺寸的流特性和外部尺寸不一样，主要分为三大点 ### 三大特性 #### 包裹性 英文称之为`shrink-to-fit`，收缩到适应。 元素尺寸由内部元素决定时，其大小永远不会超过包含块容器的尺寸(width)。（除非容器尺寸小于元素的"首选最小宽度"，此时元素尺寸应为首选最小宽度）  （容器尺寸小于元素的"首选最小宽度"） 包裹性最好的例子是`button`标签，按钮元素的宽度是由其中的文本内容决定的，文字越多，button的宽度越宽。（这种特性，大概也是因此被创造出来的） ##### 文字少的时候居中，多的时候居左  #### 首选最小宽度 #### 最大宽度