负边距在布局中的使用
负边距即margin
属性的值设为负值,在CSS布局中时一个很有用的技巧。值为正的场景很常见,大家都很熟悉其表现
- 当
margin-top
、margin-left
为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative
的元素设置top、left后元素还占据原来位置不同 - 当
margin-bottom
、margin-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>
代码很简单
- 为content元素添加父元素,设置左浮动,宽度
100%
- content元素设置右边距,值等于right的宽度
- right左浮动,然后设置其宽度的负边距
本来right应该在第二行显示了,但是其宽度的左浮动使它到了第一行的最右边,覆盖了wrap的一部分,但是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设置了水平的负边距后竟然变大了
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,而是通过负边距使父元素“变大”。
负边距是不是很有意思,不很了解的少年们学起来吧!
本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/4071725.html,如需转载请自行联系原作者
负边距在布局中的使用相关推荐
- 负边距在布局中的使用 BY:色拉油啊油
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head><meta charset="UTF-8">&l ...
- html中设置负边距的意义,css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- 3.CSS布局奇淫巧计之-强大的负边距【转】
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS布局奇淫巧计之-强大的负边距
负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了. 实例: 因为P为block元素且没有 ...
- 负margin在布局中的运用(*****************************************************************)...
一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"><meta chars ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 使用负边距创建自适应宽度的流体布局
随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题.目前国内门户很多都进行了改版,采用目前的主流–960px左右的宽度. 我认为 ...
最新文章
- 鸽巢原理(抽屉原理)的详解
- 运动框架实现思路(js)
- java ndk 在哪_NDK简介
- include函数_include()函数以及JavaScript中的示例
- linux目录下有斜杠,Windows和Linux路径中斜杠/和反斜杠\ 的区别
- mysql5.7.24 rpm安装_centos7下安装mysql5.7.24
- vue data为什么是函数_由 Vue 中三个常见问题引发的深度思考
- 从病毒到“基础软件污染”,Linux 真的安全吗?
- SpringMVC扩展
- 如何在 macOS 中使用选项卡?
- 【ML小结5】决策树(ID3、C4.5、CART)
- java程序设计实用教程 实验6答案_java程序设计实用教程习题解答与实验指导.doc...
- debian nvidia 安装_Debian安装Nvidia显卡驱动
- 一元享移动怎么样_中国移动终于认怂?29元享100G流量还不限速,网友:后悔携号转网了...
- Verilog语言、语法
- 简单学JAVA-Java学习方法-费曼学习法
- 计算机提示存储空间不足怎么办,电脑提示存储空间不足,无法处理此命令是什么原因?怎么解决?...
- 如何思考总结,并如何写文档展示. 结构化思考, 金字塔思维
- Android中的阿里云仓库
- 关于Tushare库的使用