首页 > > 网页制作 > css >

css盒模型中margin很牛逼

2018-09-18 06:32:51来源：博客园阅读 ()

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;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有