[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的寬度越寬。(這種特性,大概也是因此被創造出來的)
##### 文字少的時候居中,多的時候居左

#### 首選最小寬度
#### 最大寬度
- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端