標籤是最典型的塊元素。另外常見的塊元素有h1~h6、p、ul、ol、li等。
特點:
獨佔一行
高度、寬度、外邊距和內邊距都可以控制
寬度預設是父級寬度的100%
是乙個容器及盒子,裡面可以放行內元素或塊級元素
注:文字類的元素內不能使用塊級元素,例如p、h1~h6等。
標籤是最典型的行內元素。另外常見的行內元素有a、strong、em、i、del、ins等。
特點:
相鄰行內元素在同一行上,一行可以顯示多個
高度、寬度直接設定是無效的
預設寬度是它本身內容的寬度
裡面只能放文字或其它行內元素
注:img、input、td標籤同時具有塊元素和行內元素的特點,稱為行內塊元素。
特點:
相鄰行內元素或行內塊元素在同一行上,但是它們之間會有空白縫隙,一行可以顯示多個。(行內元素特點)
預設寬度是它本身內容的寬度。(行內元素特點)
高度、寬度、外邊距和內邊距都可以控制。(塊級元素特點)
元素模式
元素排列
設定樣式
預設寬度
包含塊級元素
一行只能放乙個塊級元素
可以設定寬度高度
父級元素的100%
可以包含任何標籤
行內元素
一行可以放多個行內元素
不可以直接設定寬度高度
它本身內容的寬度
可以容納文字或其它行內元素
行內塊元素
一行可以放多個行內塊元素
可以設定寬度高度
它本身內容的寬度
行內元素要先轉換模式,才能設定寬度、高度。
轉換為樣式
塊級元素
display: block;
行內元素
display: inline;
行內塊元素
display: inline-block;
css元素顯示模式的轉換
特殊形況下,我們需要元素模式的轉換,簡單理解 乙個模式的元素需要另一種模式的特性。例,想要增加鏈結的觸發範圍。把這個行內元素,轉換為塊級元素,就具有塊級元素的特性,就可以設定寬度和高度 例1 將 行內元素 轉換為 塊級元素 href 周杰倫a href 周杰倫a a 因為 a 元素是行內元素,所以給...
CSS元素顯示模式
行內元素 元素顯示模式轉換 單行文字垂直居中 導航欄案例 元素以什麼方式進行顯示.常見的塊元素有常見的行內元素有,等 相鄰行內元素在一行上,一行可以顯示多個 高和寬直接設定是無效的 預設寬度就是它本身內容的寬度 行內元素只能容納文字或者其他行內元素 行內元素中有幾個特殊的標籤 它們同時具有塊元素和行...
CSS元素顯示模式
元素顯示模式就是元素 標籤 以什麼方式進行顯示 比如標籤獨佔一行,標籤可以在一行裡放多個 顯示模式分為以下幾類 塊元素 行內元素 行內塊元素 常見的塊元素有 常見的行內元素有,等,其中標籤是最典型的行內元素 有的地方也將行內元素稱為內聯元素 行內元素有以下特點 相鄰行內元素在一行上,一行可以顯示多個...