寫在前面：本文簡單介紹一下css的三大特性：層疊性、繼承性、優(yōu)先級。以及margin,padding,
浮動，定位幾個知識點(diǎn)。限于水平，不深入探討，僅作為學(xué)習(xí)總結(jié)。
1）層疊性：同標(biāo)簽同權(quán)重下，樣式?jīng)_突，后面的樣式會覆蓋前面的。
2）繼承性：給父元素設(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: 。
h1-h6 默認(rèn)單位是em 具體大小要乘積運(yùn)算
3）優(yōu)先級：
標(biāo)簽選擇器<類選擇器 <ID選擇器 < 行內(nèi)樣式 <! Important
1）垂直外邊距合并（取大的）
2）垂直外邊距塌陷？
解決方法：
給父元素設(shè)置邊框。
給父元素設(shè)置 overflow:hidden（觸發(fā)bfc）
在塊級元素中，如果默認(rèn)子元素沒有設(shè)置寬度，給當(dāng)前子元素設(shè)置padding值，
不會影響當(dāng)前子盒子的寬度。（"繼承"的盒子padding值不會影響）
為什么用浮動？
開始是作為 圖片文字環(huán)繞效果設(shè)計(jì)現(xiàn)在多用在布局和導(dǎo)航 制作
什么時候清理浮動？
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è)置定位后有個默認(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: -元素自己寬度一半；
目的：加載文檔時先加載中間區(qū)域，再加載左右兩邊
特點(diǎn)：兩側(cè)固定，中間自適應(yīng)
<div class="container">
<div class="columns mainbox">
<div class="inner">
我看見個會計(jì)課件發(fā)卡機(jī)看見看見我看見個會計(jì)課件發(fā)卡機(jī)看見看見我看見個會計(jì)課件發(fā)卡
機(jī)看見看見我看見個會計(jì) 課件發(fā)卡機(jī)看見看見我看見個會計(jì)課件發(fā)卡機(jī)看見看見我看見個
會計(jì)課件發(fā)卡機(jī)看見看見我看見個會計(jì)課件發(fā)卡機(jī)看見看見
</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>
【 微信掃一掃 】
