寫在前面：本文簡單介紹一下css的三大特性：層疊性、繼承性、優先級。以及margin,padding,
浮動，定位幾個知識點。限于水平，不深入探討，僅作為學習總結。
1）層疊性：同標簽同權重下，樣式沖突，后面的樣式會覆蓋前面的。
2）繼承性：給父元素設置樣式的時候，子元素在默認沒有樣式
的情況下會受父元素的樣式影響。注意寬高不能繼承。
可繼承的屬性：
◇文字顏色可以被繼承 color
◇與文字相關的屬性都可以被繼承
◆行高（line-height） 可以被繼承
◆text-align
特殊情況：
a 標簽默認情況下不會受父級元素的顏色影響
常見的在制作nav 中給li 設置顏色a標簽不起作用，
原因是受到瀏覽器默認的樣式影響 color: 。
h1-h6 默認單位是em 具體大小要乘積運算
3）優先級：
標簽選擇器<類選擇器 <ID選擇器 < 行內樣式 <! Important
1）垂直外邊距合并（取大的）
2）垂直外邊距塌陷？
解決方法：
給父元素設置邊框。
給父元素設置 overflow:hidden（觸發bfc）
在塊級元素中，如果默認子元素沒有設置寬度，給當前子元素設置padding值，
不會影響當前子盒子的寬度。（"繼承"的盒子padding值不會影響）
為什么用浮動？
開始是作為 圖片文字環繞效果設計現在多用在布局和導航 制作
什么時候清理浮動？
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，靜態（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: -元素自己寬度一半；
目的：加載文檔時先加載中間區域，再加載左右兩邊
特點：兩側固定，中間自適應
<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>
【 微信掃一掃 】
