css知識點3@qunar

標籤：style   blog   http   java   使用   os   

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>

5、不顯示捲軸

　　通過設定body的overflow-x：hidden或者overflow-y：hidden隱藏頁面水平和垂直方向上的捲軸，只能加在body上，加在其他div上面不好使。

　　這種方法在<!DOTYPE html PUBLI "-//W3//DTD XHTML 10 Trsitiol//E" "">行不通的，可以通過加在html上來解決。

     可以這樣理解body{overflow.....}在標準的DTD是不生效的。