负margin使用权威指南

自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中。正因为如此,CSS布局从那时起一直编码优雅的代名词。

的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的定位方法。这就像一个在线taboo-everyone的这样做,然而,没有人愿意谈论它。

1。设置连续记录

我们都使用我们的CSS,但当谈到负margin,我们的关系在某种程度上管理采取一个更糟的方向发展。使用负margin率在网页设计绝对是分歧如此之大,而我们中的一些人喜欢它,还有那些简单地认为这是魔鬼的工作。

margin率为负看起来像这样:

#content {margin-left:-100px;}

负margin通常应用于小剂量但稍后您将看到,它是能够做得更好的。关于负margin,要注意几件事情:

他们非常有效的CSS

在这一点上,我不是在开玩笑。W3C甚至表示,“负margin值属性允许…””足够地说。看看这篇文章了解更多细节。

负margin不是hack

这是尤其如此。这是因为没有正确理解负margin,得到其hackish形象。它只成为一个黑客如果你用它来修复一个错误了。

它跟流

它不会打破的页面流,如果应用于没有浮动元素。因此如果你使用一个消极的边缘向上推动一个元素,所有成功的元素也会小心翼翼。

它是高度兼容的

负margin完全支持所有现代浏览器(和IE6在大多数情况下)。

当浮动应用就会有不同的反应
负margin不是你日常CSS所以他们应该小心应用。

Dreamweaver并不理解它
负margin不出现在DW的设计视图。为什么你甚至在设计视图检查你的网站呢?

2。使用负margin

当正确使用负margin率非常强大。有2种场景负margin采取中心舞台。

负margin率静态元素



一个静态的元素是一个元素,而不应用浮动。下图说明了静态元素反应负margin。

当一个静态元素是给定一个左/上负margin,它把元素指定的方向。例如:

/* Moves the element 10px upwards */

#mydiv1 {margin-top:-10px;}

但如果你把它应用到/右底部,它不是移动的元素/右像你想象的。相反,它把任何成功元素为主要元素,重叠。

/*
* All elements succeeding #mydiv1 move up by
* 10px, while #mydiv1 doesn’t even move an inch.
*/

#mydiv1 {margin-bottom:-10px;}

如果没有宽度,增加负margin的左/右拉元素在两个方向上增加其宽度。在这里,就像一个填充。

负margin浮动元素

考虑这是我们实际的标记:

<div id="mydiv1">First</div> <div id="mydiv2">Second</div>

如果margin率为负是应用相反的一个浮点数,它创建一个空白导致内容的重叠。这是对液体布局,一列宽度为100%,而另一个明确的宽度,像100 px。

/* A negative margin is applied opposite the float */
#mydiv1 {float:left; margin-right:-100px;}

如果两个元素浮动左右margin-right:-20 px应用于# mydiv1,# mydiv2对待# mydiv1仿佛20 px宽比实际小(因此,重叠)。有趣的是,# mydiv1的内容根本没有反应,继续保持目前的宽度。

如果负margin率等于实际的宽度,然后它完全重叠。这是因为margin率、填充、边界,和宽度元素的总宽度。所以如果负margin率等于剩余的尺寸然后元素的有效宽度变成0 px。

3。有效的技术

因为我们现在知道,应用负margin率是有效CSS2代码,使用它提供了一些非常有趣的CSS技术:

制作一个< UL > 3-COLUMN列表



如果你有一个项目列表太长显示垂直,为什么不把他们分成列呢?负margin让你做这个不用添加任何漂浮或额外的标记。令人惊讶的是它很容易让你把下面的列表分成3单独列,像这样:
HTML

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham<li>
<li class="col2 top">Bread<li>
<li class="col2">Butter<li>
<li class="col3 top">Flour<li>
<li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

通过添加margin-top:-2.6 em(两倍行距的<li>)。前,所有元素完美对齐。使用负margin率比应用相对定位更合适,因为你只需要应用到第一个新列,而不是每个<李>标记。酷吧?

为了增加重点重叠



故意重叠元素也是一个好的设计的隐喻。它增加了强调特定元素自重叠效应产生深度的错觉。将是一个很好的例子的评论部分Phlashers.com,,它使用一种重叠的技术关注评论一篇文章的数量。把这与z - index属性和创造力和你有了一点。

粉碎3 d文字效果



这里有一个整洁的把戏。创建Safari-like文本,略斜通过创建2版本的文本在2个不同的颜色。然后使用负margin率重叠在另一个的差异在1或2像素,你有选择,robot-friendly坡的文本!不需要巨大的jpeg或gif吞噬带宽像胖猪。

简单2-COLUMN布局

负margin也是一个很好的方法来创建简单的2-column液体布局,侧边栏有一个预设宽度和内容有一个液体宽度的100%
HTML

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

和你有一个简单的布局2-column记录时间。它工作在IE6太完美!现在,为了防止#栏重叠#内的文本内容,简单的添加

/* Prevent text from being overlapped */

#content p {margin-right:210px;}

/* It’s 200px + 10px, the 10px being an additional margin.*/

如果使用得当,负margin还可以提供所谓的灵活的文档结构,绝对踢桌子的脸。灵活的文档结构是一个可访问性和搜索引擎优化技术,允许您安排标记在几乎任何顺序取决于你的意图。汤姆·赖特写的一篇有趣的文章,讨论了可能的应用负margin的多列布局。

促使元素到位

这是最常见的(简单)使用情况负margin。如果您插入一个10
div 9其他div,不知怎么的就不会正确对齐,用负margin推动10 div到位而不用编辑其他9。

如果使用得当,负margin还可以提供所谓的灵活的文档结构,绝对踢桌子的脸。灵活的文档结构是一个

4。修正

文本和链接的问题
使用负margin浮动有时惹怒了老版本浏览器。一些症状包括:
使链接会断掉
文本很难选择
指定任何链接消失当你失去焦点
解决方案:只需添加位置:相对的,它的工作原理!

我的照片有截止
如果你有在办公室使用IE6的坏运气,有时内容会突然被切断时,重叠和漂浮。
解决方案:再次,只需添加位置:相对于被浮动元素,一切恢复正常。

5。结论

负margin在现代网页设计,因为它没有任何额外的标记位置元素的能力。与更多的用户切换到更多更新的浏览器(包括IE8),未来看起来很光明网站依赖于这种技术。
与负margin,如果你有任何独特的经历让我知道通过发表置评。

6。资源

更多信息在负margin。

Search This, The Positive Side of Negative Margins

Severn Solutions, CSS Negative Margins Algebra

Mindfly, Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess

A List Apart, Creating Liquid Layouts with Negative Margins

W3.org, Margin Properties

Branbell, Using Negative Margins

devarticles, Swapping Column Positions in Web Page Layouts with Negative Margins

Simplebits, Exceptionally Negative

CommunityMX, CSS Negative Margins

brunildo, Horizontal Negative Margins

Ben Nadel, Negative CSS Margins Are Not Cool

bluerobo, Centering: Negative Margin



原文地址：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

如需转载，注明地址：/article/4837245.html