CSS 之 margin知識點，cssmargin知識點

CSS 之 margin知識點，cssmargin知識點
1.margin的百分比值

　　普通元素的百分比maigin相對於容器元素的寬度(width) 進行計算的。

　　這裡我們在圖片外面設定一個寬高分別為800 * 600的容器。設定img{ margin: 10%; }

　　結果如下

　　　    

　　   結果margin值都是 800 * 10% = 80px; 所以這裡都是相對於容器的寬度計算的 容器的寬度計算 容器的寬度計算。說三遍

2.絕對位置的百分比maigin值

　　 

　　相對於第一個定位的祖先元素的 width值計算的。就是 parent 的 width = 1000px. 所以 margin = 100px；

3.可以使用margin 實現 2 ： 1 的自適應

　　比如 有兩個容器

　　　　 

　　這裡 box的高度沒有指定。 由於設定 margin 50% 。他的高度就是父容器的一半  所以高寬比就是 1 ： 2；

　　

4. margin 的重疊 為什麼重疊

　　A) margin 重疊的兩個特性

　　 　　只會發生在block的水平元素上。 （不包括 float 和 absolute元素）

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

　　B) 發生的情況

　　　　1> 相鄰的兄弟元素

　　　　2> 父級的第一個 和 最後一個子項目

　　　　3> 空的 block。 

例子一 相鄰的兄弟元素

　　　    

　　  這裡就是兩個兄弟元素 。

　　 這裡的 兩個p 之間只有一個em 沒有兩個em。 因為第一個margin-bottom 和 第二個的 margin-top 發生了重疊。

　　例子二 父元素和最後一個子項目 重疊

　　 

　　按照常規理論 son 和 父元素的 father 之間會 留出 80px的 margin-top值。但是實際上沒有。son的背景元素沒有變化 沒有留出80px；

　　這裡只是 給 父元素設定了 80px;

　　

　　父子 margin重疊的 條件

　　

　　　　那麼怎麼幹掉margin-top 重疊呢？

　　　　只要不讓它滿足那些條件就可以了。

　　     父元素添加 overflow: hidden;  border-top  padding-top （在他們之間加個空格）;

例子三 空block元素的 margin 重疊。

　　   　　

　　

　　注意 裡面沒有任何內容的空元素 。空元素髮生margin重疊的條件

　　

　4 margin重疊的計算規則。

　　A) 正正取大值

　　B) 正負值相加

　　C) 負負取最負。

5. margin 重疊的意義

　　A)  連續段落或列表之類 如果沒有margin重疊 收尾出現 1 ： 2 就會顯得不協調

　　B) web 中任何地方嵌套或直接放div 都不會影響原來的布局

　　C) 遺落的空的任意 多個p元素 不要影響原來閱讀的排版

 

實際應用

　　製作列表 的時候控制每個列表的距離裡面的

　　

　　.list{

　　　　margin-top : 15px;

　　　　margin-bottom: 15px;

　　}

　　更具有健壯性 即使最後一個 移除了 亦不會影響布局