margin 负值使用一例

评论(0)

margin我很少会用到,一般用到也只是相对的去调整一个层的位置以达到一定效果。因为最近正在着手更新自己使用的主题,所以研究了一下各种布局的实现方法。发现使用margin负值形成的布局结构要比我们一般用层嵌套层再去分别左右浮动的方式要灵活很多。

margin 负值对文档流的影响

确切的说应该是margin负值对于层定位的影响,

没有浮动时

如果没有浮动的话,负的外边距会影响到各个层的高度、宽度,
当然这要看你设定的是水平还是垂直的负边距。有兴趣的可以去建立一个demo实验一下。

有浮动时

有浮动时当然要复杂的多,本例以向左浮动(float:left;)为例。
DEMO 地址:margin 负值布局演示
margin-demo
简单概括一下这个例子:
整个演示包括三个层 自左至右是 #gird-left、#main、#siderbar
在文档流的先后顺序却是#main、#gird-left、#siderbar
三个层的浮动都是向左(float:left;),而且三个层都在一个水平位置。
比较通俗的讲法就是如果你想实现如上布局就要外边距的负值大于当前水平的所有宽度。
css布局定义如下:

#main{
margin: 0 315px 0 160px;
}

以#main作为主要的文档流显示左右分别预留160像素和315像素来给剩下的两个层留出位置。

#gird-left{
margin-left: -100%;
}

左外边距-100%,可以将本层直接从文档流抽出直接显示在父级层最左上的位置。

#siderbar{
margin-left: -300px;
}

将#siderbar设定-300像素是因为本层有300像素宽,而上一个层宽度为100%;

这一个例子牵扯到了margin负值的多种综合应用,希望你能看懂。
浮动的margin负值布局,同一水平位置是会层叠的,
靠后的文档流会在上层,
如果看不懂给一个增强理解的例子:
margin--

margin负值布局的好处

从文档的先后顺序来看,我们不需要像传统布局那样,由上至下,由左至右的安排文档流代码的顺序。
很明显,作为一个网页内容的重要先后顺序为#main、#gird-left、#siderbar,
而我们阅读网页的习惯是将主要的东西放中间,其次左,最后右,
使用负值外边距我们完美的做到了这一点,
不但能优化搜索引擎而且还提高了阅读体验。

margin负值布局的缺点

作为层叠的文档流,我们要多做一些测试,以免各层文字内容重叠造成阅读困难。

相关文档






转载请注明转自: margin 负值使用一例