其實標(biāo)簽就那么點東西，在小碼哥的基礎(chǔ)課，最重要的是系統(tǒng)的學(xué)習(xí)了一邊常用CSS屬性。
期間真的學(xué)到了很多，話不多說，直接上筆記
清除浮動
外墻法
內(nèi)墻法
第一個盒子overflow:hidden；ie6不兼容
.classname{
/兼容ie6/
*zoom:1;
}
偽元素
::before
::after
visibility:hidden;
最適合用來清除浮動，ie6不兼容
.classname{
/兼容ie6/
*zoom:1;
}
overflow:hidden；
大盒子中的小盒子想要margin-top。給大盒子hidden，就不會被頂下來。父子關(guān)系最好不用margin
box-sizing:border-box;
當(dāng)我把父元素寬度寫死，加上邊框，子元素的位置就會被占去邊框?qū)挾?2，設(shè)置浮動的時候注意
導(dǎo)航條選項卡
一定用ul
空鏈接
<a href="javascript:">空鏈接</a>不跳轉(zhuǎn)
<a href="#">空鏈接</a>跳轉(zhuǎn)到頂部
base
統(tǒng)一設(shè)置a標(biāo)簽是否打開新窗口,放在head里
<base target="_blank">
下拉選擇框optgroup標(biāo)簽，label屬性
你的屏幕壞了
<marquee direction="right" scrollamount="1000000000" behavior="alternate" loop="-1">
</marquee>
顏色透明度
rgba(r,g,b,a);
背景圖不隨滾動條移動
backfground-att:fixed;
ie6不支持固定定位
z-index默認(rèn)值為0，只在定位流有用。
默認(rèn)定位流蓋住標(biāo)準(zhǔn)流
后面的定位流蓋住前面的定位流。
導(dǎo)航條z-index加一防止被蓋住。
z軸值會從父。
a標(biāo)簽的偽類選擇器
:link 默認(rèn)
:visited 被訪問過
:active 鼠標(biāo)長按（點擊時效果會一閃而過）
:hover 懸停
如果設(shè)置這四個屬性共存，順序不可打亂。
link和visited屬性一樣時，可以用color屬性替代。
a
在企業(yè)開發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中(顯示模式/寬度/高度/padding/margin)
和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中
過渡效果
transition-property:propertyName;指定誰過度
transiton-duration:time;過渡效果時長
同時指定多個屬性用逗號連接，再依次指定時間
transition-delay:time;延遲執(zhí)行
transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out;勻速，。。。
transition: propertyName,duration,timing-function,delay;連寫格式，多個屬性也使用逗號隔開。屬性寫all就是全部
2d轉(zhuǎn)換
transform
rotate旋轉(zhuǎn)后，元素的xy軸也會旋轉(zhuǎn)
transform-origin修改形變中心點,px,%,center等
默認(rèn)圍繞z軸旋轉(zhuǎn)，rotaeX圍繞x軸旋轉(zhuǎn)
perspective:xxpx;透視，傳入一個觀察距離。添加到父元素。
translate位移，scale縮放（子元素會隨著父元素縮放）；
圖片自適應(yīng)問題
父盒子寬度100%，固定寬度假設(shè)450px；
圖片想設(shè)置為固定高度450px，寬度100%，但是不變形，自動剪裁兩邊(圖片比視口寬)；
解答：背景圖可解
陰影
box-shadow:水平偏移，垂直偏移，模糊度；陰影擴展，陰影顏色，內(nèi)外陰影（inset內(nèi)）。
默認(rèn)顏色：由盒子內(nèi)部文字顏色決定
text-shadow:水平，垂直，模糊度；顏色。
animation
animation-direction:alternate(往返)，normal（默認(rèn)從頭）
animation-play-state:paused(暫停)running（動起來）
@keyframs name
指定動畫，用%或者from to
animation-fill-mode:none.forwards.backwards.both;不改變，結(jié)束狀態(tài)保持最后一幀，讓元素等待狀態(tài)時顯示第一幀，forwards+backwards
無限滾動
最后加上前一兩張，再跳轉(zhuǎn)
hover優(yōu)先級
更具體的優(yōu)先級高(把父元素指定清楚)
webstorm快捷方式
element>sunElement{text}*num+tab
指定子標(biāo)簽，{}寫標(biāo)簽內(nèi)容。此外還有.類名。
preserve-3d
transform-style:preserve-3d;讓子元素呈現(xiàn)3d效果
正方體制作流程
上后下前的順序，x軸分別轉(zhuǎn)90deg，180，270，360；然后z軸平移寬度一半；（坐標(biāo)系會跟著旋轉(zhuǎn)）
background-size:cover;
背景圖填滿盒子
vertical-align: middle;
考試做努比亞底部時，行內(nèi)元素a標(biāo)簽，部分掉下去，使用這個屬性解決
該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。
學(xué)HTML5就選李南江，選培訓(xùn)機構(gòu)我只選小碼哥（www.520it.com）
