负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/
• 如需转载，注明地址：http://www.cnblogs.com/leejersey/p/3477855.html