html 置換元素和非置換元素

2021-10-10 09:20:06 字數 644 閱讀 2532

一般我們都會答:行內元素不能設定寬高,不會新起一行,行內元素只能包含資料或者行內元素,不能設定上下margin等等。塊級元素當然,能夠新起一行,能夠設定寬高,margin,並且可以包含塊級元素,行內元素和資料。

好的,沒問題,那麼再問:

img是行內元素嗎?馬上回答,是的。

那麼img能夠設定寬高嗎?有點基礎的都會說可以吧,但是等等,上面說過什麼了,行內元素不是不能設定寬高嗎???

所以選擇閉嘴了…

其實這裡就牽扯到置換元素和非置換元素。

置換元素官方w3c解釋:

其實這裡就牽扯到置換元素和非置換元素。翻譯過來就是說,乙個元素,預設有css格式化外表範圍的元素。其實是擁有內在尺寸,這些元素性質同行內元素設定了inline-block一樣。

置換元素有: img select input textarea label button

非置換元素呢,當然不是置換元素就是非置換元素了…

置換元素(replaced element)主要是指 img, input, textarea, select, object 等這類預設就有 css 格式化外表範圍的元素。進而可知,非置換元素(non-replaced element)就是除了 img, input, textarea, select, object 等置換元素以外的元素。

置換和非置換元素

1.1 乙個 內容 不受css視覺格式化模型控制,css渲染模型並不考慮對此內容的渲染,且元素本身一般擁有固有尺寸 寬度,高度,寬高比 的元素,被稱之為置換元素。1.2 替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。1.3 例如瀏覽器會根據img標籤的src屬性的值來讀取資訊並顯...

置換元素與非置換元素

1 置換元素 瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。例如 瀏覽器會根據 標籤的src屬性的值來讀取資訊並顯示出來,而如果檢視 x html 則看不到的實際內容 標籤的type屬性來決定是顯示輸入框,還是單選按鈕等。x html中的 都是置換元素。這些元素往往沒實際的內容,即是乙個空元...

關於置換和非置換元素

在之前的 html中的塊級元素和內聯元素中了解到了內聯元素一般是不能設定寬高的,但是也有特殊。比如img是內聯元素,但可以設定寬高,這肯定讓不少人迷惑。這樣我們就要引入html中置換元素的概念 非置換元素在w3c中沒有給出明確的解釋,姑且我們就把除置換元素外的元素當作非置換元素吧 a 替換元素 瀏覽...