css盒子模型,说简单也简单,用的时候也有不简单的。
其中margin的值可以为负值,并且为了实现margin,忽略父级的padding、border、甚至定位。这在布局上很有用,要注意。
------------
比如,div1,嵌套div2。按照直觉,div1有border和padding,里面的内容顶到头,不能超过外面的盒子(div1)吧?可惜不是,只要div2的margin是负的,如图浮动出了一样。
下面再看。
1 <style type="text/css">
2 div {
3 width: 100px;
4 height: 100px;
5 }
6 #div1 {
7 background-color: #F00;
8 border:100px solid #345;
9 padding:100px;
10 position: relative;
11 float: right;
12 }
13 #div2 {
14 background-color: #0F0;
15 /*margin-left: -200px;*/
16 position: absolute;
17 left: 0;
18 }
19 </style>
div1是相对定位,padding和border都是100px,在谷歌浏览器中,div2为绝对定位,left为0,就是div2在div1中,同时举例左边为0,按照自然直觉,应该是padding后为0,但是实验得知是,靠近border内侧为0,也就是说,绝对定位是跟外面的容器比,但是不看外面容器的padding,而是以border为参考。
再加上margin-left:-200px;那么,div2还要向左再走200px;
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=bbjiib&title=css盒模型中margin很牛逼