舉例：
請把下面二行**放進body標籤裡：
div1
div1
瀏覽器的呈現效果：
div1
div1
這二個div佔據了二行空間，叫做塊級元素(block)。
再把下面二行**也放進body標籤裡：
span1
span2
瀏覽器的呈現效果：
span1 span1
這兩個span並列在一行，叫做內聯元素(inline)。
塊級元素和內嵌元素的區別：
· 塊級元素 用來搭建**架構、布局、承載內容，如：div、ul、li、dl、dt、dd、h1-h6、p、address……
內聯元素 用在文字之中的某一行的修飾，如：a、span、strong、sub、sup、img……
· 塊級元素是盒子，盒子是有寬高的，即不管裡面有多少東西，外部就可以設定其寬高。
內聯元素是袋子，其寬高由裡面的東西撐起來的。
· 塊級元素和內嵌元素之間互相轉換，轉換的**如下：
display:block; /* 轉成塊元素 */
display:inline; /* 轉成內嵌元素 */
· 塊級元素和內嵌元素對於css的呼叫規則：
1. 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：
—— 對
—— 對
—— 錯
2. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：
h1-h6、p、dt。
—— 錯
—— 錯
3. li內可以包含div標籤/父級ul或者是ol
li和div標籤都是裝載內容的容器，地位平等，沒有級別之分。
4. 塊級元素與塊級元素並列、內嵌元素與內嵌元素並列：
—— 對
—— 對
—— 錯
塊元素 內嵌 浮動
1 塊元素的特徵 1 預設獨佔一行 2 沒有寬度時預設撐滿一行 3 支援所有的css命令 2 內嵌的特徵 1 同排可以繼續跟同類的標籤 2 內容撐滿寬高 3 不支援高度 4 不支援上下的margin 5 換行被解析 3 塊元素和內嵌的轉換 display block顯示為塊元素 使內聯元素具備塊元素...
css 塊級元素和行內元素的區別
子非魚87 塊級元素會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化.塊級元素可以設定width,height屬性.行內元素設定width,height屬性無效.塊級元素即使設定了寬度,仍然是...
css行內元素和塊元素
塊元素 總是在新行上開始 高度，行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 行內元素 和其他元素都在一行上 高，行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度，不可改變 內聯元素只能容納文字或者其他內聯元素 塊級元素 div ...