CSS奇技淫巧之负边距的应用

作者: 小胖子嘿嘿嘿 | 来源:发表于2017-04-27 21:40 被阅读0次

CSS奇技淫巧之负边距的应用
你不知道的CSS——BFC(块级格式化上下文)
CSS负margin的影响
CSS布局奇淫巧计之-强大的负边距
css学习笔记
CSS负边距margin的应用
CSS负边距
css 负边距
margin 负边距应用???
CSS样式布局

最近在学习flex布局，在赞叹其便捷性的同时，回想起之前使用css2的时候实现等高或者等宽布局的麻烦。同时也看到[The Definitive Guide to Using Negative Margins这篇文章对于负边距的介绍，这里参考并总结一二，加深理解。

我们在平时的开发中很少使用负边距，不过其实可以解决很多问题。首先，W3C标准并不反对使用负边距，此外，使用负边距时并不会时节点脱离文档流，因此能够影响后继节点的布局，此外，它也有着较好的兼容性，在适当的时候合适的使用它可能解决大问题。

我们先借用参考文章里的一张图来回顾一下盒模型：

盒模型.png

仔细看图中的箭头所示，对一个非float元素来说，top,left属性影响元素本身的定位，而right,bottom影响的是后继元素的定位。理解这点其实很重要，很多时候我们会觉得很奇怪，明明设置了margin-bottom为0，可是为什么没有相对父元素居于底部呢。

一个有趣的现象是，当我们并未对节点设置宽度，但是设置了负的margin-left或者margin-right时，会导致节点变宽，其效果有点类似padding。

而对于float节点，负的margin稍显复杂，我们不妨先看看float方向和负边距方向相反的情形：

#mydiv1 {
    float:left; 
    margin-right:-100px;
}

而HTML结构为

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

我们使用codepen来查看上述结果，不难发现，mydiv2由于负值margin-right的重叠作用，直接覆盖mydiv1.当我们把mydiv1设置成宽度100%时，便轻松实现了mydiv2固定宽度，而mydiv1占宽100%的布局，而不需使用position:absolute.

当mydiv1和mydiv2都被设置了margin-right为-20px时，其效果是mydiv1的宽度减少了20px，因为被mydiv2覆盖的缘故。

不难想象，当mydiv1的负margin-right设置的值超过其宽度时，则完全被覆盖。

这里可以思考一下，假设页面布局如下：

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

而样式如下：

#mydiv {
  float: left;
}

#mydiv1 {
  float:left; 
  margin-right:-200px;
}

#mydiv2 {
    float: left;
    margin-right: -20px;
}

那么mydiv2会否覆盖到mydiv呢？

再看一个例子，要把单列的列表改成多列混排，继续盗图：

多列布局.png

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 */

如此，便顺利的从单列布局转为多列布局。初看这部分代码时，我也觉得很奇怪，怎么第4个和第6个li标签无需设置margin-top就可以实现节点上移而实现多个块元素相互重叠的效果？这里必须提到的一点是，负值的margin-top会导致文档流上移，想明白了这一点，就不难理解这里的布局为何是这样了。关于margin的更深入的讨论，我会在参考文献中列出。

负值的margin还有其他应用，比如气泡文字，文本叠加效果等，再也不用使用死板的绝对定位了。

气泡提示文字.png

当然，要实现多列布局也很easy：

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;}
#content p {margin-right:210px;}

这里给p设置margin-right很重要，因为content的实际宽度仍然是100%，否则会导致p标签和sidebar重叠。

使用负的margin-top可能会导致一系列问题，比如选择和点击页面元素，由于节点相互重叠可能导致层级不符合预期，解决方法也很简单，使用position:relative即可！

最后，再回顾一下经典的等高布局代码：

CSS

.div {
    width: 100px;
    overflow: hidden;
  }
 .div1, .div2 {
    padding-bottom: 200px;
    margin-bottom: -200px;
    float: left;
    width: 50%;
    word-wrap: break-word;
}

HTML

<div class="div">
    <div class="div1">111111111111111111111111111</div>
    <div class="div2">
       22222222222sd豆腐干豆腐豆腐干豆腐干豆腐干豆腐
    </div>
</div>

这里主要用到的原理是：