`
liuguofeng
  • 浏览: 448761 次
  • 性别: 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

分享到:
评论

相关推荐

    fastreport动态调整页边距

    《FastReport动态调整页边距在Delphi7中的实现与应用》 FastReport是一款功能强大的报表设计工具,它广泛应用于Delphi开发环境中,为开发者提供了便捷的报表设计和打印功能。在实际应用中,有时我们需要根据不同的...

    js打印设置页边距

    本文将深入探讨如何使用JavaScript来调整打印时的页边距,设置或重置页眉页脚,以及如何初始化这些设置为默认值。 ### 一、了解打印设置的基本概念 在讨论具体实现之前,我们首先需要理解打印设置的一些基本概念:...

    word怎么设置页边距

    正确设置Word文档的页边距是一项既实用又艺术的工作,它不仅能提升文档的整体美观度,还能体现作者的专业性和对细节的关注。掌握了本文介绍的技巧后,无论是日常办公还是学术研究,都能轻松应对各种文档排版挑战,让...

    Android无内边距TextView控件

    使用TextView控件的时候由于其内边距导致与UI效果相差甚远。很是让不少程序猿难受,也包括我自己因为这个原因也没少和UI设计师打嘴仗。于是最近写了一个自定义的NoBroderTextView去除了TextView上下内边距。

    swift-带内边距的UILabel支持通过StoryBoard面板直接设置内边距

    通过研究和使用这个库,开发者可以更好地理解如何扩展UIKit组件以满足特定需求,并且掌握在Swift中实现Storyboard与代码之间更紧密交互的技巧。 总的来说,这个特性为Swift的iOS开发带来了一种便捷的方法,使得在...

    盒子模型 内外边距

    盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距

    word 2021 页边距设置方法.docx

    使用页边距按钮可以快速设置文档的页边距,用户可以根据需要选择不同的页边距大小。 方法二:使用自定义边距命令 在 Word 2021 中,用户也可以使用自定义边距命令来设置文档的页边距。具体操作步骤如下: 1. 打开...

    Delphi获取获得打印页边距程序代码..rar

    本压缩包“Delphi获取获得打印页边距程序代码..rar”显然包含了一段用Delphi编写的代码示例,用于帮助开发者实现这一功能。以下是对这个主题的详细解释。 首先,我们需要了解在Delphi中如何与打印进行交互。Delphi...

    Word2021:页边距的两种设置方式.docx

    #### 三、第一种设置方式:使用预设页边距 1. **打开Word2021文档**,进入文档编辑界面。 2. **切换至“页面布局”功能区**:在顶部菜单栏中找到并点击“页面布局”选项卡。 3. **选择“页边距”**:在“页面设置”...

    WPS如何调整页边距按照公文格式.docx

    本文将详细介绍如何在 WPS 中调整页边距,并提供了一些相关的知识点,以便读者更好地掌握 WPS 软件的使用。 一、页边距的概念 页边距是指页面四周的空白区域。页边距的大小直接影响着页面的排版效果。通常情况下,...

    水晶报表打印边距格式设置

    3. 在“页面设置”对话框的“布局”选项卡中,你可以看到“顶部边距”、“底部边距”、“左侧边距”和“右侧边距”的输入框。在这里输入具体的数值,单位通常是英寸或毫米。 4. 对于更精确的控制,可以在“打印预览...

    完整版设置编辑框左右边距.rar

    适当的边距可以提供更好的阅读体验,避免文字过于拥挤,同时也能使界面显得更加专业和整洁。 在Web开发中,通常使用CSS(Cascading Style Sheets)来设置编辑框的边距。我们可以使用`margin`属性来调整边距,例如:...

    EXCEL页边距调整关键代码

    ### EXCEL页边距调整关键代码解析 在日常办公或数据分析工作中,Excel作为一款强大的电子表格软件,被广泛应用于数据管理、统计分析、图表制作等多个领域。而在文档打印或导出时,合理调整页边距可以提升文档的美观...

    ios-自定义内边距UILabel.zip

    在iOS开发中,自定义内边距UILabel是一个常见的需求,特别是在设计复杂的用户界面时。`UILabel`是苹果提供的一个基础视图,用于显示单行或多行的文本,但默认情况下,它并不支持直接设置内边距。不过,通过一些技巧...

    23. 页边距.swf

    23. 页边距.swf

    安卓textView相关-Android去掉TextView的上下边距.zip

    标题"安卓textView相关-Android去掉TextView的上下边距.zip"所指向的内容就是关于如何去除`TextView`的这些不必要的边距。 首先,我们来理解一下`TextView`的边距。`TextView`的边距分为内边距(padding)和外边距...

    设置编辑框左右边距.e.rar

    在CSS中,我们可以使用`margin`属性来调整边距。例如,要设置一个编辑框的左右边距为20像素,可以这样写: ```css input[type="text"], textarea { margin-left: 20px; margin-right: 20px; } ``` 在JavaScript...

    Delphi给Memo组件的显示区域设置边距..rar

    例如,可以在Memo的`OnPaint`事件中,使用Canvas对象绘制一个矩形区域,模拟边距效果。但这种方法较为复杂,需要精确计算每个文本行的位置。 4. 注意事项: - 当调整边距时,要考虑到Memo的滚动条。如果Memo有垂直...

    易语言设置编辑框左右边距

    在易语言中,我们经常会遇到需要对界面元素进行布局调整的情况,例如设置编辑框(EditBox)的左右边距。编辑框是用户输入文本的基本控件,在界面设计中起到至关重要的作用。合理地设置边距可以提高用户体验,使界面...

Global site tag (gtag.js) - Google Analytics