天天看點

css塊級元素與行内元素講解

css塊級元素與行内元素講解

css的塊級元素與行内元素是我們在布局中的基礎,但是一般的不會去細究它們之間的差別今天就把自己的心得寫出來。

常見塊級元素:div p form ul ol li 等;

常見的行内元素:span stronh em;

差別主要有一下幾點:

1. 塊級元素會獨自占一行,行内元素不會獨自占一行且相鄰的兩個塊級元素可以在同一行顯示

如圖:

css塊級元素與行内元素講解

2.行内元素設定height 與 weith 是無效的,塊級元素可以設定height 與 weith,不管塊級元素的寬度設定為多少都會占一行展示的

如圖:

css塊級元素與行内元素講解

3. 行内元素水準方向的margin和padding如margin-right、padding-left可以産生邊距效果,但是豎直方向的如padding-bottom和margin-top不會産生邊距效果,塊級元素可以設定margin和padding屬性,

如圖:

css塊級元素與行内元素講解

4. 塊級元素與行内元素的相關屬性 display

塊級元素為 display: block 行内元素為:display: inline,可以通過切換屬性值來實作塊級元素與行内元素之間的轉換

5. 還有一個屬性可以使元素既具有行内元素的屬性又可以有塊級元素的屬性,寫法如下:

display: inline-block