负边距在布局中的使用

转载 2015年11月19日 22:32:47


http://www.cnblogs.com/dolphinX/p/4071725.html


负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧。值为正的场景很常见,大家都很熟悉其表现

  • margin-topmargin-left为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
  • margin-bottommargin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移

看几个应用场景

绝对定位元素

当元素被设置为绝对定位的时候其top、right、bottom、left值是指离最近的非static元素的距离,经典的垂直居中的一种方式正是利用的绝对定位元素的负边距实现的

<style>
.wrap4{
	position:relative;
	margin:10px;
	width:200px;
	height:200px;
	border:dashed 1px orange;
}

.wrap4 .content{
	position:absolute;
	width:100px;
	height:100px;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	background:orange;
}
</style>

<div class="wrap4">
	<div class="content"></div>
</div>

把元素设置为绝对定位,然后设置top和left为50%,这时候元素的上边、左边就到了父元素的50%处,再对元素设置其自身高度、长度一般的负边距,使元素中心移动到父元素中心,实现居中对齐

float元素

负边距对float元素的影响也是按照上面说的,不过有其特殊性,我们看个例子就很清楚了

浮动元素负边距

<style>
.float{
	overflow:hidden;
	width:280px;
	border:dashed 1px orange;
}

.float .item{
	width:100px;
	height:100px;
	float:left;
}

.float .item:nth-child(1){
	background:red;
}
.float .item:nth-child(2){
	background:grey;
}
.float .item:nth-child(3){
	background:blue;
}
</style>

<div class="float">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

在一个宽度为280px的div中右3个float:left的子元素,宽度为100px,由于一排放不下,最后一个陪移动到了下一行

我们对代码稍作修改

<style>
.float{
	overflow:hidden;
	width:280px;
	border:dashed 1px orange;
}

.float .item{
	width:100px;
	height:100px;
	float:left;
}

.float .item:nth-child(1){
	background:red;
}
.float .item:nth-child(2){
	background:grey;
}
.float .item:nth-child(3){
	background:blue;
	margin-left:-20px;
}
</style>

<div class="float">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

第三个元素添加-20px的负边距

这时候发现第三个元素移上去了,并且覆盖了第二个元素20px,经典的多列布局正是利用此原理

多列布局

<style>
.body{
	width:500px;
	margin:10px;
	border:dashed 1px orange;
	overflow:hidden;
}

.wrap3{
	float:left;
	width:100%;
}

.wrap3 .content{
	height:200px;
	margin-right:100px;
	background:rgba(255,0,0,0.5);
}

.body .right{
	width:100px;
	height:200px;
	float:left;
	margin-left:-100px;
	background:rgba(0,255,0,0.5)
}
</style>

<div class="body">
	<div class="wrap3">
		<div class="content">
			Content Content Content Content Content Content Content 
			Content Content Content Content Content Content Content Content
		</div>
	</div>
	<div class="right">Right</div>
</div>

代码很简单

  1. 为content元素添加父元素,设置左浮动,宽度100%
  2. content元素设置右边距,值等于right的宽度
  3. right左浮动,然后设置其宽度的负边距

本来right应该在第二行显示了,但是其宽度的左浮动使它到了第一行的最右边,覆盖了wrap的一部分,但是content有right宽度的右边距,覆盖区域没有内容,这样就实现了两列布局

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Right

PS. 其它此类更复杂的布局原理类似,感兴趣的同学可以看这里学40种。。。

普通元素

负边距对不同块元素的影响很有意思,我们通过几个例子来看一下

多列列表

<style>
li{
	line-height:2em;
}

.col2{
	margin-left:150px;
}

.col3{
	margin-left:300px;
}

li.top{
	margin-top:-9em;
}
</style>

<ul>
	<li class="col1">aaa</li>
	<li class="col1">bbb</li>
	<li class="col1">ccc</li>
	<li class="col2 top">ddd</li>
	<li class="col2">eee</li>
	<li class="col2">fff</li>
	<li class="col3 top">ggg</li>
	<li class="col3">hhh</li>
	<li class="col3">iii</li>
</ul>

定义一个列表,三列显示

  • aaa
  • bbb
  • ccc
  • ddd
  • eee
  • fff
  • ggg
  • hhh
  • iii

普通的做法我们肯定是通过浮动实现,通过刚才介绍的知识应该不难理解为什么这样也行。看起来在普通元素上没什么稀奇的

放大元素

什么?负边距还可以放大元素!!!

<style>
.wrap{
	width:300px;
	border:dashed 5px orange;
}

.wrap .inner{
	height:50px;
	margin:0 -50px;
	background:blue;
	opacity:0.5;
}
</style>

<div class="wrap0">
  <div class="inner0">
  	inner inner inner inner inner inner inner inner inner inner inner inner 
  </div>
</div>

这个例子看起来平淡无奇,效果却很惊人,内层的div设置了水平的负边距后竟然变大了

inner inner inner inner inner inner inner inner inner inner inner inner inner

PS. 效果能实现的前提是元素的宽度不能设置为auto以外的值

带有右边距的浮动子元素列表

看到这种效果你第一想法是什么?会不会是子元素设置margin-right,在遍历的时候nth-child(3n)还要设置为0,看看利用上面知识我们可以怎样处理

<style>
.wrap2{
	width:320px;
	border:dashed 1px orange;
}

.wrap2 .inner{
  overflow:hidden;
  margin-right:-10px;
}

.wrap2 .item{
	float:left;
	width:100px;
	height:100px;
	margin:10px 10px 10px 0;
	background:blue;
}
</style>

<div class="wrap2">
	<div class="inner">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
  </div>
</div>

我们没有设置nth-child(3n)的边距为0,而是通过负边距使父元素“变大”。

负边距是不是很有意思,不很了解的少年们学起来吧!


相关文章推荐

Margin负边距使用之双飞翼布局

Margin负边距使用之双飞翼布局在页面布局中,经常会遇到左右两边宽度固定中间自适应的布局需要,其中有一个很巧妙的方式叫双飞翼布局。双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、...

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。...

关于双飞翼布局中浮动与负边距的理解

布局学习中的一些理解布局学习中的一些理解 圣杯布局中浮动与清除的搭配 现象 思考 overflowhidden清除浮动 绝对定位的问题圣杯布局中浮动与清除的搭配现象  在阅读双飞翼布局介绍一文时,首先...

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端 的同学来说,那是必须...

CSS布局奇淫巧计之-强大的负边距

转自:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html css中的负边距(negative margin)是布局中的一个常用...

[html5入门-27]CSS布局奇淫巧计之-强大的负边距

来源:点击打开链接 css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同...

负边距流体布局

Creating Liquid Layouts with Negative Margins by RYAN BRILL Published in: CSS, Layout ...

CSS布局奇淫巧计之-强大的负边距

css

css负边距可以实现的布局(上)左固定右自适应,多行多列,等高布局

css负边距原来有这么大的妙用。 今天看了一篇大大的博文: css的负边距(margin负值)的绝招负边距可以做的事有很多。 可以增大元素的宽度 可以实现多列多行布局 左侧固定右侧自适应布局 等高...

Android(4)布局方法、px/dp/dpi/ps/内边距与外边距

一: LinearLayout RelativeLayout 二: ListView GridView 例子:<LinearLayout xmlns:and...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)