说到负边距,广大的前端兄弟们肯定不会陌生,外边距 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
相关推荐
《FastReport动态调整页边距在Delphi7中的实现与应用》 FastReport是一款功能强大的报表设计工具,它广泛应用于Delphi开发环境中,为开发者提供了便捷的报表设计和打印功能。在实际应用中,有时我们需要根据不同的...
本文将深入探讨如何使用JavaScript来调整打印时的页边距,设置或重置页眉页脚,以及如何初始化这些设置为默认值。 ### 一、了解打印设置的基本概念 在讨论具体实现之前,我们首先需要理解打印设置的一些基本概念:...
正确设置Word文档的页边距是一项既实用又艺术的工作,它不仅能提升文档的整体美观度,还能体现作者的专业性和对细节的关注。掌握了本文介绍的技巧后,无论是日常办公还是学术研究,都能轻松应对各种文档排版挑战,让...
使用TextView控件的时候由于其内边距导致与UI效果相差甚远。很是让不少程序猿难受,也包括我自己因为这个原因也没少和UI设计师打嘴仗。于是最近写了一个自定义的NoBroderTextView去除了TextView上下内边距。
通过研究和使用这个库,开发者可以更好地理解如何扩展UIKit组件以满足特定需求,并且掌握在Swift中实现Storyboard与代码之间更紧密交互的技巧。 总的来说,这个特性为Swift的iOS开发带来了一种便捷的方法,使得在...
盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距
使用页边距按钮可以快速设置文档的页边距,用户可以根据需要选择不同的页边距大小。 方法二:使用自定义边距命令 在 Word 2021 中,用户也可以使用自定义边距命令来设置文档的页边距。具体操作步骤如下: 1. 打开...
本压缩包“Delphi获取获得打印页边距程序代码..rar”显然包含了一段用Delphi编写的代码示例,用于帮助开发者实现这一功能。以下是对这个主题的详细解释。 首先,我们需要了解在Delphi中如何与打印进行交互。Delphi...
#### 三、第一种设置方式:使用预设页边距 1. **打开Word2021文档**,进入文档编辑界面。 2. **切换至“页面布局”功能区**:在顶部菜单栏中找到并点击“页面布局”选项卡。 3. **选择“页边距”**:在“页面设置”...
本文将详细介绍如何在 WPS 中调整页边距,并提供了一些相关的知识点,以便读者更好地掌握 WPS 软件的使用。 一、页边距的概念 页边距是指页面四周的空白区域。页边距的大小直接影响着页面的排版效果。通常情况下,...
3. 在“页面设置”对话框的“布局”选项卡中,你可以看到“顶部边距”、“底部边距”、“左侧边距”和“右侧边距”的输入框。在这里输入具体的数值,单位通常是英寸或毫米。 4. 对于更精确的控制,可以在“打印预览...
适当的边距可以提供更好的阅读体验,避免文字过于拥挤,同时也能使界面显得更加专业和整洁。 在Web开发中,通常使用CSS(Cascading Style Sheets)来设置编辑框的边距。我们可以使用`margin`属性来调整边距,例如:...
### EXCEL页边距调整关键代码解析 在日常办公或数据分析工作中,Excel作为一款强大的电子表格软件,被广泛应用于数据管理、统计分析、图表制作等多个领域。而在文档打印或导出时,合理调整页边距可以提升文档的美观...
在iOS开发中,自定义内边距UILabel是一个常见的需求,特别是在设计复杂的用户界面时。`UILabel`是苹果提供的一个基础视图,用于显示单行或多行的文本,但默认情况下,它并不支持直接设置内边距。不过,通过一些技巧...
23. 页边距.swf
标题"安卓textView相关-Android去掉TextView的上下边距.zip"所指向的内容就是关于如何去除`TextView`的这些不必要的边距。 首先,我们来理解一下`TextView`的边距。`TextView`的边距分为内边距(padding)和外边距...
在CSS中,我们可以使用`margin`属性来调整边距。例如,要设置一个编辑框的左右边距为20像素,可以这样写: ```css input[type="text"], textarea { margin-left: 20px; margin-right: 20px; } ``` 在JavaScript...
例如,可以在Memo的`OnPaint`事件中,使用Canvas对象绘制一个矩形区域,模拟边距效果。但这种方法较为复杂,需要精确计算每个文本行的位置。 4. 注意事项: - 当调整边距时,要考虑到Memo的滚动条。如果Memo有垂直...
在易语言中,我们经常会遇到需要对界面元素进行布局调整的情况,例如设置编辑框(EditBox)的左右边距。编辑框是用户输入文本的基本控件,在界面设计中起到至关重要的作用。合理地设置边距可以提高用户体验,使界面...