`
liuguofeng
  • 浏览: 462679 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

用好负边距,省时又省力

    博客分类:
  • css
 
阅读更多

说到负边距,广大的前端兄弟们肯定不会陌生,外边距 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;
}

HTML:

<ul class="nav">
  <li class="hover">nav1</li>
  <li>nav2</li>
  <li>nav3</li>
</ul>
<div class="content"></div>

猛击demo ☻

2.去除浮动列表的右边距

这个效果应该是我们平时最常用的了,以前都是给最后一个套上个 class ,但这样太麻烦,IE6 又不支持高级的选择器写法,利用负边距去做,真是省时又省力:)

remove-the-list-right-margin

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>

猛击demo ☻

3.去除列表li元素的下边框

注意不要为 ul 设置高度,可以在外层父元素设置想要的高度。

remove-the-list-last-li-bottom-margin

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>

猛击demo ☻

4.元素等高

这个主要的是要给元素加上一个大大的下内边距,然后利用相同的负边距去消除掉这个高度,这会让元素溢出容器,而最外的父容器定义了溢出隐藏,溢出的部分在负边距的最高点给切断了,所以就成了我们现在看到的这个样子。

contour

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>

猛击demo ☻

5.自适应布局

这个布局看这很像邮箱,边栏定宽,内容区域自适应。现在 wordpress 的默认布局也是这种负边距的方法,很值得一学。

adaptive-layout

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>

猛击demo ☻

6.对父元素水平垂直居中

先用绝对定位将元素的左上角定位到父级中间,然后利用元素宽高的一半的负边距将元素拉回到中间来。

horizontal-and-vertical-center

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>

猛击demo ☻

http://www.feelcss.com/good-use-of-negative-margins.html

分享到:
评论

相关推荐

    毕业论文格式详解(以图片来说明,是人都能看懂)

    毕业论文是每位大学生在学术生涯中的重要里程碑,其格式规范严谨,体现了研究的严谨性和...对于不熟悉Word排版的读者来说,这是一个非常实用的指南,可以帮助你在撰写论文的过程中省时省力,专注于内容的研究和呈现。

    pagemaker专业排版软件

    PageMaker是一款由Adobe公司开发的专业排版软件,主要用于创建高质量的多页布局,如杂志、报纸、书籍、手册等出版物...在日常工作中,了解和利用好这些DLL文件提供的功能,可以大大提高排版效率,实现省时省力的效果。

    word使用技巧大全

    2、省时省力——写论文时如何利用word编辑参考文献 71 3、如何在Word中编辑参考文献 72 4、关于[1][2][3]类的脚尾注格式问题,与各位分享(修改) 73 5、利用word中的交叉引用来实现科技论文参考文献的引用 73 6、用...

    献给老师 Word 2021批量处理成绩单.docx

    Word 2021 的邮件合并功能是一种强大的批量处理工具,尤其适用于需要处理大量个性化文档的情况,例如制作...这种自动化办公的方法不仅省时省力,而且减少了出错的可能性,是教育工作者在处理大批量文档时的理想工具。

    文档排版助手

    文档排版助手是一款备受编辑...通过“排版助手”这款软件,用户可以轻松实现上述各项功能,提高文档排版的专业性与效率,从而在繁重的文字工作中省时省力。无论是个人写作还是团队协作,它都是一个不可多得的辅助工具。

    创意蓝色精致的设计网站模板下载.zip

    "创意蓝色精致的设计网站模板下载.zip"很可能是一套设计精美、兼容性强、富有创意且适合多种应用场景的网站模板,特别是对于那些希望快速搭建高质量网站的企业或个人来说,下载并使用这样的模板不失为一个省时省力的...

    autoroad2021中边桩坐标横断土方计算绘图系统【免费版】

    简单强大的横断面积计算函数(未注册时返回结果为乱码) ,可让您无需在CAD端成图,即可直接在EXCEL中得出横断面积,而且当您计算表中某个数据发生改变时,自动更新相关计算结果,让您工作省时省力 2、强大的横断面...

Global site tag (gtag.js) - Google Analytics