4 6 標籤顯示模式(重點)

2022-09-23 04:21:56 字數 768 閱讀 1946

標籤有三種顯示模式,三種顯示模式可以相互轉化。

塊級元素 / 行內元素 / 行內塊元素

12.1 塊級元素(block)

特點:霸道,自己獨佔一行

高度,寬度、外邊距以及內邊距都可以控制

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

是一個容器及盒子,裡面可以放行內或者塊級元素

注意:p裡面不能放塊級元素,特別是不能放div

h類文字型塊級標籤  、dt裡面也儘量不要放塊級元素

12.2 行內元素(inline)

特點:溫柔,一行可以顯示多個

高、寬直接設定無效

預設寬度就是她本身內容的寬度

**行內元素只能容納文字或者其他行內元素**

注意:連結裡面不能再放連結

特殊情況a 裡面可以放塊級元素,但是給a轉換一下塊級模式更安全。

12.3 行內塊元素(inline-block)

、、,即使不轉換模式,也預設 具有行內塊元素的特點。

特點:和相鄰行內元素(行內塊)在一行上,但是之間會有間隙。一行可以顯示多個(行內元素特點)

預設寬度就是它本身內容的寬度

高度,行高、外邊距以及內邊距都可以控制(塊元素特點)

12.4 三種模式的相互轉化

display: block;

display: inline;

display: inline-block;