人人爽人人澡人人添人人人人I国产99免费视频I婷婷播播网I色婷婷久久久综合中文字幕I在线亚洲欧美日韩I欧美一级性视频I高清在线一区二区

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

 1，三特性

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

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

 

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

特殊情況：

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

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

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

3）優(yōu)先級：

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

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

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

2）垂直外邊距塌陷？

解決方法：

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

3,Padding值特殊性

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

4,浮動

為什么用浮動？

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

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

如何清理浮動？（這里介紹常見的4種）
1，clear：both;
2,給父元素設(shè)置overflow：hidden;(父元素沒有定位)
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，絕對 （absolute） ：
1）標(biāo)準(zhǔn)流下的盒子，設(shè)置絕對定位以body 為參照
2）除了父盒子設(shè)置static ，其他定位方式，子盒子以父盒子為參照
3）絕對定位的元素脫標(biāo)
4）實(shí)現(xiàn)模式轉(zhuǎn)換的效果
使用場景：1，盒子壓盒子 2，絕對定位可以使用margin padding
3，相對（relative）：相對自己作為參照，不會脫標(biāo)
使用子絕父相
4，固定（fixed）：
1）以body標(biāo)簽可視區(qū)域作為參照
2）脫標(biāo)
3）實(shí)現(xiàn)模式轉(zhuǎn)換的效果
層級：
1）定位的元素有層級關(guān)系
2）只有給定位的元素才能設(shè)z-index
特點(diǎn)：
1）元素設(shè)置定位后有個(gè)默認(rèn)的z-index ：auto（除去static）
2）z-index 值相同 元素后來居上
3）z-index 值越大 當(dāng)前的元素層級越高
4）父元素的z-index值越大 當(dāng)前的元素層級越高簡單

  絕對定位如何居中？

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

 

 

雙飛翼布局

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

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

 

    <div class="container"> 
        <div class="columns mainbox"> 
            <div class="inner"> 
                我看見個(gè)會計(jì)課件發(fā)卡機(jī)看見看見我看見個(gè)會計(jì)課件發(fā)卡機(jī)看見看見我看見個(gè)會計(jì)課件發(fā)卡 
                機(jī)看見看見我看見個(gè)會計(jì) 課件發(fā)卡機(jī)看見看見我看見個(gè)會計(jì)課件發(fā)卡機(jī)看見看見我看見個(gè) 
                會計(jì)課件發(fā)卡機(jī)看見看見我看見個(gè)會計(jì)課件發(fā)卡機(jī)看見看見 
            </div> 

        </div> 
        <div class="columns leftbox"></div> 
        <div class="columns rightbox"></div> 
    </div> 

 

　　

<style> 
        body { 
            min-width: 1000px; 
        } 
         
        .columns { 
            height: 250px; 
            float: left; 
        } 
         
        .container { 
            height: 250px; 
            border: 1px solid red; 
        } 
         
        .mainbox { 
            width: 100%; 
            background: yellow; 
        } 
         
        .inner { 
            margin: 0 300px 0 250px; 
            word-break: break-all; 
        } 
         
        .leftbox { 
            width: 250px; 
            background: red; 
            margin-left: -100%; 
        } 
         
        .rightbox { 
            width: 300px; 
            background: blue; 
            margin-left: -300px; 
        } 
    </style>