置換和非置換元素

一、置換和非置換元素

1.一、 一個 內容 不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素自己通常擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之爲置換元素。

1.二、 替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

1.三、 例如瀏覽器會根據img標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據input標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。

1.四、 HTML中的img、input、textarea、select、object都是替換元素。這些元素每每沒有實際的內容，便是一個空元素。

二、非置換元素/不可替換元素

2.一、 HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器），如：

<!-- span是非置換元素 所以 hello word 被展現出來 而不是被替換成其餘內容 -->
   <span>hello word</span>

三、行內級置換的寬度定義

• 若寬高的計算值都爲 auto 且元素有固有寬度，則 width 的使用值爲該固有寬度

典型的例子是：擁有默認寬高的 input 當寬度的計算值爲auto時，則寬度使用值爲其默認的固有寬度

• 若寬度的計算值爲 auto 且元素有固有寬度，則 width 的使用值爲該固有寬度

例子同上

• 若寬度的計算值爲 auto 且高度有 非auto 的計算值，而且元素有固有寬高比，則 width 的使用值爲 高度使用值 * 固有寬高比

• 典型的例子：img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設置，這也是爲何img是行內元素，但能夠設置寬高的緣由

• 除此以外，當 width 的計算值爲 auto 時，則寬度的使用值爲 300px

典型的例子：好比iframe, canvas

四、行內級置換的高度定義

• 若寬高的計算值都爲 auto 且元素有固有高度，則 height 的使用值爲該固有高度；
• 若高度的計算值爲 auto 且元素有固有高度，則 height 的使用值爲該固有高度；
• 若高度的計算值爲 auto 且寬度有 非auto 的計算值，而且元素有固有寬高比，則 height 的使用值爲：寬度使用值 / 固有寬高比；
• 若高度的計算值爲 auto 且上述條件徹底不符，則 height 的使用值 不能大於150px，且寬度不能大於長方形高度的2倍

五、行內級非置換元素的寬度定義

寬度設置是無效的，如：

<!-- 設置寬度無效 ，span的寬度默認爲其內容的寬度 -->
<span>hello word</span>

六、行內級非置換元素的高度定義

高度設置無效，如：

<!-- 設置高度無效 ，span的高度默認爲其內容的高度 -->
<span>hello word</span>