摘要：參考線示意圖如圖所示按箭頭所指方向使參考線變化的值都為正值。栗子沒(méi)在上加前效果如圖發(fā)生了堆疊。因此效果上來(lái)看便符合了預(yù)期如圖此布局便利用了原理，通過(guò)元素對(duì)相鄰元素位置的控制來(lái)達(dá)到預(yù)期的效果。

博客同步地址Margin與布局

在講此之前，必須知道什么是containing-box以及一些寬高度的一些關(guān)系，關(guān)于containing-box的概念以及與寬高度的關(guān)系可看我的前一篇文章CSS:關(guān)于元素高度與寬度的討論 系列文章(三)。

HTML

CSS

 .wrap {
    float: left;
    border: 2px solid #000;
  }
 .item1 {
    width: 100px;
    height: 100px;
    background: #fdf;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
 }
.item2 {
    width: 50px;
    height: 50px;
    background: #adf;
 }

能滿足原理1的條件只有一種，元素不設(shè)寬度且不在文檔流中，此時(shí)，父元素wrap產(chǎn)生的containing-box的寬高寬度等子元素border-box的寬高度加上外邊距的寬高度，也就是說(shuō)，子元素的margin值也是其containing-box的一部分。margin一共有兩類參考線，第一類是margin-top與margin-left的參考線,第二類是margin-bottom與margin-right的參考線,第一類margin的參考線是以其所處的containing-box的邊緣線為參考線,如上例所示,當(dāng)調(diào)整元素.item1的margin-top與margin-left的值時(shí),元素.item1所處的containing-box的大小也在發(fā)生變化因此其邊緣線也在不斷變化同時(shí)也就導(dǎo)致.item1元素自身的位置也在發(fā)生變化,看起來(lái)就是.item1自身發(fā)生了移動(dòng)。第二類margin的參考線是以元素自身的邊緣線(外邊距的外側(cè)為邊緣線)為參考線,同樣的,調(diào)整上例中的margin-bottom值,.item1的margin-bottom也在不斷的發(fā)生變化,也就是說(shuō)其自身邊緣線在不斷的移動(dòng),同時(shí)導(dǎo)致了.item2的移動(dòng)。根據(jù)上面的論述,我們可以得出結(jié)論,外邊距的調(diào)整也就等于讓其自身相對(duì)的參考線的位置在發(fā)生移動(dòng),同時(shí)導(dǎo)致相對(duì)于參考線運(yùn)動(dòng)的元素發(fā)生移動(dòng)。元素自身相對(duì)于containing-box的邊緣線移動(dòng)而移動(dòng),與元素自身為兄弟關(guān)系的元素相對(duì)于元素自身的邊緣線移動(dòng)而移動(dòng)。參考線示意圖如圖所示,按箭頭所指方向使參考線變化的margin值都為正值。
綜上，我們可以利用margin對(duì)元素自身進(jìn)行移動(dòng),同時(shí)也可讓其相鄰元素進(jìn)行移動(dòng),移動(dòng)的同時(shí)我們需要知道的是其所處的containing-box的大小也在發(fā)生變化。

綜上，當(dāng)元素寬高度等于內(nèi)容寬高度時(shí)，可通過(guò)調(diào)整內(nèi)容的margin值來(lái)調(diào)整其containing-box的大小，因?yàn)閏ontaining-box的變化也就會(huì)導(dǎo)致元素本身的移動(dòng)，也就是說(shuō)既可以移動(dòng)元素，也可調(diào)整元素與元素之間的間距。

   



.wrap {
    width: 100px;
    border: 2px solid #000;
    margin: 0 auto;
}
.wrap-inner {
    height: 50px;
    background: #fdf;
}

上例中,元素wrap-inner的border-box寬度加上margin的大小等于其containing-box的寬度,因此當(dāng)containing-box寬度固定,根據(jù)公式"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = width of containing block,調(diào)整其自身margin-left或margin-right值,便會(huì)使wrap-inner自身大小發(fā)生變化,margin-left為正值且值逐漸變大,則wrap-inner自身寬度逐漸變小,若margin-left為負(fù)值且逐漸變小,則wrap-inner自身寬度逐漸變大,margin-right同理。一定要注意這里的寬度繼承和width:100%是有本質(zhì)區(qū)別的，因?yàn)?b>width:100%就等于它的containing-box的100%和它的margin，border或者padding都木有關(guān)系，具體可看我的關(guān)于寬度與高度討論的系列文章三里的例子，羅嗦了一點(diǎn)，但是這里是容易犯錯(cuò)誤的地方。一定要注意，一定要注意，一定要注意?。?！。重要的事情說(shuō)三遍。

將margin-left和right調(diào)整為-10px,如圖,根據(jù)計(jì)算,wrap-inner變寬

將margin-left和right調(diào)整為10px,如圖,根據(jù)計(jì)算,wrap-inner變窄

綜上，當(dāng)元素寬或高度等于其containing-box的寬度或高度時(shí),且containing-box的寬度固定我們便可以利用margin對(duì)其進(jìn)行自身寬度大小的調(diào)整。也就是說(shuō)寬高度和containing-box有關(guān)系時(shí)，我們利用margin可進(jìn)行內(nèi)里元素大小的調(diào)整。

通常在布局中我們會(huì)遇到那些問(wèn)題呢？下面是我自己實(shí)踐中遇到的一些問(wèn)題

當(dāng)我們拿到一份設(shè)計(jì)稿，然后這份設(shè)計(jì)稿有像下面這樣的布局，整體居中，里面元素排一排，當(dāng)然布局的方式會(huì)有很多種，那么如果我們采用浮動(dòng)布局或者display:inline-block進(jìn)行布局會(huì)出現(xiàn)什么問(wèn)題呢，如圖我們可以看出，若采用上述兩種方式進(jìn)行布局，那么每個(gè)塊的寬度加上間隙，就會(huì)超出包含塊的寬度，當(dāng)然我們也可以將包含塊的寬度進(jìn)行增大以留下足夠的位置供元素?cái)[放，但是這種方法明顯是不可取的，那么如何解決這個(gè)位置不夠的問(wèn)題呢，可以看下面的栗子1 。

栗子
html

css

body {
  margin: 0;
}
.container {
  margin: 0 auto;
  width: 980px;
}
.inner-wrap {
  margin-left: -10px;
}
.inner {
  float: left;
  margin-left: 10px;
  width: 320px;
  height: 200px;
  background: #2df;
}

此布局便利用了原理2，利用負(fù)margin增加了inner-wrap的寬度，但不改變整體的寬的情況下，實(shí)現(xiàn)效果。如下

上面的例子僅僅只是實(shí)現(xiàn)了三列固定寬度的布局，這樣的布局當(dāng)屏幕寬度發(fā)生變化的時(shí)候便會(huì)出現(xiàn)問(wèn)題。因此我們便會(huì)有如下需求。

左右列固定，中間列自適應(yīng)

栗子
html

css

.main {
  float: left;
  width: 100%;
}

.main-content {
  height: 200px;
  background: #2da;
  margin: 0 200px;
}

.left,.right {
  float: left;
  width: 200px;
  height: 200px;
  background: #ccc;
}

.left {
  margin-left: -100%;
}

.right {
  margin-left: -200px;
}

效果如下,當(dāng)你縮小屏幕時(shí)，中間部分會(huì)隨著屏幕的縮小而縮小，另外兩部分寬度不變，同樣也滿足了主要內(nèi)容優(yōu)先加載的需求，可謂一舉兩得

分析

可以看出上面的布局利用了原理2，但是這里仍然會(huì)有幾個(gè)為什么要問(wèn)。

首先，為什么main里面一定要嵌套main-content,為什么不能直接使用單個(gè)main(假設(shè)1)？

其次，為什么main上一定要設(shè)置float:left，可以設(shè)置其他值嗎，如position:absolute(假設(shè)2)？

分析上面的布局之前，我們也要了解到上面的布局滿足了我們的什么需求，這里有兩點(diǎn)1.主要內(nèi)容優(yōu)先加載。2.主要內(nèi)容自適應(yīng)。這里我們可以分析一下，我們是怎樣達(dá)到上述兩個(gè)目的的。首先，要達(dá)到目的1，我們就的把div.main放在前面來(lái)寫，因?yàn)闉g覽器是從下到下渲染頁(yè)面的，放在前面的也就會(huì)先渲染。且由于div.main為文檔流中的塊級(jí)元素，因此會(huì)獨(dú)占一行，因此我們需要使其脫離文檔流，這樣才能使下面的元素能有機(jī)會(huì)上的來(lái)(這里之所以不考慮display:inline-block是因?yàn)閐iv.main的長(zhǎng)度會(huì)獨(dú)占一行，就算設(shè)置display:inline-block也沒(méi)有任何作用，下面的元素仍然上不來(lái))。而要達(dá)到目的2，需要用到原理2。同時(shí)在上面提出的兩個(gè)問(wèn)題中，有兩個(gè)假設(shè)。

假設(shè)1，如果使用單個(gè)main可不可以滿足上述兩個(gè)需求？我們可以試試。
html

css

body {
  margin:0;
}
/*這里注意需要改掉main的流方式，下面的元素才上的來(lái)*/
.main {
  float:left
  margin: 0 210px;
  height: 200px;
  background:#2da;
}
.left,.right {
  float: left;
  width: 200px;
  height: 200px;
  background: #ccc;
}
.left {
  margin-left: -100%;
}
.right {
  margin-left: -200px;
}

從中線分開(kāi)的黃色兩部分為各自為main的左右外邊距

從結(jié)果中，我們可以看出使用單個(gè)main是不行的，因?yàn)樵诓辉O(shè)寬度且元素不在文檔流中時(shí)，元素的寬度為0，不能滿足我們的需求，正因?yàn)槲覀兺瑫r(shí)要滿足1.main元素不在文檔流中2.元素不設(shè)寬度且在文檔流中。這兩個(gè)條件當(dāng)然是不能同時(shí)在一個(gè)main元素下能達(dá)到的，因此我們需要再嵌套一個(gè)main-content讓它來(lái)滿足條件2。這也就解釋了為什么一定要嵌套一個(gè)main-content。
解決了問(wèn)題1，現(xiàn)在我們來(lái)說(shuō)問(wèn)題2。

假設(shè)2,main上的float值可以換為position:absolute嗎？
同樣的，我們?cè)囋?br>html

css

body {
  margin: 0;
}
.main {
  position:absolute;
  width:100%;
}
.main-content {
  margin: 0 210px;
  height: 200px;
  background: #2da;
}
.left,.right {
  width: 200px;
  height: 200px;
  background:#ccc;
}
.left {
  float: left;
}
.right {
  float: right;
}

答案是可以的，只是我們需要改掉一些值，而當(dāng)main為float之所以要給div.left與div.right要設(shè)置margin-left值是因?yàn)楦?dòng)元素浮動(dòng)時(shí)，當(dāng)它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)框的邊框?yàn)橹埂６鵀楦?dòng)元素的div.main占據(jù)了整整一行，因此下面的浮動(dòng)元素div.left與div.right便被擠了下來(lái)，而設(shè)置它們的margin-left值便可以把它們移上去，這里便運(yùn)用了原理1。而當(dāng)我們把div.main的float值改為position:absolute時(shí)，便不會(huì)存在被擠下來(lái)的問(wèn)題，可直接設(shè)置div.left與div.right的float的值。效果如下。

如若只需要達(dá)到寬度自適應(yīng)的要求，那么，這時(shí)候便可以將div.main放在最后面且不用嵌套div.main-content,具體如何實(shí)現(xiàn)，大家可以自己試試。
兩列布局的道理也是差不多的，這里我就不寫了，大家可以看這篇文章
margin系列之布局篇

如下所示設(shè)計(jì)稿，在我們進(jìn)行布局的過(guò)程中，可能會(huì)出現(xiàn)border重合的情況，因?yàn)橐环矫嫖覀冃枰獙?duì)整個(gè)整體加上border，而另一方面我們又需要利用border隔開(kāi)那三個(gè)小塊。那么如果我們對(duì)每個(gè)小塊都加上右邊框，可以想象，最右邊就會(huì)出現(xiàn)邊框的堆疊而這不是我們希望看到的，所以，要如何解決這個(gè)問(wèn)題，可以看如下例子給出的答案。

栗子
html

  
1
  
2
  
3

css

ul {
  position:absolute;
  margin: 0;
  padding:0;
  list-style:none;
  border: 4px solid #c5c5c5;
}
li {
  float:left;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 4px solid #c5c5c5;
}

沒(méi)在li上加margin-right:-4px;前,效果如圖,發(fā)生了堆疊。

加了margin-right: -4px后，達(dá)到預(yù)期效果。因?yàn)榧由狭?b>ul的右邊框發(fā)生了移動(dòng)與第三個(gè)li的右邊框進(jìn)行了重疊。因此效果上來(lái)看便符合了預(yù)期,如圖

此布局便利用了原理1，通過(guò)元素對(duì)相鄰元素位置的控制來(lái)達(dá)到預(yù)期的效果。
而利用原理1也可以實(shí)現(xiàn)元素居中的布局，先讓元素上左各移50%，然后再讓設(shè)置元素的上左margin值設(shè)置為元素自身寬度的一半長(zhǎng)度，以對(duì)元素本身進(jìn)行移動(dòng)。便可達(dá)到元素居中放置的目的。

1.元素寬度等于containing-box寬度時(shí)。
可以通過(guò)調(diào)整margin的值來(lái)調(diào)整元素的寬度。
2.元素寬度與containing-box無(wú)關(guān)時(shí)。
可以通過(guò)調(diào)整margin的值來(lái)移動(dòng)元素的位置。