Block Box

(圖自《css權威指南》)

display ： block 、 list-item 以及 table 會讓一個元素成為塊級元素。
 在Block Box中，會被水平格式化，垂直格式化，那我們就分垂直和水平來講講

水平格式化

如何計算其寬度

正常流中，塊級元素框的水平部分 = 其父元素的width = margin-left+margin-right + padding-left+padding-right+ border-left+border-right+自身width

這個理解非常重要！是等於其父元素的width！

width & margin & auto

1. 為什麼.a中設定padding為auto，均invalid？ 在padding-left/right,margin-left/right,border-left/right,width（我們簡稱下水平7大屬性）中只有margin和width的值可能為auto

2. 設定margin-left為10px,顯示正確，為什麼margin-right是剩餘的所有寬度?因為當margin-left/right，width三個值均設定有固定寬度的時候，margin-right會根據包含塊的width自動補齊

3. 利用margin：0 auto 居中所以，利用這種方式居中的時候，必須是要設定居中元素的寬度，這樣左右margin的值便會相等，從而引起的居中，這個和text-align：center只能塊級元素的內聯內容設定居中是不一樣的。

垂直格式化

height與width一樣，height定義了內容區的高度，而不是元素框的高度。元素框上下的內邊距，邊距，都會增加到height值裡。

只有三個屬性可以設定auto，height，和margin-top/bottom。注意！這裡如果margin-top和margin-bottom同時設定為auto，也不會垂直居中，而是預設為零。

垂直格式化，有一個很重要的方面是會造成垂直相鄰外邊距合併，解決這個的方式見想要清晰的明白（一）中的BFC部分。

負margin

水平方向

問： 水平7大屬性相加要等於父元素的width，那margin負值會造成什麼？

若width不是固定值，那麼width
 
的值則會增大
因為要滿足條件等於父元素width，負margin相當於負值，width auto自動增大
若width為固定值，那麼margin-right則會auto增大來滿足這個條件

灰色部分是body內的一個盒子，圖二，沒有定框使用負margin後，發生偏移，並且寬度增加，圖三，定寬，發生偏移但是，寬度不增加，我們常常會發現出現莫名的水平滾動條，這裡很有可能就是margin這小子在作祟

垂直方向

黑色是接在灰色div後的一個div,可以看到，margin-bottom為負值，不會造成元素本身的移動，而是造成兄弟元素往上移動，就像我不動，拉了下面的人一把，而margin-top為負值，就像我們排成一隊，然後像兔子跳一樣一起往前面跳了一步。

從圖二也可以看出來，黑色盒子對灰色盒子發生了覆蓋，因為瀏覽器總是按從前到後的順序顯示元素，所以文件中後出現的正常流元素可能會覆蓋較早出現的元素。

可以發現，灰色盒子的高度依舊保持著並且渲染出來了，但是CSS讀取的高度已經減小，下面的元素自然往上移動了

負margin與float應用 ——雙飛翼

不知道為啥每次看到這名字，就....莫名的想笑，雅蠛蝶

    <div class="main">
      <div class="main-container">身子</div>
    </div>
    <div class="left">左邊小翅膀</div>
    <div class="right">右邊小翅膀</div>

分析

margin負值導致兩個翅膀是覆蓋在div.main上,我們看到的藍色部分是.main-container,margin-left:-100%,相當於是把第二排的第一個，從後面拉動一個100%距離，也就是到了第一排和第一排第一個一起站著，第二排第一個走了，第二排第二個（也就是div.right）自動補到他的位置上，這時候又來了個margin-left：-200px利用到第二排第二個上，往前拉動200px的距離，於是就到了現在div.right的位置

總而言之，水平上的七個元素的寬度和一定會等於父元素的寬度

Line Box

每一行稱為一條Line Box，它又是由這一行的許多inline-box組成，它的高度可以直接由line-height決定，line boxes的高度垂直堆疊形成了containing box的高度，就是我們見到的div或是p標籤之類的高度了。

基礎概念

匿名文字

<div>當你只有一把錘子<span>一切看起來</span>都像是顆釘子</div>

未包含在行內元素的字串（當你只有一把錘子，都像顆釘子）就叫匿名文字

內容區 行內框 間距

內容區
css假設每個元素都會生成一個或者多個Box，稱為元素框，元素框中心有內容區，內容區外周圍包括了padding，border，margin，但是，替換元素是包括外邊距，內邊距，邊框的。
行間距
行間距是font-size與line-height的差值，被分成兩半在內容區的上下
行內框
非替換元素，行內框高度=line-height
替換元素，行內框高度=內容區寬度（行間距不應用到替換元素）
行高
兩行文字基線的距離
行框
一行有很多行內框，行框是包含這一行行內框最高點和最低點的
基線
不同元素的基線位置不同，整個行框會有一個基線，行內元素的位置是基於兩者基線對齊

vertical-align(垂直對齊)

該屬性 定義 行內元素的基線相對於該元素所在行的基線的垂直對齊的方式。
只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用.
同時也可以知道，改變其，會影響到行內框的位置，從而會影響到一整行行內元素的位置

需要注意vertical-align為數值時，會讓文字上下移動，當其為百分比時是針對font-size的百分比

line-height（行高）

<div style="width:100px;height:10px"></div>
//這個div調整line-height不會發生變化，因為裡面沒有文字
<span style="line-height:10px;border：1px solid green"></span> 
//span的高度會隨著line-height的變化而變化
//說明行內元素的高度是由line-height的支撐決定，行內框的高度也等於line-height

管理line-height

因為line-height是根據自己font-size設定，而不是父元素，所以將line-height設定為1em,該元素的line-height則會與相同（em單位是一般是相對與父元素進行設定大小）

<div style="font-size:12px;line-height:12px">
    <span style="font-size:15px;line-height:1em">
        嘿嘿嘿，這裡的line-height值為15px
    </span>
</div>

margin padding border對行高的影響

• 行內元素其padding、margin、border-top、border-bottom 不會增加行高。padding會覆蓋；margin將重置為0；border-top和border-bottom同樣會覆蓋。

• css2.1規定margin-top和margin-bottom可以運用到不是行內非替換元素的所有其他元素

• 行內替換元素（如：img）元素會影響行高

inline-block

將物件呈現為inline物件，但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。