常用的塊級元素 行內元素以及行內塊元素的解析

2022-09-11 09:00:14 字數 660 閱讀 6636

一.塊級元素:

不廢話,直接上圖(div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,html5新增的header、section、aside、footer等)

從瀏覽器的顯示結果可以看出,塊級元素新開啟一行(即使是設定了width屬性也是獨佔一行)、盡可能撐滿父級元素的寬度,可以設定width和height屬性;table元素瀏覽器預設的display屬性為table。

二.行內元素

也直接上圖(span、img、a、lable、input、abbr(縮寫)、em(強調)、big、cite(引用)、i(斜體)、q(短引用)、textarea、select、small、sub、sup,strong、u(下劃線)、button(預設display:inline-block))

從瀏覽器的顯示結果可以看出,相鄰的行內元素不換行,寬度即為內容的寬度、padding的4個方向都有效(從span標籤可以看出)、margin只有水平方向有效、不可以設定width和height屬性。行內塊元素表現其實和行內元素一樣,只是其可以設定width和height屬性。

---------------------

塊級元素,行內元素,行內塊元素

內聯元素 行內元素 內聯元素 inline element 行內塊元素 a 錨點 abbr 縮寫 acronym 首字 b 粗體 不推薦 bdo bidi override big 大字型 br 換行 cite 引用 code 計算機 在引用原始碼的時候需要 dfn 定義字段 em 強調 font ...

塊級元素,行內元素,行內塊元素

獨佔一行,對寬高的屬性值生效 如果不給寬度,預設為瀏覽器的寬度即100 塊標籤 p div ul ol li dl dt dd h1 h6 form 可以多個標籤存在一行,對寬高的屬性值不生效,靠內容撐開 行內標籤 a span em strong b i u label br 結合行內和塊級元素的...

CSS塊級元素 行內元素 行內塊級元素

塊級元素 根據css規範的規定,每乙個網頁元素都有乙個display屬性,用於確定該元素的型別,每乙個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為 block 成為塊級元素 display block 常見塊級元素 div p ul ol li 等 1 每個塊級...