1.margin的百分比值普通元素的百分比maigin相對(duì)于容器元素的寬度(width) 進(jìn)行計(jì)算的。

這里我們?cè)趫D片外面設(shè)置一個(gè)寬高分別為800 * 600的容器。設(shè)置img{ margin: 10%; }

結(jié)果如下

　  
結(jié)果margin值都是 800 * 10% = 80px; 所以這里都是相對(duì)于容器的寬度計(jì)算的 容器的寬度計(jì)算 容器的寬度計(jì)算。說(shuō)三遍

2.絕對(duì)定位的百分比maigin值

相對(duì)于第一個(gè)定位的祖先元素的 width值計(jì)算的。就是 parent 的 width = 1000px. 所以 margin = 100px；

3.可以使用margin 實(shí)現(xiàn) 2 ： 1 的自適應(yīng)

比如 有兩個(gè)容器

這里 box的高度沒(méi)有指定。 由于設(shè)置 margin 50% 。他的高度就是父容器的一半  所以高寬比就是 1 ： 2；

4. margin 的重疊 為什么重疊

A) margin 重疊的兩個(gè)特性

只會(huì)發(fā)生在block的水平元素上。 （不包括 float 和 absolute元素）

不考慮 wirte-mode(就是書寫格式)  只發(fā)生在 垂直方向(margin-top margin-bottom)

B) 發(fā)生的情況

1> 相鄰的兄弟元素

2> 父級(jí)的第一個(gè) 和 最后一個(gè)子元素

3> 空的 block。 

例子一 相鄰的兄弟元素

  這里就是兩個(gè)兄弟元素 。

這里的 兩個(gè)p 之間只有一個(gè)em 沒(méi)有兩個(gè)em。 因?yàn)榈谝粋€(gè)margin-bottom 和 第二個(gè)的 margin-top 發(fā)生了重疊。

例子二 父元素和最后一個(gè)子元素 重疊

按照常規(guī)理論 son 和 父元素的 father 之間會(huì) 留出 80px的 margin-top值。但是實(shí)際上沒(méi)有。son的背景元素沒(méi)有變化 沒(méi)有留出80px；

這里只是 給 父元素設(shè)置了 80px;

父子 margin重疊的 條件