99资源 在线视频|美女人妻自慰淫叫|日韩欧美乱伦电影|超碰按摩国产超碰|av全球免费不卡|加勒比无码一区人妻|国产高清一区视频高清|一区二区三区精品伊人|无码加勒比人妻高清|久草中文在线一区蜜乳

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

 1，三特性

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

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

 

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

特殊情況：

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

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

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

3）優(yōu)先級：

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

2，Margin 的特點：

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

2）垂直外邊距塌陷？

解決方法：

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

3,Padding值特殊性

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

4,浮動

為什么用浮動？

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

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

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

  絕對定位如何居中？

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

 

 

雙飛翼布局

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

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

 

    <div class="container"> 
        <div class="columns mainbox"> 
            <div class="inner"> 
                我看見個會計課件發(fā)卡機看見看見我看見個會計課件發(fā)卡機看見看見我看見個會計課件發(fā)卡 
                機看見看見我看見個會計 課件發(fā)卡機看見看見我看見個會計課件發(fā)卡機看見看見我看見個 
                會計課件發(fā)卡機看見看見我看見個會計課件發(fā)卡機看見看見 
            </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>