说到负边距,广大的前端兄弟们肯定不会陌生,外边距 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
相关推荐
js打印设置页边距,设置页眉页脚,初始化页眉页脚,左右边距
本人查阅好多资料,上了N多网站,始终找不到关于Fastreport动态调整页边距的代码,现终于找到方法,共享出来,愿与各位菜鸟共享。希望对大家能有所帮助。好的资源大家一起共享。用fastreport 4.8.5调试通过。
盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距
注意:内边距padding不允许使用负值 padding:5px /*四个方向内边距为5像素宽度*/ padding:5px 3px /*上下内边距为5像素,左右内边距为3像素*/ padding:5px 3px 4px /*上内边距为5像素,左右内边距为3像素,下内边距...
23. 页边距.swf
带内边距的UILabel,支持通过StoryBoard面板直接设置内边距,可以直接看到效果
使用TextView控件的时候由于其内边距导致与UI效果相差甚远。很是让不少程序猿难受,也包括我自己因为这个原因也没少和UI设计师打嘴仗。于是最近写了一个自定义的NoBroderTextView去除了TextView上下内边距。
实现EXCEL页边距调整批处理的关键代码
设置编辑框左右边距.e.rar 设置编辑框左右边距.e.rar 设置编辑框左右边距.e.rar 设置编辑框左右边距.e.rar 设置编辑框左右边距.e.rar 设置编辑框左右边距.e.rar
java 设置 打印机 边距 教程
易语言源码设置编辑框左右边距.rar 易语言源码设置编辑框左右边距.rar 易语言源码设置编辑框左右边距.rar 易语言源码设置编辑框左右边距.rar 易语言源码设置编辑框左右边距.rar 易语言源码设置编辑框左右边距....
易语言设置编辑框左右边距源码,设置编辑框左右边距
Margin:边距 Padding :空白 Border:边框 Float:浮动属性
word怎么设置页边距,是一个非常有学问的技术,欢迎下载
固定设置打印word时的页边距,分别是1 1 1 1.22
完整版设置编辑框左右边距.rar
Word2021:页边距的两种设置方式.docx
设置编辑框左右边距,为演示效果明显一点左右边距设定为5个像素
js鼠标悬停提示,支持边距自适应。 div+css+style。使用方便