负margin总结


有些问题还是要在实践中才知道问题出现在哪了,怎么出现,怎么解决,如果当时有问题,没时间的话,先保留,遇到了,有时间了,拿出来再晒晒。这不,今天逛知乎的时候,发现了一个已久的、埋藏在心里的知识点。遇到效果实现,每次都是走自己熟悉的,其实有条捷径的,现在看起来也不晚,利用前辈的指示以及我自己的理解,再总结一下。

案例1:负margin实现两列等高布局

场景1 :大DIV 包含 两个 左右小的div.
实现 :
.大DIV{width,background}
.小的div 分别设置{float,background,width}
结果 :大DIV 的颜色没出来.
解决 :大DIV 设置overflow: hidden;
纠正 :就不用设置高度啦,但是左侧的111,怎么适应右侧的高度呢,往下看

接上:纠正处 ,设置
.左,.右{padding-bottom: 99999px;margin-bottom: -99999px;}


案例2:选项卡demo
demo
一般的思路是每个菜单栏设置边框,选中的状态没有下边框

其实还可以,边框不是上面菜单栏的,而是下面内容块的:
demo2
只要给菜单栏设置margin-bottom:-1px就可以让下面的内容块上移1px,刚好让菜单栏的背景色盖住那个1px的边框。(如果选中状态没有背景色,就悲剧了)


案例3:负margin加宽元素

再看一个width没有设置,通过负margin加宽的元素的布局,这是很常见的例子,如果不用负margin,就会很麻烦呢


.c { margin-right: -26px;overflow: hidden;   background: #ccc; }/ /*这是一个临界值,只要比它还小就行*/
.a {   width: 224px;  margin-right: 30px;   background-color: red; }

https://github.com/riskers/blog/issues/2


Carpe Diem and Do what I like