塊級元素 行內元素和行內塊元素

2021-09-11 08:01:40 字數 978 閱讀 5397

每個塊元素通常都會獨自佔據一整行或多整行,可以對其設定寬度、高度、對齊等屬性,常用於網頁布局和網頁結構的搭建。

行內元素的特點:

(1)和相鄰行內元素在一行上。

(2)高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。

(3)預設寬度就是它本身內容的寬度。

(4)行內元素只能容納文字或則其他行內元素。(a特殊)

注意:1、只有 文字才 能組成段落 因此 p 裡面不能放塊級元素,同理還有這些標籤h1,h2,h3,h4,h5,h6,dt,他們都是文字類塊級標籤,裡面不能放其他塊級元素。

2、鏈結裡面不能再放鏈結。

塊級元素的特點:

(1)總是從新行開始

(2)高度,行高、外邊距以及內邊距都可以控制。

(3)寬度預設是容器的100%

(4)可以容納內聯元素和其他塊元素。

行內元素的特點:

(1)和相鄰行內元素在一行上。

(2)高、寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。

(3)預設寬度就是它本身內容的寬度。

(4)行內元素只能容納文字或則其他行內元素。

在行內元素中有幾個特殊的標籤——行內塊元素的特點:

(1)和相鄰行內元素(行內塊)在一行上,但是之間會有空白縫隙。

(2)預設寬度就是它本身內容的寬度。

(3)高度,行高、外邊距以及內邊距都可以控制。

這三種元素,可以通過display屬性來相互轉化,不過實際開發中,塊元素用得比較多,所以我們經常把內聯元素轉化為塊元素,少量轉化為內聯塊,而要使用內聯元素時,直接使用內聯元素,而不用塊元素轉化了。

display屬性是用來設定元素的型別及隱藏的,常用的屬性有:

1、none 元素隱藏且不佔位置

2、block 元素以塊元素顯示

3、inline 元素以內聯元素顯示

4、inline-block 元素以內聯塊元素顯示

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

內聯元素 行內元素 內聯元素 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 結合行內和塊級元素的...

塊元素 行內元素 行內塊元素

塊級元素 一行只能放乙個,可以設定寬度高度,預設為容器的100 可以包含任何標籤 常用元素 div hr p h1 h6 ul ol dl form table 行內元素 一行可以放多個行內元素,不可以直接設定寬度高度,預設為本身內容的寬度,容納文字或其他行內元素 常用元素 span a i em ...