margin系列問題

margin系列之百分比

假設一個塊級包含容器，寬1000px，高600px，塊級子元素定義 

margin:10% 5%;

 大家說說 

margin

的 

top, right, bottom, left

 計算值最終是多少？

CSS:

#demo{
    width: 1000px;
    height: 600px;}#demo p{
    margin: 10% 5%;}
           

HTML:

<div id="demo">
    <p>恩，注意看我所在的位置。</p></div>
           

事實告訴我們結果是 

100px 50px 100px 50px

，不論結果是否符合你的預期，我們先來看demo驗證一下：margin百分比結果猜想，當然，你也根據上面還原的代碼自己建立一個例子。 因為預設的書寫模式時橫向，是以margin的參照物是父元素的寬

當書寫模式變成縱向的時候，其參照将會變成包含塊的高度。我們改變一下上面例子中的CSS書寫模式：

CSS:

#demo{
    -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */}
           

在 #demo 中添加這2句，其它code不變。也有個例子供觀：書寫模式影響margin百分比的參照對象。

恩，這回的結果是 

60px 30px 60px 30px

 ，因為其參照對象變成了包含塊的高度。

margin系列之外邊距折疊

現在我們來解釋一下到底什麼是margin折疊？

在CSS中，兩個或以上的塊元素（可能是兄弟，也可能不是）之間的相鄰外邊距可以被合并成一個單獨的外邊距。通過此方式合并的外邊距被稱為折疊，且産生的已合并的外邊距被稱為折疊外邊距。

處于同一個塊級上下文中的塊元素，沒有行框、沒有間隙、沒有内邊距和邊框隔開它們，這樣的元素垂直邊緣毗鄰，則稱之為相鄰。

什麼是垂直邊緣毗鄰？

• 元素的上外邊距和其屬于正常流中的第一個孩子的上外邊距。
• 元素的下外邊距和其屬于正常流中的下一個兄弟的上外邊距。
• 屬于正常流中的最後一個孩子的下外邊距和其父親的下外邊距，如果其父親的高度計算值為

  auto

  。
• 元素的上、下外邊距，如果該元素沒有建立新的塊級格式上下文，且 

  min-height

   的計算值為零、

  height

   的計算值為零或 

  auto

  、且沒有屬于正常流中的孩子。

說得很清楚了，我想是的。你可能需要注意的是發生 

margin

 折疊的元素不一定是兄弟關系，也能是父子或祖先的關系。 解決邊距折疊問題： 1把塊狀元素改成非塊狀 （浮動 定位等） 2  

overflow:hidden

  3用邊框隔開他們

margin系列之keyword auto

不過你可能也發現了不論是 

margin: auto;

 還是 

margin: 0 auto;

 效果都是一樣的，都是讓 #demo 水準居中了，但縱向并沒有任何變化。

大家都知道 

margin

 是複合屬性，也就是說 

margin: auto;

 其實相當于 

margin: auto auto auto auto;

，

margin: 0 auto;

相當于 

margin: 0 auto 0 auto;

，四個值分别對應上右下左。至于CSS中的上、右、下、左順序就不做贅述了。

根據規範，

margin-top: auto;

 和 

margin-bottom: auto;

，其計算值為0。這也就解釋了為什麼

margin: auto;

 等同于 

margin: 0 auto;

。

margin系列之内秀篇

1 margin在清單中的作用 http://demo.doyoe.com/css/margin/text-list.htm 使用margin-bottom=-1px  消掉清單的下邊框   不固定高度，overflow：hidden 2.margin在圖檔清單中的作用 http://demo.doyoe.com/css/margin/img-list-2.htm 使用margin-right=-100px；不固定寬度，overflow：hidden 去掉最右邊的li的margin-right=10px

margin系列之bug巡演

解決ie6下雙邊距問題 1.

給IE6在會 double margin 的方向上設定小一倍的margin值，如下： 但是這種方法不夠靈活，每次改變margin的值都需要手動改變這個

CSS

#demo p{
    float:left;
    margin-left:10px;
    _margin-left:5px;}
           

2.display:inline，設定為行内樣式。

CSS

#demo p{
    _display:inline;
    float:left;
    margin-left:10px;}
           

margin系列之内秀篇（二）

1用margin實作1px圓角

HTML

<div id="demo">
    <a href="?"><span>1px圓角</span></a>
    <a href="?"><span>确定</span></a>
    <a href="?"><span>取消</span></a></div>                

CSS

#demo a,#demo span{
    display:inline-block;
    vertical-align:top;}#demo span{
    margin:1px -1px; /* 關鍵規則 */}
           

http://demo.doyoe.com/css/margin/radius.htm
           

2已知寬高元素水準垂直居中

HTML

CSS

#demo{
    position:absolute;
    top:50%;
    left:50%;
    width:300px;
    height:300px;
    margin-top:-150px;
    margin-left:-150px;}
           

借助絕對定位                http://demo.doyoe.com/css/margin/alignment.htm      

先通過 

top/left

 将 

#demo

 的絕對定位流起始位置設定為目前屏的中心點，此時 

#demo

 的左上角這個點其實已經是相對于頁面水準垂直居中了，由于它的寬度和高度都是300px，是以從起始位置向右下各延伸300px後才是整個 

#demo

 的真正位置。此時整個 

#demo

 其實并不是水準垂直居中的，除非我們将 

#demo

 的中心點放在目前屏的中心點上 是以我們隻需要将 

#demo

 相對自身向上偏移150px，向左偏移150px，就能夠實作将自身的中心點放在目前屏的中心點上，也就實作了自身在目前屏的水準垂直居中。

3.tabstrip底邊線重合

對，我們要做的就是 tab 項與底邊線重合，這應該是我們常見的場景了，

margin

 仍然是最佳選擇。先來看代碼：

HTML

<div id="demo">
    <a href="?">分類一</a>
    <a href="?" class="on">分類二</a>
    <a href="?">分類三</a>
    <a href="?">分類四</a></div>
           

CSS

#demo{
    border-bottom:1px solid #aaa;}#demo a{
    display:inline-block;
    margin-bottom:-1px;
    border:1px solid #aaa;}#demo .on{
    border-bottom-color:#fff;}
           

要實作 

tab

 中各項與包含塊的底邊線重合，重點在于将包含塊的底邊線向上偏移1px，這樣就與

tab

 各項的底部重合在一起。http://demo.doyoe.com/css/margin/tab.htm 4：雙邊線問題

margin-bottom:1px;
    border-bottom:1px solid #ccc;使用 margin和border結合
           

http://demo.doyoe.com/css/margin/double-lines.htm