1. 程式人生 > >塊級元素、內聯元素、行內塊元素

塊級元素、內聯元素、行內塊元素

1.共同點:塊級元素與內聯元素都是盒模型,都具有height、width、padding、margin、border等屬性,但是二者的表現不同,一般不提倡在內聯元素中使用這些屬性。
2.塊級元素特徵:

  • 總是在新行開始,獨佔一行
  • 高度、行高以及內邊距和外邊距都可控制
  • 寬度總是和父級元素寬度一樣,與內容無關
  • 可以容納內聯元素和其他塊元素

3.內聯元素特徵

  • 和其它元素在一行內
  • 高度、行高以及內邊距和外邊距可改變
  • 寬度和內容有關
  • 只能容納文字和其他內聯元素

4.內聯元素的不同表現

  • 定義的高度和寬度不起左右,具體表現為盒子的具體高度和寬度,不定義之前盒子模型的高度和寬度都是auto
  • 外邊距只對左右起作用,對上下不起作用
  • 內邊距在ie6中不對上下起作用
  • width、height、padding、margin、border等屬性可以變現出來,但是在豎直方向不佔據空間

5.元素型別的轉變

  • display:block–顯示為塊級元素
  • display:inline–顯示為內聯元素
  • display:inline-block–顯示為內聯塊元素