置換和非置換元素

2022-03-09 22:48:19 字數 819 閱讀 7519

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

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

1.3、 例如瀏覽器會根據img標籤的src屬性的值來讀取資訊並顯示出來,而如果檢視(x)html**,則看不到的實際內容;又例如根據input標籤的type屬性來決定是顯示輸入框,還是單選按鈕等。

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

2.1、 html 的大多數元素是不可替換元素,即其內容直接表現給使用者端(例如瀏覽器),如:

hello word

典型的例子是:擁有預設寬高的 input 當寬度的計算值為auto時,則寬度使用值為其預設的固有寬度

例子同上

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

典型的例子:比如iframe, canvas

寬度設定是無效的,如:

hello word

高度設定無效,如:

hello word

html 置換元素和非置換元素

一般我們都會答 行內元素不能設定寬高,不會新起一行,行內元素只能包含資料或者行內元素,不能設定上下margin等等。塊級元素當然,能夠新起一行,能夠設定寬高,margin,並且可以包含塊級元素,行內元素和資料。好的,沒問題,那麼再問 img是行內元素嗎?馬上回答,是的。那麼img能夠設定寬高嗎?有點...

關於置換和非置換元素

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

關於置換和非置換元素

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