幾個容易出錯的css盒子模型細節 - tudas－IT工程師數位筆記本

文章出處

css是前端必須掌握的技能之一。其中的box模型，如圖所示：

大體就是border、margin、padding和content，概念挺好理解。但當盒子模型與其他屬性一塊使用時產生的現象，或許您還難以回答上來。下面來看看幾個容易搞錯的css盒子模型細節。

問題一：嵌套塊級元素時，子元素margin的參考標準是？具體來說就是父元素的content-box，padding-box還是border-box？

來看以下的例子：

        #box3
        {
            width:400px;
            height:400px;
            margin:20px;
            padding:20px;
            border:20px solid;
            background-color:#ccc;
            overflow:hidden;
        }
        #box3_3
        {
            width:200px;
            height:200px;
            margin:20px;
            padding:20px;
            border:20px solid #0f0;
            background-color:#f00;
        }

可以清楚看到，子元素margin以包含元素content-box為參考

問題二：overflow:hidden隱藏的是超出哪里的部分呢？具體來說就是超出content-box，padding-box還是margin-box會被隱藏？

依然來看一個例子，css如下：

        #box1
        {
            width:100px;
            height:100px;
            margin:20px;
            padding:20px;
            border:20px solid;
            background-color:#ccc;
            overflow:hidden;
        }
        #box1_1
        {
            width:200px;
            height:200px;
            background-color:#f00;
        }

通過以上例子可以知道。overflow:hidden，隱藏超出padding-box的部分

問題三：position:absolute定位參考點是什么？

我們都知道，當給一個元素應用position:absolute絕對定位后。會以最近擁有定位屬性的父元素為定位參考。同時可以通過left和top指定相對父元素左上角的偏移距離。那么這個左上角具體是指父元素哪里呢？元素本身又以哪個點來定位呢？

        #box2
        {
            position:relative;;
            width:400px;
            height:400px;
            margin:20px;
            padding:20px;
            border:20px solid;
            background-color:#ccc;
        }
        #box2_2
        {
            position:absolute;
            left:auto;
            top:auto;
            width:100px;
            height:100px;
            padding:20px;
            border:10px solid #0f0;
            background-color:#f00;
        }

通過點擊上面的按鈕，可以得到以下結論：

元素自身的參考點是最外圍的盒子，即margin-box，無margin則為border-box，以此類推。
left/top指定值后，參照父元素的padding-box左上角
left/top為默認值，子元素還在原來的位置上，即相對于父元素的content-box左上角

問題四：元素的背景覆蓋到哪個區域，border-box？padding-box還是margin-box？

這里要區分background-color和background-image兩種情況。

1.對于背景顏色，顏色會填滿border-box。
2.對于背景圖片，默認會填充padding-box。左上方從padding-box的區域開始填充，右側和下側會超出到border-box的區域，但不會超出到margin-box
3.在css3中，可以通過background-origin更改背景圖片的填充區域

來看以下css，

        #box4
        {
            width:100px;
            height:100px;
            margin:20px;
            padding:20px;
            border:20px dotted;
            background-color:#ccc;
            overflow:hidden;
        }
        #box5
        {
            width:400px;
            height:300px;
            margin:20px;
            padding:20px;
            border:20px dotted;
            background-color:lightblue;
            background-image:url('http://images.cnitblog.com/i/207603/201404/151302359783891.png');
            background-repeat:no-repeat;
            overflow:hidden;
        }