zoukankan      html  css  js  c++  java

  • 负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。
  • 相关阅读:
    DQL：data query language用来查询数据库表中的数据
    Mysql训练：两个表中使用 Select 语句会导致产生 笛卡尔乘积 ，两个表的前后顺序决定查询之后的表顺序
    最常用SQL joins:内连接（交集）、左外连接、右外连接、左连接、右连接、全连接（并集），全外连接
    空间异常即刻诊断，华为云数据管理服务DAS又出新招~
    【华为云技术分享】【论文阅读】增量式物体检测
    【华为云技术分享】如何让敏捷回顾会议更有效果，这样做就对了
    【华为云技术分享】如何处理暗数据？
    【华为云技术分享】MongoDB经典故障系列五：sharding集群执行sh.stopBalancer()命令被卡住怎么办？
    【华为云技术分享】云图说 | 初识云耀云服务器，打造“极优、极简”的云上体验
    【华为云技术分享】十分钟从入门到精通（上）—对象存储服务的OBS权限配置
  • 原文地址：https://www.cnblogs.com/leejersey/p/3477855.html
Copyright © 2011-2022 走看看