塊級元素與內聯元素的區別

2021-07-16 07:11:32 字數 585 閱讀 4451

塊級元素一般用來搭建**大的框架,布局,例如:div,ul,ol,li,dd,dt,dl,h1~h6,p

內聯元素inline element:主要是為了具體設計某幾個字的樣式而存在的。

block元素預設獨佔一行,後面無論緊跟什麼元素,都會另起一行;block元素的預設寬度是父元素的100%,可以設定高與寬,以及padding值與margin值;width設定為100%的優點就是說它會根據瀏覽器的變化而自己調整寬度。

inline元素不會獨佔一行,始終是從左往右排列,排不下的話才會另起一行,inline元素的寬度的跟隨內容自動撐起來的,內容有多長,寬度就是多寬,內聯元素又稱為行內元素,顧名思義,就是始終的行裡,所以設定它的高度與寬度都是無效的。但是可以設定margin與padding的水平方向上的值,豎直方向上的padding-bottom,padding-top,margin-top,margin-bottom設定無效。

block element 與inline element 之間可以相互轉化,通過display:inline使得塊級元素轉化為內聯元素,從而具有了內聯元素的性質

同理,display:block使得內聯元素轉化為塊級元素,從而具有了塊級元素的性質

塊級元素與內聯元素的區別

1 總是在新行上開始,也就是說會佔據一行 2 高度,行高以及外邊距和內邊距都可控制 3 寬度預設為是它的容器的100 但可以設定乙個寬度。4 它可以容納內聯元素和其他塊元素 1 和其他元素都在一行上 2 高,行高及外邊距和內邊距不可改變 3 寬度就是它的文字或的寬度,不可改變 1 和其他元素都在一行...

內聯元素與塊級元素的區別

關注前端 2010 09 14 23 27 11 block 塊 元素的特點 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 inline元素的特點 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是...

內聯元素與塊級元素

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