[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的寬度越寬。（這種特性，大概也是因此被創造出來的） ##### 文字少的時候居中，多的時候居左  #### 首選最小寬度 #### 最大寬度