簡介
在 html4.01 中，元素通常可以分為塊級元素( "block-level element" ) 和內聯元素 ( "inline-level element" ) 兩大類。塊級元素單獨佔一行顯示，內部可以包含內聯元素或其他塊級元素；內聯元素不換行，內部只能包含其他內聯元素，在這篇文章中將只討論塊級元素。
(注：在 html5 中並沒有塊級元素和內聯元素的概念，而是通過內容模型( "content model" )規定了每個元素的分類( "content categories" )和允許包含的內容( "permitted content" )，例如：標籤在 html4.01 中是內聯元素，理論上不能巢狀諸如 之類的塊級元素，但是在 html5 中判斷是否合法要稍微複雜一點： 標籤的分類可能屬於流元素( "flow content" )或短語元素( "phrasing content" )，互動元素( "interactive content" )，可觸元素( "palpable content" )中的一種或多種，具體情況要根據上下文而定，允許包含的內容是 "transparent"，意為透明的，也就是說既可以包含 "flow content" 又可以包含 "phrasing content" ，根據父元素決定，如果單獨像 "a > div" 這樣巢狀，由於 標籤的分類屬於 "flow content"，因此這裡是合法的，如果像 "p > ins > a > div" 這樣巢狀，"a > div" 是否合法要看 "ins > div" 是否合法，由於 允許包含的內容也是 "transparent"，所以再看 "p > div" 是否合法，由於 允許包含的內容只能是 "phrasing content"，所以總的來說這裡是不合法的)
還需要注意的是：塊級元素和 css 中 的元素不是乙個概念，例如，元素預設的 display 值為 list-item，元素預設的 display 值為 table ，但是它們都是塊級元素，具有塊級元素的基本特徵，在同乙個水平流上只能顯示乙個元素。
塊級元素總是被表示為乙個矩形的盒子，稱為 "盒模型"，由 "外邊距+邊框+內邊距+盒子本身寬高" 組成，如圖所示：
"盒子本身寬高" 規定的部分稱為內容區域 "content box"，在 css 中設定的 "width" 和 "height" 就是作用於這個區域；
"盒子本身寬高+內邊距" 規定的部分稱為內邊距區域 "padding box"，在 css 中設定的 "background" 就是作用於這個區域；
"盒子本身寬高+內邊距+邊框" 規定的部分稱為邊框區域 "border box"；
"盒子本身寬高+內邊距+邊框+外邊距" 規定的部分稱為外邊距區域 "margin box"；
利用 css3 的 "border-sizing" 屬性可以更改 "width" 和 "height" 的作用區域，理論上講有如下四種情況：
/* 預設 */
/* 火狐曾經支援 */
/* 全部支援 */
/* 不支援 */
"border-sizing" 屬性被所有現代瀏覽器支援，ie 家族只有 ie8 以上才支援，並且需要新增各個瀏覽器的私有字首。
塊級元素的水平格式化
具體表現為：正常流中的塊級元素其水平部分的總和等於父容器的寬度，也就是說：左外邊距+左邊框+左內邊距+寬度+右內邊距+右邊框+右外邊距 = 父容器的寬度。這條規則主要涉及到 "margin"，"padding"，"border"，"width" 四個屬性，其中 "margin" 和 "padding" 的預設值均為0，"border" 的預設值為 "none"，"width" 的預設值為 "auto"，意為補齊，並且只有 "width"，"margin" 的值可以設定為 "auto"，它們又有以下幾種特殊情況：(僅討論水平方向上，"margin" 僅代表 "margin-left" 和 "margin-right")
"width" 和 "margin" 均固定：這種情況又稱為格式化屬性過分受限( "overconstrained" )，此時瀏覽器總會將 "margin-right" 強制為 "auto" 以撐滿父容器；
"width" 值固定，"margin-left" 或 "margin-righ" 只有一側值固定：瀏覽器表現為將另一側 "margin" 的值強制為 "auto" 以撐滿父容器；
"width" 值為 "auto"，兩側 "margin" 值固定：瀏覽器表現為 "width" 撐滿父容器除 "margin" 外的剩餘寬度；
"width" 值固定，兩側 "margin" 值為 "auto"：瀏覽器表現為 "margin-right" 和 "margin-left" 平分剩餘寬度以撐滿父容器，借用這種方法可以使塊級元素水平居中；
"width" 和 "margin" 均為 "auto"：瀏覽器表現為 "width" 撐滿父容器，"margin" 為0，並且只要 "width" 設定為 "auto"，無論是 "margin-left" 還是 "margin-right" 被設定為 "auto"，它們最後都會變成0；
根據這一準則，以及創造者背後的意圖，我們應該少設定盒子的寬度，避免其丟失流動性。
塊級元素的垂直格式化
具體表現為：塊級元素的高度會盡可能小，直到可以包裹其中的內容，或者也可以理解為塊級元素的高度由它的內容撐開。在垂直方向上，不但 "height" 的表現與 "width" 有區別，垂直方向的 "margin" 設定為 "auto" 時與水平方向的 "margin" 也不同，它將自動計算為0，另外垂直方向的 "margin" 會發生合併現象：
相鄰兄弟元素之間上者的 "margin-bottom" 和下者的 "margin-top" 合併，可以通過觸發 bfc 或在中間插入乙個內聯元素阻斷，防止合併發生；
父容器和它的第乙個子元素的 "margin-top" 合併，可以通過觸發 bfc 或在中間插入乙個內聯元素阻斷，防止合併發生，另外也可以設定父容器的 "border" 或 "padding" 進行阻斷，因為它們可以將兩者的 "margin" 分開，而子元素的就不行；
父容器和它的最後乙個子元素的 "margin-bottom" 合併，避免方法同上；
合併的規則是："正正取最大"，"負負取最小"，"正負則相加"。
同樣，根據這一準則，我們應該少設定盒子的高度，也是避免其丟失流動性。總的來說就是：頁面元素的寬度由外到內自適應，高度由內到外撐開。
關於 width 和 height
上面已經說了，盡量避免將 "width" 和 "height" 的值設定為固定，除此之外，還有一種流動性更好的替代方案，即 "min-width"，"max-width" 和 "min-height"，"max-height"，並且這四個屬性的相容性非常好，相容 ie8 以上以及所有現代瀏覽器，需要注意的是，它們和 "width"，"height" 之間有一套獨立的覆蓋規則，與常規的 css 優先順序無關：
即使 "width" 設定了 "!important" ，如果它超過了最大寬度，依然會被後者覆蓋，或者說截斷；
當 "max-width" 和 "min-width" 衝突時，"min-width" 的權重更大，與優先順序無關；
示例：
.test
.test關於 padding
關於 "padding" 要說的只有兩點：一是 "padding" 不能設定為負值，二是無論是水平還是垂直方向，"padding" 的百分比值都是基於父容器的寬度計算的。
示例：
/* css */關於 border.father
.son
"border-color" 有乙個很重要的特性，其預設值是 "transparent"，但是當設定了 "color" 後，其計算結果為 "color" 設定的顏色，擁有類似特性的屬性還有 "outline"，"box-shadow"，"text-shadow" 等。
示例：
.test關於 margin
和 "padding" 屬性一樣，"margin" 的百分比值也是基於父容器的寬度計算的，但是 "margin" 的值卻可以設定為負值，並且 "-margin" 有著相當大的作用：
一是處於文件流中的元素，當 "margin-top" 和 "margin-left" 設定為負值時，元素向著對應方向移動；當 "margin-bottom" 和 "margin-right" 設定為負值時，元素本身不動，而是將後面的元素拉過來，這時文件流中堆疊順序總是遵循預設的後來者居上的原則，也就是說後面的元素會覆蓋前面的元素。
二是處於文件流中的元素，如果先設定了 "position：relative" 和 "z-index" 改變堆疊順序，那麼覆蓋規則由 "z-index" 的大小決定。
三是使用 "position：absolute" 脫離文件流的元素，當 "margin-top" 和 "margin-left" 設定為負值時，元素向著對應方向移動；當 "margin-bottom" 和 "margin-right" 設定為負值時，元素本身不動，對後面的元素也沒有影響。
四是使用 "float" 脫離文件流的元素，如果負 "margin" 的方向與浮動方向相同，那麼元素向著對應方向移動；相反，那麼元素本身不動，而是將前面或者後面的元素拉過來。
五是當元素的 "width" 為 "auto" 時，負 "margin" 可以增大元素的寬度，使其超出父容器的寬度。
盒模型 塊級元素內聯元素
1 文件流概念 是瀏覽器解析網頁的乙個重要概念。對於乙個xhtml網頁，body元素下的任意元素，根據其先後順序，組成了乙個上下關係，這便是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置。文件流是瀏覽器的預設顯示規則。2 塊級元素與行內元素 得出區別的方法 1.寫兩個div，兩個span ...
css 行內 塊級 盒模型
行內元素 a span strong img input select 和其他元素都在一行上 高，行高及頂和底邊距不可改變 寬度就是它的文字或的寬度，不可改變。塊級元素 h1 h6 div p ul ol li dl dt dd 總是在新行上開始 高度，行高以及頂和底邊距都可控制 寬度預設是它的容器...
css盒模型？行內元素及塊級元素間的轉換？
在css中，每乙個網頁元素均有有個display屬性 預設有屬性值 用於確定此元素的型別。在此之前，先介紹一下盒模型,網頁需宣告doctype型別 瀏覽器辨識w3c盒模型 css盒模式 box model 主要以下5個屬性 width height padding border margin。tip...