css盒模型中margin很牛逼
程序员文章站
2022-03-14 12:22:38
css盒子模型,说简单也简单,用的时候也有不简单的。 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding、border、甚至定位。这在布局上很有用,要注意。 比如,div1,嵌套div2。按照直觉,div1有border和padding,里面的内容顶到头,不能超过外面 ......
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;
上一篇: 下辈子想做什么
下一篇: Word2003多个快速熟练使用技巧