摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰?fù)膺吘嗪喜ⅲ鉀Q這個的方式見想要清晰的明白一中的部分。參考資料權(quán)威指南第三版為負值產(chǎn)生的影響和常見布局應(yīng)用布局圣杯布局雙飛翼布局深入理解和的基友關(guān)系深入理解中的行高

在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細的介紹兩種盒子的具體細節(jié)

(圖自《css權(quán)威指南》)

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

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

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

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

設(shè)置margin-left為10px,顯示正確，為什么margin-right是剩余的所有寬度?
因為當margin-left/right，width三個值均設(shè)置有固定寬度的時候，margin-right會根據(jù)包含塊的width自動補齊

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

height與width一樣，height定義了內(nèi)容區(qū)的高度，而不是元素框的高度。元素框上下的內(nèi)邊距，邊距，都會增加到height值里。

只有三個屬性可以設(shè)置auto，height，和margin-top/bottom。注意！這里如果margin-top和margin-bottom同時設(shè)置為auto，也不會垂直居中，而是默認為零。

垂直格式化，有一個很重要的方面是會造成垂直相鄰?fù)膺吘嗪喜ⅲ鉀Q這個的方式見想要清晰的明白（一）中的BFC部分。

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

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

灰色部分是body內(nèi)的一個盒子，圖二，沒有定框使用負margin后，發(fā)生偏移，并且寬度增加，圖三，定寬，發(fā)生偏移但是，寬度不增加，我們常常會發(fā)現(xiàn)出現(xiàn)莫名的水平滾動條，這里很有可能就是margin這小子在作祟

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

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

可以發(fā)現(xiàn)，灰色盒子的高度依舊保持著并且渲染出來了，但是CSS讀取的高度已經(jīng)減小，下面的元素自然往上移動了

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

    

      
身子
    
    
左邊小翅膀
    
右邊小翅膀

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

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

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

當你只有一把錘子一切看起來都像是顆釘子

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

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

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

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

//這個div調(diào)整line-height不會發(fā)生變化，因為里面沒有文字
 
//span的高度會隨著line-height的變化而變化
//說明行內(nèi)元素的高度是由line-height的支撐決定，行內(nèi)框的高度也等于line-height

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

    
        嘿嘿嘿，這里的line-height值為15px
    

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

css2.1規(guī)定margin-top和margin-bottom可以運用到不是行內(nèi)非替換元素的所有其他元素

行內(nèi)替換元素（如：img）元素會影響行高

將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

《CSS 權(quán)威指南 第三版》
《The Definitive Guide to Using Negative Margins》
margin為負值產(chǎn)生的影響和常見布局應(yīng)用
CSS布局 -- 圣杯布局 & 雙飛翼布局
CSS深入理解vertical-align和line-height的基友關(guān)系
深入理解CSS中的行高