[toc]
## 什么是替換元素
替換元素是CSS世界中另外一種分類方式。
根據**外在盒子**是內聯還是塊級我們可以把元素分為內聯元素和塊級元素。
而根據是否具有可替換內容,我們可以把元素分為替換元素和非替換元素。
元素本身的內容可以被替換的元素叫做替換元素
常見的替換元素有
```
input,textarea,img,video,object
```
## 替換元素的樣式表現
有些樣式是無法改變的(可以考慮css3的apperance接口,也可以取消apperance后自定義樣式)
但文本框這種和一般元素無二(除卻不具備流特性)

## 替換元素與box-sizing
有一種說法`box-sizing`發明的初衷是來解決:替換元素寬度自適應問題的
```
input,textarea,img,video,object{
box-sizing:border-box;
}
```
因為替換元素的特性里有一項就是**尺寸由內部元素決定**(實際上,內部元素是撐不開的,只能通過css手動更改設置),且無論其`display`屬性值是inline還是block。

(**但display為block仍然會獨占一行,富余空間由margin填充**)
通常來說,display為block的元素就會具有流動性,但替換元素不是,替換元素的寬度始終由內部決定(這個說法不準確,實際只由css屬性決定)。
## 替換元素的3種尺寸設置
權重:css尺寸>HTML尺寸>固有尺寸
### 固有尺寸
想圖片、視頻這種作為一個獨立的文件存在時,都有自己的寬度和高度。
并且假若我們更改時**只**寬高中的一項,另外一項會自動隨之更改,并且按照原本的固有比例進行
### HTML尺寸
替換元素都具有特有的html屬性來更改本身的尺寸大小
```
<img width=300 height=100>
<input type=file size=30>
<textarea cols=20 rows-5></textarea>
```
### CSS尺寸
通過設置css更改替換元素尺寸
- 空白目錄
- 未處理
- 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
- 瀏覽器渲染原理
- 移動端