摘要:可替換元素可替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性,來決定元素的具體顯示內(nèi)容。參考置換元素替換元素和非置換元素不可替換元素中替換元素和不可替換元素及顯示元素詳細(xì)探討行內(nèi)元素和塊級元素為何等內(nèi)聯(lián)元素可以設(shè)置寬高
元素是文檔結(jié)構(gòu)的基礎(chǔ),在CSS中,每個元素生成了一個包含了元素內(nèi)容的框(box,也譯為“盒子”)。但是不同的元素顯示的方式會有所不同,例如 也不一樣。在文檔類型定義(DTD)中對不同的元素規(guī)定了不同的類型,這也是DTD對文檔之所以重要的原因之一。 從元素本身的特點來講,可以分為可替換元素(replaceable element)和不可替換元素(none-replaceable element)。 可替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性,來決定元素的具體顯示內(nèi)容。 例如瀏覽器會根據(jù) (x)html中的 (x)html 的大多數(shù)元素是不可替換元素,即其內(nèi)容直接表現(xiàn)給用戶端(例如瀏覽器)。 例如: 段落的內(nèi)容 是一個不可替換元素,文字“段落的內(nèi)容”全被顯示。 除了可替換元素和不可替換元素的分類方式外,css 2.1中元素還有另外的分類方式:塊級元素(block-level)和行內(nèi)元素(inline-level,也譯作“內(nèi)聯(lián)”元素)。 在視覺上被格式化為塊的元素,最明顯的特征就是它默認(rèn)在橫向充滿其父元素的內(nèi)容區(qū)域(塊級元素的流體特性),而且在其左右兩邊沒有其他元素,即塊級元素默認(rèn)是獨占一行的。 典型的塊級元素有: 、到、 行內(nèi)元素不形成新內(nèi)容塊,即在其左右可以有其他元素,例如、、等,都是典型的行內(nèi)級元素。 對于塊級元素 塊級元素具有height和width屬性,可以通過他們直接設(shè)置寬和高 對于可替換的元素(行內(nèi)元素) 替換元素一般有內(nèi)在尺寸和寬高比(auto時起作用),所以具有width和height,可以設(shè)定。 對于不可替換元素(行內(nèi)元素) 通過line-height屬性來設(shè)置行高 補充:關(guān)于行高 從上到下四條線分別是頂線、中線、基線、底線,很像才學(xué)英語字母時的四線三格,我們知道vertical-align屬性中有top、middle、baseline、bottom,就是和這四條線相關(guān)。 行高是指上下文本行的基線間的垂直距離,即圖中兩條紅線間垂直距離。 1.置換元素(替換元素)和非置換元素(不可替換元素) 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/111524.html 摘要:最近在群聊里偶然看到有位仁兄發(fā)了張今日頭條前端面試題的截圖,其中關(guān)于的只有一題,如下請問什么是可替換元素和非可替換元素,它們的差異是什么并舉例說明。釋義什么是可替換元素顧名思義,就是會被替換的元素。
最近在群聊里偶然看到有位仁兄發(fā)了張今日頭條前端面試題的截圖,其中關(guān)于 HTML 的只有一題,如下:
請問什么是可替換元素和非可替換元素,它們的差異是什么?并舉例說明。
前端面試中 HTML... 摘要:替換元素瀏覽器根據(jù)元素的標(biāo)簽和屬性,來決定元素的具體顯示內(nèi)容。替換元素是其內(nèi)容不受視覺格式化模型控制的元素,例如標(biāo)簽,嵌入的文檔之類或者,這些叫做替換元素。
img標(biāo)簽設(shè)置display:block,寬度無法100%
一些個人總結(jié),第一次發(fā)文章,有什么不足的地方,還請各位多提意見
現(xiàn)象
如下代碼,img標(biāo)簽設(shè)置了display:block,尺寸寬度無法設(shè)定為100%
... 摘要:行內(nèi)元素不會在它本身之前或之后生成分隔符,所以可以出現(xiàn)在另一個元素的內(nèi)容中,而不會破壞其顯示。標(biāo)記標(biāo)記基本目的是允許創(chuàng)作人員將包含標(biāo)記的文檔與其他文檔相關(guān)聯(lián)。更多細(xì)節(jié)請看權(quán)威指南
題外話:HTML是一種結(jié)構(gòu)化語言,而CSS是它的補充;這是一種樣式語言。CSS是前端三板斧之一,因此學(xué)習(xí)CSS很重要。而我還是菜鳥,所以需要加強學(xué)習(xí)CSS。這個是我學(xué)習(xí)CSS權(quán)威指南的筆記,如有不對,請諒解和... 閱讀 2197·2021-11-24 09:39 閱讀 1555·2019-08-30 15:44 閱讀 2004·2019-08-29 17:06 閱讀 3453·2019-08-29 16:32 閱讀 3604·2019-08-29 16:26 閱讀 2709·2019-08-29 15:35 閱讀 3070·2019-08-29 12:50 閱讀 1701·2019-08-29 11:15標(biāo)簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(x)html代碼,則看不到圖片的實際內(nèi)容;又例如根據(jù)標(biāo)簽的type屬性來決定是顯示輸入框,還是單選按鈕等。
、、、、都是替換元素。這些元素往往沒有實際的內(nèi)容,即是一個空元素。
顯示元素
段落,等等。
浮動元素以及display屬性為block、list-item的元素都是塊級元素。
行內(nèi)元素
幾乎所有的可替換元素都是行內(nèi)元素,例如、等等。
例如你不指定img的width和height時,就按其內(nèi)在尺寸顯示,也就是圖片被保存的時候的寬度和高度。
對于表單元素,瀏覽器也有默認(rèn)的樣式,包括寬度和高度。
參考:
2.css中替換元素和不可替換元素及顯示元素詳細(xì)探討
3.行內(nèi)元素和塊級元素
4.為何img、input等內(nèi)聯(lián)元素可以設(shè)置寬、高 相關(guān)文章
什么是可替換元素?
img標(biāo)簽設(shè)置display:block,寬度無法100%
CSS權(quán)威指南學(xué)習(xí)筆記系列(1)CSS和文檔
發(fā)表評論
0條評論
魏明
男|高級講師
TA的文章
閱讀更多
下一代的 3D Tiles 前瞻
第六集: 從零開始實現(xiàn)一套pc端vue的ui組件庫( loading )組件
深入淺出JavaScript運行機制
構(gòu)建靜態(tài)頁面 之 [ 列表 ]
FC及BFC
面試小結(jié)(三)
css 居中
可替換元素和非可替換元素