寫(xiě)在前面：本文簡(jiǎn)單介紹一下css的三大特性：層疊性、繼承性、優(yōu)先級(jí)。以及margin,padding,
浮動(dòng)，定位幾個(gè)知識(shí)點(diǎn)。限于水平，不深入探討，僅作為學(xué)習(xí)總結(jié)。
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: 。
h1-h6 默認(rèn)單位是em 具體大小要乘積運(yùn)算
3）優(yōu)先級(jí)：
標(biāo)簽選擇器<類(lèi)選擇器 <ID選擇器 < 行內(nèi)樣式 <! Important
1）垂直外邊距合并（取大的）
2）垂直外邊距塌陷？
解決方法：
給父元素設(shè)置邊框。
給父元素設(shè)置 overflow:hidden（觸發(fā)bfc）
在塊級(jí)元素中，如果默認(rèn)子元素沒(méi)有設(shè)置寬度，給當(dāng)前子元素設(shè)置padding值，
不會(huì)影響當(dāng)前子盒子的寬度。（"繼承"的盒子padding值不會(huì)影響）
為什么用浮動(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)單
◆通過(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>
【 微信掃一掃 】
