用好负边距,省时又省力

说到负边距,广大的前端兄弟们肯定不会陌生,外边距 margin 的作用是增加容器与容器的间距,而负值则是减少间距。在平时的工作中,用好负边距,不仅能让我们的代码更优美,还能很大的提高工作效率。

以下一些例子是我平时工作上碰到的,还有些是在网上学习时见到的,一并列出来,和大家一块分享,一共6个,以后碰见了新的用法我会再更新上来。

1.在滑动门导航中的应用

这个例子中主要是用负边距去遮挡了 nav 的下边框,然后当哪个导航标签被选中的时候,替换下边框的颜色就行了,算是一种障眼法吧,哈哈!

sliding-doors

CSS:

.nav {
list-style:none;
*overflow:hidden;
}
.nav li {
*position:relative;
float:left;
padding:5px 20px;
margin-left:10px;
margin-bottom:-2px;
border:2px solid #65B453;
border-radius:4px;
background:#0C7823;
font-size:14px;
color:#fff;
}
.nav .hover {
background:#E9FBE4;
border-bottom:2px solid #E9FBE4;
color:#0F6621;
}
.content {
clear:both;
width:340px;
height:150px;
border:2px solid #65B453;
border-radius:4px;
background:#E9FBE4;
}

继续阅读 用好负边距,省时又省力