中小企业网站建设服务,上海医疗器械网站前置审批,海口企业模板建站,wordpress资源分享css盒子模型#xff0c;说简单也简单#xff0c;用的时候也有不简单的。
其中margin的值可以为负值#xff0c;并且为了实现margin#xff0c;忽略父级的padding、border、甚至定位。这在布局上很有用#xff0c;要注意。
------------
比如#xff0c;div1#xff0…css盒子模型说简单也简单用的时候也有不简单的。
其中margin的值可以为负值并且为了实现margin忽略父级的padding、border、甚至定位。这在布局上很有用要注意。
------------
比如div1嵌套div2。按照直觉div1有border和padding里面的内容顶到头不能超过外面的盒子div1吧可惜不是只要div2的margin是负的如图浮动出了一样。
下面再看。 1 style typetext/css2 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?idbbjiibtitlecss盒模型中margin很牛逼
