几个容易出错的css盒子模型细节-jerrylsxu

大体就是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 子元素无margin left/top为默认值 left/top为0

通过点击上面的按钮，可以得到以下结论：

问题四：元素的背景覆盖到哪个区域，border-box？padding-box还是margin-box？

这里要区分background-color和background-image两种情况。

来看以下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;
 }