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

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

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

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

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

這個(gè)理解非常重要！是等于其父元素的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是剩余的所有寬度?
因?yàn)楫?dāng)margin-left/right，width三個(gè)值均設(shè)置有固定寬度的時(shí)候，margin-right會(huì)根據(jù)包含塊的width自動(dòng)補(bǔ)齊

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

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

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

垂直格式化，有一個(gè)很重要的方面是會(huì)造成垂直相鄰?fù)膺吘嗪喜?，解決這個(gè)的方式見想要清晰的明白（一）中的BFC部分。

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

若width不是固定值，那么width的值則會(huì)增大
因?yàn)橐獫M足條件等于父元素width，負(fù)margin相當(dāng)于負(fù)值，width auto自動(dòng)增大
若width為固定值，那么margin-right則會(huì)auto增大來滿足這個(gè)條件

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

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

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

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

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

    

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

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

總而言之，水平上的七個(gè)元素的寬度和一定會(huì)等于父元素的寬度

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

當(dāng)你只有一把錘子一切看起來都像是顆釘子

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

內(nèi)容區(qū)
css假設(shè)每個(gè)元素都會(huì)生成一個(gè)或者多個(gè)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)框最高點(diǎn)和最低點(diǎn)的
基線
不同元素的基線位置不同，整個(gè)行框會(huì)有一個(gè)基線，行內(nèi)元素的位置是基于兩者基線對齊

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

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

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

因?yàn)閘ine-height是根據(jù)自己font-size設(shè)置，而不是父元素，所以將line-height設(shè)置為1em,該元素的line-height則會(huì)與相同（em單位是一般是相對與父元素進(jìn)行設(shè)置大?。?/p>

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

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

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

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

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

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