1、置換和非置換元素

1.1、 一個 內容 不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。

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

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

1.4、 HTML中的img、input、textarea、select、object都是替換元素。這些元素往往沒有實際的內容，即是一個空元素。

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

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

<!-- span是非置換元素 因此 hello word 被展示出來 而不是被替換成其他內容 --><span>hello word</span>

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

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

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

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

例子同上

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

• 典型的例子：img 當只定義了其高度值時，其寬度將會根據固有寬高比進行等比設置，這也是為什么img是行內元素，但可以設置寬高的原因

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

典型的例子：比如iframe, canvas

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

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

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

寬度設置是無效的，如：

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

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

高度設置無效，如：

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

轉載于:https://www.cnblogs.com/dushao/p/5999544.html

總結

以上是生活随笔為你收集整理的置换和非置换元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。