塊級元素與內聯元素

看的這樣的標題你可能會在心裡不禁的問：不是還有行內塊元素嗎？不是還有 inline-block 嗎？

說到塊級元素，大家肯定不會陌生，常見的塊級元素有：div、li、table等等。需要注意的是，所謂的塊級元素和 display:block；不是乙個概念！！！為什麼這麼說呢？就如上面提到的 li 和 table ，他們都是塊級元素，但是他們的 display 屬性並不是 block，而是 list-item 和 table 。所以，一直以來認為塊級元素就是 display:block；的認知是不正確的。

塊級元素有兩個基本的特徵：獨佔一行、可以設定寬高。

但是，有些元素還有一些比較特殊的特徵，比如 li 還有預設的專案符號。

哎？元素不就是分為塊級元素和內聯元素嗎？那為什麼作為塊級元素的 li 跟其他的塊級元素有所不同呢？ 

從上面了解到，元素只有兩種，一種是塊級遠古三，另一種是內聯元素。那麼相應的，在最初的時候，盒子模型也就只有兩種，一種是塊級盒子，另一種是內聯盒子。塊級盒子負責結構，內聯盒子負責內容。原本以為，塊級盒子一套就夠用了，也就是說，所有的塊級元素用的都是同乙個盒子模型，但是，隨著需求的改變以及這門語言的發展，派生出一些附加盒子。

所有的塊級元素都有乙個主塊級盒子，但是，list-item 除此以外還有乙個附加盒子，具體的學名為 marker box，專門用來存放圓點、數字這些專案符號。

需要注意的是，ie 的偽元素不支援 list-item。

將焦點回到最初的問題上，為什麼只有塊級元素和內聯元素？那麼我們一直使用的行內塊元素 inline-block 到底是怎麼回事？

都知道行內塊元素的特性就是介乎於塊級元素與內聯元素之間，元素可以設定寬高，元素在同一行排列。然而，每個元素都由兩個盒子組成，乙個是外在盒子，另乙個是內在盒子（容器盒子）。外在盒子負責元素是否獨佔一行，容器盒子負責寬高和內容。

有了上面的這套理論，dipslay:block 的元素實際上就是由乙個外在的塊級盒子和乙個內在的塊級盒子組成的。

類似的，display:inline-block 就是由乙個外在的內聯盒子和內在的塊級盒子組成的，所以，它具備了內容不會獨佔一行，元素可以設定寬高的特性。

然而，display:inline 元素則是由兩個內聯盒子組成的。

內聯元素與塊級元素

一 行內元素與塊級元素的區別 1 塊級元素的特點 1 總是從新行開始 2 高度，行高 外邊距以及內邊距都可以控制。3 寬度預設是容器的100 4 可以容納內聯元素和其他塊元素。2 內聯元素的特點 1 和相鄰行內元素在一行上。2 高 寬無效，但水平方向的padding和margin可以設定，垂直方向的...

塊級元素與內聯元素

塊級元素 block element div 最常用的塊級元素 dl 和dt dd搭配使用的塊級元素 dl dt dd是乙個組合型標籤 標籤標準用法，如下 標題1dt 列表1dd 列表2dd dl 同時dd內可以放標籤使用。form 互動表單 h1 大標題 hr 水平分隔線 ol 排序表單 p 段落...

內聯元素與塊級元素

在標準文件流裡面，也就是沒有其它一些css樣式控制的情況下，塊級元素會佔據一行，也就是寬頻始終是與瀏覽器寬度一樣，與內容無關。而行內元素 也叫內聯元素 的寬度只與內容有關。內聯元素 inline element 一般都是基於語義級 semantic 的基本元素。內聯元素只能容納文字或者其他內聯元素，...