说到负边距,广大的前端兄弟们肯定不会陌生,外边距 margin 的作用是增加容器与容器的间距,而负值则是减少间距。在平时的工作中,用好负边距,不仅能让我们的代码更优美,还能很大的提高工作效率。
以下一些例子是我平时工作上碰到的,还有些是在网上学习时见到的,一并列出来,和大家一块分享,一共6个,以后碰见了新的用法我会再更新上来。
1.在滑动门导航中的应用
这个例子中主要是用负边距去遮挡了 nav 的下边框,然后当哪个导航标签被选中的时候,替换下边框的颜色就行了,算是一种障眼法吧,哈哈!
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; }
HTML:
<ul class="nav"> <li class="hover">nav1</li> <li>nav2</li> <li>nav3</li> </ul> <div class="content"></div>
2.去除浮动列表的右边距
这个效果应该是我们平时最常用的了,以前都是给最后一个套上个 class ,但这样太麻烦,IE6 又不支持高级的选择器写法,利用负边距去做,真是省时又省力:)
CSS:
div { overflow:hidden; width:540px; border:2px solid #65B453; background:#0C7823; } ul { overflow:hidden; zoom:1; margin-right:-10px; list-style:none; } ul li { float:left; margin-right:10px; width:100px; height:100px; background:#E9FBE4; }
HTML:
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
3.去除列表li元素的下边框
注意不要为 ul 设置高度,可以在外层父元素设置想要的高度。
CSS:
ul { overflow:hidden; width:240px; border:1px solid #65B453; border-radius:4px; background:#E9FBE4; list-style:none; } ul li { padding:15px 10px; border-bottom:2px solid #65B453; margin-bottom:-2px; }
HTML:
<ul> <li>负边距测试</li> <li>负边距测试</li> <li>负边距测试</li> <li>负边距测试</li> <li>负边距测试</li> <li>负边距测试</li> </ul>
4.元素等高
这个主要的是要给元素加上一个大大的下内边距,然后利用相同的负边距去消除掉这个高度,这会让元素溢出容器,而最外的父容器定义了溢出隐藏,溢出的部分在负边距的最高点给切断了,所以就成了我们现在看到的这个样子。
CSS:
.test-wrap { overflow:hidden; width:100%; } .test-box { float:left; padding:30px; padding-bottom:400px; margin-left:20px; margin-bottom:-370px; width:360px; background:#65B453; font-size:20px; color:#fff; }
HTML:
<div class="test-wrap"> <div class="test-box"> <p>text</p> </div> <div class="test-box"> <p>text</p> </div> </div>
5.自适应布局
这个布局看这很像邮箱,边栏定宽,内容区域自适应。现在 wordpress 的默认布局也是这种负边距的方法,很值得一学。
CSS:
.header { width:100%; height:30px; background:#3FA156; } .main { float:right; margin-left:-300px; width:100%; background:#E9F5E9; border-bottom:2px solid #9BCE8C; } .main .content { margin-left:300px; height:700px; } .sidebar { float:left; width:300px; height:700px; background:#9BCE8C; }
HTML:
<div class="header"></div> <div class="main"> <div class="content"></div> </div> <div class="sidebar"></div>
6.对父元素水平垂直居中
先用绝对定位将元素的左上角定位到父级中间,然后利用元素宽高的一半的负边距将元素拉回到中间来。
CSS:
.test { position:absolute; left:50%; top:50%; margin:-150px 0 0 -150px; width:300px; height:300px; border:2px solid #65B453; border-radius:4px; background:#E9FBE4; }
HTML:
<div class="test"></div>
http://www.feelcss.com/good-use-of-negative-margins.html
相关推荐
毕业论文是每位大学生在学术生涯中的重要里程碑,其格式规范严谨,体现了研究的严谨性和...对于不熟悉Word排版的读者来说,这是一个非常实用的指南,可以帮助你在撰写论文的过程中省时省力,专注于内容的研究和呈现。
PageMaker是一款由Adobe公司开发的专业排版软件,主要用于创建高质量的多页布局,如杂志、报纸、书籍、手册等出版物...在日常工作中,了解和利用好这些DLL文件提供的功能,可以大大提高排版效率,实现省时省力的效果。
2、省时省力——写论文时如何利用word编辑参考文献 71 3、如何在Word中编辑参考文献 72 4、关于[1][2][3]类的脚尾注格式问题,与各位分享(修改) 73 5、利用word中的交叉引用来实现科技论文参考文献的引用 73 6、用...
Word 2021 的邮件合并功能是一种强大的批量处理工具,尤其适用于需要处理大量个性化文档的情况,例如制作...这种自动化办公的方法不仅省时省力,而且减少了出错的可能性,是教育工作者在处理大批量文档时的理想工具。
文档排版助手是一款备受编辑...通过“排版助手”这款软件,用户可以轻松实现上述各项功能,提高文档排版的专业性与效率,从而在繁重的文字工作中省时省力。无论是个人写作还是团队协作,它都是一个不可多得的辅助工具。
"创意蓝色精致的设计网站模板下载.zip"很可能是一套设计精美、兼容性强、富有创意且适合多种应用场景的网站模板,特别是对于那些希望快速搭建高质量网站的企业或个人来说,下载并使用这样的模板不失为一个省时省力的...
简单强大的横断面积计算函数(未注册时返回结果为乱码) ,可让您无需在CAD端成图,即可直接在EXCEL中得出横断面积,而且当您计算表中某个数据发生改变时,自动更新相关计算结果,让您工作省时省力 2、强大的横断面...