一、行內元素、塊級元素的區別
1、塊元素(block element)一般都從新行開始,獨佔一行,它可以容納內聯元素和其他塊元素。
常見塊元素有div、ul、ol、li、dl、dt、dd、p、h1-h6、form、table、pre(格式化文本)等。
2、內聯元素(inline element)一般都是基於語義級(semantic)的基本元素。內聯元素只能容納文本或者其他內聯元素。
常見內聯元素有i、b、a、em、br、img、span、strong、cite等。
3、對於行內元素:
設置寬度width 無效。
設置高度height無效,可以通過line-height來設置。
設置margin只有左右margin有效,上下無效。
設置padding只有左右padding有效,上下則無效。
二、行內元素與塊級元素的相互轉化
1.行內元素轉化爲塊級元素的方法
(1)通過CSS設定浮動(float屬性,可向左浮動或向右浮動,僅在需要浮動的情況下設置)
(2)設定顯示display屬性爲“block”或“list-item”將內聯元素轉爲塊級,最常用的是display:block。
這樣行內元素就轉爲塊級元素,具備了塊級元素的屬性。
(3)還有一些屬性我們在設置的時候同時會使元素變爲塊級,比如position等,這只是在特定的情況下出現
(4)在ie6/ie7下只要設置zoom:1就可以爲元素設置寬高等塊級元素所具備的屬性
2.塊級元素轉爲行內元素
設置display:inline,轉化爲行內元素之後就具備了行內元素的屬性,不能設置寬高,但可以設置vertical
-align等。