想要清晰的明白（二）CSS 盒模型Block box與Line box

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

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的同行特性。

參考資料

《CSS 權威指南 第三版》
《The Definitive Guide to Using Negative Margins》
margin爲負值產生的影響和常見佈局應用
CSS佈局 -- 聖盃佈局 & 雙飛翼佈局
CSS深刻理解vertical-align和line-height的基友關係
深刻理解CSS中的行高