老实说,个人从来没有重视过 CSS,觉得很简单,没有可学之处。但随着使用和认识的深入,才发现 CSS 也博大精深。加上 CSS3 的出现,以前需要 JavaScript 的地方,现在用 CSS 亦可以轻松实现。
相信未来,CSS 一定能大放异彩!这次一起和大家聊一聊 CSS 中的负边距。
负边距的特点
在正式介绍负边距之前,我们先回顾一下文档流。所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。
脱离文档流
要使一个元素脱离文档流有两种方式:
- 使用浮动(float):值为 left、right 均会使元素脱离文档流
- 使用定位(position):值为 absolute、fixed 的元素脱离文档流,其它不脱离文档流
未脱离文档流元素
<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>
我们先来看一看正边距,当我们给三个 div 分别设置上边距时,自然而然,三个元素都会隔开一定间隙。
当我们给三个 div 分别设置负上边距时,这时我们看到元素将被拉进指定的方向。
我们可以这样来思考,既然正边距是相隔距离;那值为负,自然就反过来了,就是相叠距离。
当我们设置某个元素的 margin-right
和 margin-bottom
为负值,而非 margin-left
和 margin-top
时,这时元素并不会如你所想的那样向右或下移动,而是将后续的元素拖拉进来,覆盖本来的元素。
造成这两种不同现象的原因是文档流只会向左和向上,不可能向右和向下
如果没有设定 width 属性,设定负 margin-left
和 margin-right
会将元素拖向对应的方向,并增加宽度,此时的 margin 的作用就像 padding 一样。没有设置 width 的元素的宽度值是由包围元素的宽度来计算出来的,然后减去 margin,所以就会得到实际上比原始元素更宽的值。
总结
margin-left
和margin-top
:影响自身元素,将向指定方向偏移margin-right
和margin-bottom
:影响相邻元素,将其拖入指定方向
已脱离文档流元素
绝对定位元素(absolute)
设置的 margin 的方向为 top 或者 left
当设置负值的 margin 的方向为 top 或者 left 的时候,元素也会按照设置的方向移动相应的距离。
设置的 margin 的方向为 bottom 或者 right
由于设置绝对定位的元素已经脱离了标准文档流,所以,设置 margin-right/bottom 对后面的元素并没有影响。
浮动元素(float)
其实浮动元素和未脱离文档流的元素在负边距上表现类似,只不过浮动有左和右两种浮动。对应文档流,我们可以称浮动元素为浮动流。
当负值的 margin 的方向与浮动流方向一直时,则元素会往对应的方向移动对应的距离。
当负值的 margin 的方向与浮动流方向相反时,则元素本身不动,元素之前或者之后的元素会向该元素的方向移动相应的距离。
总结
浮动流不像文档流只是向上和向左,它是可以向左和向右的。除了这点外,其实和未脱离文档流元素表现差不多。
负边距的应用
三列布局(static 元素)
li {
line-height: 1.5em;
}
.col2 {
margin-left: 200px;
}
.col3 {
margin-left: 400px;
}
.top {
margin-top: -3em;
}
<ul>
<li class="col1">第一列第一排