css知识点3@qunar

浏览数：20 / 时间：2015年06月09日

1、margin重叠

　　参考：http://blog.doyoe.com/~posts/css/2013-12-04-margin系列之外边距折叠.md

　　发生的条件：

- margin 折叠元素只发生在块元素上；
- 浮动元素不与其他元素 margin 折叠；
- 定义了属性overflow且值不为visible（即创建了新的块级格式化上下文）的块元素，不与它的子元素发生margin 折叠；
- 绝对定位元素的 margin 不与任何 margin 发生折叠。
- 特殊：根元素的 margin 不与其它任何 margin 发生折叠；

- 发生折叠需要是相邻的非浮动元素；
- 折叠发生在垂直外边距上，即margin-top/margin-bottom；
- 折叠后取其中最大的那个margin值作为最终值解决方案：破坏发生重叠的条件css就是一个排版引擎，当书写模式改变相当于搜索引擎改变，排版规则会发生变化，比如双倍边距发生在水平方向。

2、z-index

　　<div class="a">1
   　　 <div class="b">2</div>
   　　 <div class="c">3
    　　     <div class="c-1">4</div>
   　　 </div>
    　　<div class="d">4</div>
　　</div>

　　正常情况下，后面的元素会盖住前面的元素(修改margin-top的值)

　　 div{position: relative;}
　　.b{z-index: 3;background: #aaa;}
　　.c{z-index: 2;}
　　.c-1{z-index: 4;background: #f00;}

　　加了z-index（必须与position非static的值配合使用）之后，c-1无法盖住b，即子元素不能盖住父级元素的兄弟元素，因为父级元素产生了层叠上下文。

　　如果不为.c设置z-index，结果是c-1会盖住b，因为父元素没有设置z-index，就不会创建层叠上下文，子元素尝试重叠上下文，可以与父级的兄弟元素进行比较（z-index的比较），但在IE6，7，c-1是无法盖住b的；

　　z-index在ie6、7下有bug，当元素设置了position为非static的，且该元素没有设置z-index，仍然会下出现层叠上下文的情况，解决方法只对需要的元素设置position的。类似opacity非1的情况。

　　牢记：如果文档中有元素需要层叠，那么要注意：不能在div中设置position非static，因为如果有元素未设置z-index（即z-index：auto），在ie6,7下就会产生层叠上下文。应该要在需要层叠的类中定义z-index非auto和position非static。如果设置Opacity 非1（相当于在ie6,7中设置了position非static;z-index:auto的效果），会产生层叠上下文。需要posittion和z-index搭配解决。

3、padding、margin

　　padding不可以去负值，margin可以为负值

　　-margin可以实现好多效果，例如每个li后面都有|，可以对最后一个li设置-margin隐藏。类似场景很多

4、line-height

　　行高即字体最底端与字体内部顶端之间的距离，若果设置为百分比，继承的line-height是计算后的，不是继承百分比，但是如果百分比是因子，继承的　　是因子。

　　使用百分比和固定数值定义行高会出现重叠，使用因子方式定义行高不会出现行高。

　　<style>
　　.test div{width:300px;margin:15px 0;border:1px solid #000;}
　　.test p{margin:0;font-size:30px;}
　　.fixed div{line-height:20px;}
　　.percentage div{line-height:130%;}
　　.gene div{line-height:1.5;}
　　</style>

　　<ul>
   　　<li>
        <strong>固定数值方式：</strong> - {line-height:20px;}
        <div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>
　　  </li>
  　　<li>
         <strong>百分比方式：</strong> - {line-height:130%;}
         <div>如果是这种情况<p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p> 
　　　　　　</div>
　　  </li>
　　  <li>
         <strong>因子方式：</strong> - {line-height:1.5;}
         <div> 如果是这种情况 <p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p> </div>
　　  </li>
　　</ul>