前端布局知识点(2)——负边距

这是完成百度前端学院2015的task1后对前端布局知识点总结的第二篇博文。上一篇总结了一下overflow这个属性:前端布局知识点(1)——overflow属性

CSS中的负边距是布局中一个常用的技巧。因为在后面学习的双飞翼布局的实现就依赖于负边距,负边距又与文档流息息相关,所以我先对这部分的知识进行查询学习。

文档流与文本流

在我了解负边距的时候出现了一个词:文档流。而在查阅文档流相关资料的时候又出现一个词叫文本流。两者有什么区别?知乎上相关问题 HTML 的文档流和文本流分别是什么?- 知乎 的高票答案提供了一个辨析的思路:文档流是相对于盒子模型讲的,而文本流是相对于文字段落讲的。

在overflow的那篇文章中我们提到,浮动(float)是一个立体的浮动。当一个元素浮动时,它后面的元素会在它身下布局。但是文字会认为浮动元素是占据了一个区域而围绕它布局。我们可以将浮动元素想象成一个在海上浮动的人,鱼可以在他的身下,但海面上的泡沫会围绕在他周围。这时,这个元素脱离了文档流,但没有脱离文本流。

但是绝对定位(absolute)会将元素从文档流和文本流中脱离,也就是说其他元素和文本都不认同绝对定位元素占据了区域,而在它身下布局。

float、absolute和fixed三种方式定位会让元素脱离文档流。

负边距的表现

当 margin-top、margin-left 为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与 position:relative 的元素设置top、left后元素还占据原来位置不同。

而当 margin-bottom、margin-right 设为负值的时候,元素本身没有位置变化,后面的元素会上移、左移。

负边距的实例

多说无益,来看实例。我们可以利用负边距和绝对定位来实现一种经典的居中方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.middle{
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left: -100px;
}
</style>
<div class="middle red">
middle div
</div>

把div设置为绝对定位,然后设置top和left为50%,这时候div的上边、左边就到了父元素(这里是页面)的50%处,再对div设置其自身高度、长度一般的负边距,使div的中心移动到页面中心,实现宽度上的居中对齐。我们当然也可以用同样的方式设置高度的居中。

关于负边距更多的应用可以看参考资料:

负边距在布局中的使用

在接下来谈到的双飞翼布局中,负边距将成为主角。