塊級元素與內聯元素總結

2021-08-03 22:36:15 字數 1251 閱讀 6764

塊級元素:(1)獨佔一行。(2)寬和高能夠起作用

內聯元素(行內元素):與塊級元素相反。

塊級元素常見的有:

div、p、tr、th、h、ol、 ul、li、dl、table等

內聯元素常見的有:

a、td、span、input、button等

一般所有的塊級元素內可以放內聯元素。

塊級元素中巢狀塊級元素就有特殊情況了。比如

div在p內部div>

p>在瀏覽器中就變成了

瀏覽器對於不適合的巢狀會用另外的方式來解析。

在這裡特殊的塊級元素有h標籤和p標籤。

內聯元素中也可以巢狀塊級元素。比如span標籤中就可以用div標籤。

平時在寫站點時,注意使用除錯就看到了。他的解析是自動把父子分開變成同級的兄弟。

當然一般內聯元素也可以放內聯元素。

display

可以使內聯元素與塊級元素之間轉化。

(1)當屬性值為inline時就是塊級元素轉化為內聯元素。一般用於去掉塊級元素的分行。

(2)塊級元素轉化為內聯元素還有乙個inline-block屬性。這個改為內聯元素後還能設定寬和高。

當我們在使用轉化時會出現一些問題

(1)當div轉化為inlineblock時兩個塊之間會出現縫隙。

原因是內聯元素之間打了乙個回車就是乙個空格所以兩個塊之間出現了縫隙

解決辦法:

將**中的回車刪掉

將字型的大小設定為0就不會顯示這個空格

改變兩個塊之間的外邊距

(2)如果在轉化了的元素中新增塊級元素比如p會產生錯位

這是因為基線的原因,當塊級元素轉化為內聯元素時一般的垂直對齊方式為baseline 就是四線三格中的第三條線。top是第一條線 bottom是第四條 middle是第二條,要想解決這個問題就是改變他的垂直對齊方式,改為其他的就可以了。

塊級元素與內聯元素總結

塊級元素 1 獨佔一行。2 寬和高能夠起作用 內聯元素 行內元素 與塊級元素相反。塊級元素常見的有 div p tr th h ol ul li dl table等 內聯元素常見的有 a td span input button等 一般所有的塊級元素內可以放內聯元素。塊級元素中巢狀塊級元素就有特殊情...

內聯元素與塊級元素

一 行內元素與塊級元素的區別 1 塊級元素的特點 1 總是從新行開始 2 高度,行高 外邊距以及內邊距都可以控制。3 寬度預設是容器的100 4 可以容納內聯元素和其他塊元素。2 內聯元素的特點 1 和相鄰行內元素在一行上。2 高 寬無效,但水平方向的padding和margin可以設定,垂直方向的...

塊級元素與內聯元素

塊級元素 block element div 最常用的塊級元素 dl 和dt dd搭配使用的塊級元素 dl dt dd是乙個組合型標籤 標籤標準用法,如下 標題1dt 列表1dd 列表2dd dl 同時dd內可以放標籤使用。form 互動表單 h1 大標題 hr 水平分隔線 ol 排序表單 p 段落...