我知道你不知道的负Margin
Posted on1y_rL
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我知道你不知道的负Margin相关的知识,希望对你有一定的参考价值。
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。
负margin理论:
在说明什么是负margin之前,你得清楚margin是个啥么玩意,如果还不清楚可以先阅读本人的前一篇文章《不要告诉我你懂margin》,预补下知识,回头再读这篇文章,相信俩篇文章都能给你带来不少的收获。
为了形象、易懂的解释负margin,我们将引入W3C上没有的参考线的说法。何谓参考线?参考线就是 margin移动的基准点,此基准点相对于box(自身)是静止的。而margin的数值,就是box相对于参考线的位移量。
一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。top和left是以外元素为参考,right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形,如果是负值则位移方向相反。
上面段文字和图片或许挺难理解,我们来看实际代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>Margin参考线举例说明</
title
>
<
style
type
=
"text/css"
>
*margin:0; padding:0;
.wrapwidth:400px; border:5px solid #aaa;
.examplewidth:200px; height:200px; background:#CCCCFF;
.normalwidth:200px; height:200px; background:#CCE8CF;
/* 添加或者注释掉下面的margin属性,查看前后差别
.examplemargin:-10px 20px -30px 40px;
*/
</
style
>
</
head
>
<
body
>
<
div
class
=
"wrap"
>
<
div
class
=
"example"
>example元素:margin参考线举例说明文字,请查看此元素由于margin的变化所移动的位移量。</
div
>
<
div
class
=
"normal"
>一个普通的Box</
div
>
</
div
>
</
body
>
</
html
>
|
来分析这段代码,example元素下方有一相邻元素normal(注:这里分析的是添加和删除margin后的example元素,normal元素仅作为example元素前后效果的参照)。
根据上文的参考线原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素为参考,所谓外元素就是本元素的边界元素(再白话点的解释就是元素的紧邻元素,这里涉及到containing block知识,可自行网上搜索)。example元素上边和左边的边界元素即为wrap父元素,wrap父元素为基准点,example的margin-top为-10px,想象下如果这里margin-top为+10px会什么情况,没错如果为+10px,example元素相对于wrap父元素边缘为基准,那么example元素会同wrap父元素10px产生间隙边距,那么反过来,margin-tip:-10px;还是与wrap父元素边缘为基准,反过来向上推10px的距离位置。example元素的margin-left为40px,这里就按照正常逻辑相隔40px边距,同理如果为-40px,那么就是反方向向左推进40px的距离位置。
再来看example元素的margin-right和margin-bottom,由上文得知这俩个值是以元素本身为参考。什么叫以元素本身为参考呢,确切含义是指以自身为参考来影响周围元素的位置(实质即为影响下边和右边相邻元素的参考线)。这里的margin-bottom为-30px,对于其自身位置没有任何变化,但是对于其下方元素normal元素产生了极大的影响,因为normal元素的上边界元素即为example元素,根据example元素边界来判定自身位置,想象下如果example元素margin-bottom为+30px,那么example元素将隔开下方的normal元素,反之为-30px,下方normal元素由于example参考线内凹,导致了normal元素自个儿身不由己的被“提”了上去了。这就是以自身为参考影响周围元素位置的含义。
这里梳理一下规律,当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。如果你再想深入了解参考线理论的话你也可访问由浅入深漫谈margin属性这篇文章。
负margin实战:
据我所知至今没有一套完整的关于负margin专题研究的文章。有也仅仅是偏理论或者偏实例,理论终究是理论,学以致用才是根本,而有了实例你还得知晓原理,授人鱼不如授人以渔。接下来我们将利用四个例子深入讲解负margin技术的应用领域。
负margin在Tab选项卡中的应用:
效果预览:
这是第一个选项卡的内容,现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。核心分析:
如上面的这个Tab选项卡效果,最核心的就是下方俩行高亮部分代码,第二行的margin-bottom:-1px;使下方的正文部分向上“提”了1px的距离,从而达到了鼠标上移后选项卡白色遮住下方黑色边框的效果(注:由于IE不是符合W3C标准,所以当鼠标移到选项卡上时需要添加一个额外属性position:relative;来修复IE不覆盖下方边框的这个Bug)。第四行的margin-left:-1px;的目的是让四个选项卡向左移动1px的距离,达到左右都只有一条分割线的效果。
CSS代码:
1 2 3 4 5 6 7 8 9 |
.demoTab
width
:
400px
;
font
:
一些你不知道JS
|