CSS三大屬性，初學者須知

寫在前面：本文簡單介紹一下css的三大特性：層疊性、繼承性、優先級。以及margin,padding,浮動，定位幾個知識點。限於水平，不深入探討，僅作爲學習總結。

 1，三特性

1）層疊性：同標籤同權重下，樣式衝突，後面的樣式會覆蓋前面的。

2）繼承性： 給父元素設置樣式的時候，子元素在默認沒有樣式的情況下會受父元素的樣式影響。注意寬高不能繼承。

 

可繼承的屬性：
  ◇文字顏色可以被繼承  color
  ◇與文字相關的屬性都可以被繼承
  ◆行高（line-height） 可以被繼承
  ◆text-align

特殊情況：

a 標籤默認情況下不會受父級元素的顏色影響

常見的在製作nav 中給li 設置顏色a標籤不起作用，原因是受到瀏覽器默認的樣式影響 color: -webkit-link。

h1-h6 默認單位是em 具體大小要乘積運算

3）優先級：

標籤選擇器<類選擇器 <ID選擇器 < 行內樣式 <! Important

2，Margin 的特點：

1）垂直外邊距合併（取大的）

2）垂直外邊距塌陷？

解決方法：

給父元素設置邊框。
 給父元素設置 overflow:hidden（觸發bfc） 

3,Padding值特殊性

在塊級元素中，如果默認子元素沒有設置寬度，給當前子元素設置padding值，不會影響當前子盒子的寬度。（“繼承”的盒子padding值不會影響）

4,浮動

爲什麼用浮動？

開始是作爲 圖片文字環繞效果設計現在多用在佈局和導航 製作

什麼時候清理浮動？
1，父容器沒有設置高度
2，父容器所有子元素都設置浮動

如何清理浮動？（這裏介紹常見的4種）
1，clear：both;
2,給父元素設置overflow：hidden;(父元素沒有定位)
3，使用僞元素 

1 2 3 4 5 6 7 8 9 10 11 12

.clearfix :after{ content: ""; height: 0; display: block; visibility: hidden; clear: both; } .clearfix{   zoom: 1;   /*兼容ie6*/ }

4,display: table;

 

1 2 3 4 5 6 7 8 9 10

.clearfix:before, .clearfix:after{ clear: both; display: table; /*表格模式*/ } .clearfix{   zoom: 1;   /*兼容ie6*/ }

　　

定位：

1，靜態（static）標準流下的顯示方式，可轉換成其他定位方式
2，絕對 （absolute） ：
1）標準流下的盒子，設置絕對定位以body 爲參照
2）除了父盒子設置static ，其他定位方式，子盒子以父盒子爲參照
3）絕對定位的元素脫標
4）實現模式轉換的效果
使用場景：1，盒子壓盒子 2，絕對定位可以使用margin padding
3，相對（relative）：相對自己作爲參照，不會脫標
使用子絕父相
4，固定（fixed）：
1）以body標籤可視區域作爲參照
2）脫標
3）實現模式轉換的效果
層級：
1）定位的元素有層級關係
2）只有給定位的元素才能設z-index
特點：
1）元素設置定位後有個默認的z-index ：auto（除去static）
2）z-index 值相同 元素後來居上
3）z-index 值越大 當前的元素層級越高
4）父元素的z-index值越大 當前的元素層級越高簡單

  絕對定位如何居中？

◆通過設置left:50% ;         父元素寬度的一半
◆設置margin-left:     -元素自己寬度一半；

 

 

雙飛翼佈局

目的：加載文檔時先加載中間區域，再加載左右兩邊

特點：兩側固定，中間自適應

 

1 2 3 4 5 6 7 8 9 10 11 12

<div class="container">     <div class="columns mainbox">         <div class="inner">             我看見個會計課件髮卡機看見看見我看見個會計課件髮卡機看見看見我看見個會計課件髮卡             機看見看見我看見個會計 課件髮卡機看見看見我看見個會計課件髮卡機看見看見我看見個             會計課件髮卡機看見看見我看見個會計課件髮卡機看見看見         </div>       </div>     <div class="columns leftbox"></div>     <div class="columns rightbox"></div> </div>

 

　　

 1 <style>
 2         body {
 3             min-width: 1000px;
 4         }
 5         
 6         .columns {
 7             height: 250px;
 8             float: left;
 9         }
10         
11         .container {
12             height: 250px;
13             border: 1px solid red;
14         }
15         
16         .mainbox {
17             width: 100%;
18             background: yellow;
19         }
20         
21         .inner {
22             margin: 0 300px 0 250px;
23             word-break: break-all;
24         }
25         
26         .leftbox {
27             width: 250px;
28             background: red;
29             margin-left: -100%;
30         }
31         
32         .rightbox {
33             width: 300px;
34             background: blue;
35             margin-left: -300px;
36         }
37     </style>