css知识点3@qunar

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搭配解决。

3paddingmargin

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

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

4line-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>
5、不显示滚动条

  通过设置body的overflow-x:hidden或者overflow-y:hidden隐藏页面水平和垂直方向上的滚动条,只能加在body上,加在其他div上面不好使。

  这种方法在<!DOTYPE html PUBLI "-//W3//DTD XHTML 10 Trsitiol//E" "">行不通的,可以通过加在html上来解决。

     可以这样理解body{overflow.....}在标准的DTD是不生效的。

css知识点3@qunar,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。