寫(xiě)在前面：本文簡(jiǎn)單介紹一下css的三大特性：層疊性、繼承性、優(yōu)先級(jí)。以及margin,padding,
浮動(dòng)，定位幾個(gè)知識(shí)點(diǎn)。限于水平，不深入探討，僅作為學(xué)習(xí)總結(jié)。

 1，三特性

1）層疊性：同標(biāo)簽同權(quán)重下，樣式?jīng)_突，后面的樣式會(huì)覆蓋前面的。

2）繼承性：給父元素設(shè)置樣式的時(shí)候，子元素在默認(rèn)沒(méi)有樣式
的情況下會(huì)受父元素的樣式影響。注意寬高不能繼承。

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

特殊情況：

a 標(biāo)簽?zāi)J(rèn)情況下不會(huì)受父級(jí)元素的顏色影響

常見(jiàn)的在制作nav 中給li 設(shè)置顏色a標(biāo)簽不起作用，
原因是受到瀏覽器默認(rèn)的樣式影響 color: -webkit-link。

h1-h6 默認(rèn)單位是em 具體大小要乘積運(yùn)算

3）優(yōu)先級(jí)：

標(biāo)簽選擇器<類(lèi)選擇器 <ID選擇器 < 行內(nèi)樣式 <! Important

2，Margin 的特點(diǎn)：

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

2）垂直外邊距塌陷？

解決方法：

給父元素設(shè)置邊框。
 給父元素設(shè)置 overflow:hidden（觸發(fā)bfc） 

3,Padding值特殊性

在塊級(jí)元素中，如果默認(rèn)子元素沒(méi)有設(shè)置寬度，給當(dāng)前子元素設(shè)置padding值，
不會(huì)影響當(dāng)前子盒子的寬度。（"繼承"的盒子padding值不會(huì)影響）

4,浮動(dòng)

為什么用浮動(dòng)？

開(kāi)始是作為 圖片文字環(huán)繞效果設(shè)計(jì)現(xiàn)在多用在布局和導(dǎo)航 制作

什么時(shí)候清理浮動(dòng)？
1，父容器沒(méi)有設(shè)置高度
2，父容器所有子元素都設(shè)置浮動(dòng)

如何清理浮動(dòng)？（這里介紹常見(jiàn)的4種）
1，clear：both;
2,給父元素設(shè)置overflow：hidden;(父元素沒(méi)有定位)
3，使用偽元素 

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

4,display: table;

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

定位：

1，靜態(tài)（static）標(biāo)準(zhǔn)流下的顯示方式，可轉(zhuǎn)換成其他定位方式
2，絕對(duì) （absolute） ：
1）標(biāo)準(zhǔn)流下的盒子，設(shè)置絕對(duì)定位以body 為參照
2）除了父盒子設(shè)置static ，其他定位方式，子盒子以父盒子為參照
3）絕對(duì)定位的元素脫標(biāo)
4）實(shí)現(xiàn)模式轉(zhuǎn)換的效果
使用場(chǎng)景：1，盒子壓盒子 2，絕對(duì)定位可以使用margin padding
3，相對(duì)（relative）：相對(duì)自己作為參照，不會(huì)脫標(biāo)
使用子絕父相
4，固定（fixed）：
1）以body標(biāo)簽可視區(qū)域作為參照
2）脫標(biāo)
3）實(shí)現(xiàn)模式轉(zhuǎn)換的效果
層級(jí)：
1）定位的元素有層級(jí)關(guān)系
2）只有給定位的元素才能設(shè)z-index
特點(diǎn)：
1）元素設(shè)置定位后有個(gè)默認(rèn)的z-index ：auto（除去static）
2）z-index 值相同 元素后來(lái)居上
3）z-index 值越大 當(dāng)前的元素層級(jí)越高
4）父元素的z-index值越大 當(dāng)前的元素層級(jí)越高簡(jiǎn)單

  絕對(duì)定位如何居中？

◆通過(guò)設(shè)置left:50% ;         父元素寬度的一半
◆設(shè)置margin-left:     -元素自己寬度一半；

雙飛翼布局

目的：加載文檔時(shí)先加載中間區(qū)域，再加載左右兩邊

特點(diǎn)：兩側(cè)固定，中間自適應(yīng)

    <div class="container"> 
        <div class="columns mainbox"> 
            <div class="inner"> 
                我看見(jiàn)個(gè)會(huì)計(jì)課件發(fā)卡機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè)會(huì)計(jì)課件發(fā)卡機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè)會(huì)計(jì)課件發(fā)卡 
                機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè)會(huì)計(jì) 課件發(fā)卡機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè)會(huì)計(jì)課件發(fā)卡機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè) 
                會(huì)計(jì)課件發(fā)卡機(jī)看見(jiàn)看見(jiàn)我看見(jiàn)個(gè)會(huì)計(jì)課件發(fā)卡機(jī)看見(jiàn)看見(jiàn) 
            </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>