负margin的理解(一)
之前有在看大牛的博客,然后看到负margin,会想那个负margin值是怎么计算出来的,还有啥时候设置负margin是有效果,现在做如下总结
HTML 结构
<div class="container"> <div class="main-wrap"> <h2>Main Content</h2> </div> <div class="aside sidebar"> <h2>Sidebar Content</h2> </div> </div>
main-wrap , aside 为盒子模型 上下排列
1、盒子上下排列,上面盒子没有设置float属性,下面盒子设置float属性
.container{width:960px; margin:0 auto;} .main-wrap{width:100%; background:#9C0}/* 重要 */ .aside{width:280px; background:#C09; float:left;margin-left:-280px;}/* 重要 */
效果如下:
下面盒子,无论负margin设置多少,只能在原来所在行浮动。(如上图 aside 只能在本行浮动)
2、盒子上下排列,上面盒子设置float属性,下面盒子没有设置float属性
.container{width:960px; margin:0 auto;} .main-wrap{float:left;width:100%; background:#9C0;}/* 重要 */
.aside{width:280px; background:#C09;margin-left: -115px;}/* 重要,其中margin-left 负值自己自行调整 */
效果如下:
下面盒子降跑向上面盒子所在位置,上面盒子盖在下面盒子上面。 (如上图main-wrap 就会盖在 aside 上面)
无论负margin设置多少,也只能在原来所在行浮动,负maring值越大超出浏览器显示,则直接隐藏不显示。
3、盒子上下排列,上下盒子都设置float属性,
.main-wrap{float:left;width:100%;background:#9C0;}/* 重要 */
.aside{float:left;width:280px;background:#C09;}/* 重要 */
效果如下:
下面盒子将紧挨着上面盒子浮动。
当负值正好大于等于下盒子宽度是下盒子跑到上盒子所在行
.main-wrap{float:left;width:100%; background:#9C0;}/* 重要 */ .aside{float:left;width:280px; background:#C09;margin-left: -280px;}/* 重要,其中margin-left 负值自己自行调整 */
效果如下: