CSS3學(xué)習(xí)
Tips：
兼容性查詢：caniuse.com
兼容寫法要寫在標(biāo)準(zhǔn)寫法之前
position:absolute 父級(jí)要加 position:relative
圓角磷籍、陰影沈矿、邊框厨相、背景
邊框圓角：
border-radius；-webkit-border-radius做粤；-
邊框圖像：
border-image (圖片、剪切、重復(fù)性：repeat/round/stretch)床佳；- 必須先定義border 寬度屬性
- -webkit-border-image
陰影：
box-shadow背景：background 多背景圖片
background-clip：border-box/padding-box/content-box
background-size:
contain(以最大的邊進(jìn)行適應(yīng)，能保證圖像完整)
cover(以最小邊為基準(zhǔn)放大榄审，超出裁切)
100px 100px(用具體尺寸縮放)
50% 50%(用百分比縮放)顏色：
color:#123456/color:red/color:rgb(255,255,0)/color:rgba(255,255,0,0.2)文字省略：text-overflow 必須三個(gè)條件1.定義容器寬度（width）2.white-space:nowrap;3.text-overflow:ellipsis|clip
文字換行：
word-wrap:break-word|normal文字陰影：
text-shadow文本字體：
@font-face屬性選擇器：
input[type="text"]... div[class^="xxx"] a[href^="http://"] 選擇屬性的值以指定值開始 div[class$="xxx"] img[src$="jpg"] 選擇屬性的值以指定值結(jié)束 div[class*="xxx"] 選擇屬性的值包含指定值-
偽類選擇器：
:visited/:hover/:focus/:active input:not([type="submit"]){} p:empty{} 內(nèi)容為空的元素選擇器 :target 目標(biāo)選擇器 :first-child/:last-child :nth-child(n)/:nth-last-child(n) odd奇數(shù) even偶數(shù) 3n-2 一行的第三個(gè)：3n :first-of-type/:last-of-type :nth-of-type/:nth-last-of-type(n) :only-child 滿足一個(gè)元素只有一個(gè)子元素 :only-of-type 一個(gè)元素有很多子元素砌们，唯一一個(gè)類型的 :enabled/:disabled/:read-only/:read-write/:checkedTips
<lable for="x"></lable><font color=red>父級(jí)必須 position:relative 下級(jí)：position:absolute</font>
內(nèi)聯(lián)元素沒有寬高
同級(jí)元素+ 子元素> 后代元素 空格
::seletion
::before/::after(配合content使用)
用::after清除浮動(dòng)：clearfix:after{content:"";display:block;clear:both;}
例子：li:not(:last-child)::after{ content: "|"; } -
過渡效果：
transition all 0.5s ease 1s;一般采用簡(jiǎn)寫方式，加在元素初始狀態(tài)上搁进；Tips
diaplay:none沒有過渡 2D轉(zhuǎn)換：
位移：-webkit-transform:translate(x,y) translateX(x) translateY(y)位移必用
旋轉(zhuǎn)：-webkit-transform:rotate(45deg)
縮放：-webkit-transform:scale(x,y) scaleX(x) scaleY(y)
傾斜：-webkit-transform:skew(45deg) skewX(45deg) sekwY(45deg)3D轉(zhuǎn)換
<font color=red>父元素必須加transform-style:preserve-3d和perspective:500兩個(gè)屬性</font>
3D位移：-webkit-transform:translate3d(x,y,z) translateZ(z)可以單獨(dú)使用實(shí)現(xiàn)縮放浪感，會(huì)打開GPU性能好
3D旋轉(zhuǎn)：-weblit-transform:rotate3d(x,y,z,a) rotateX(x) rotateY(y) rotateZ(z)
3D縮放：-weblit-transform:scale3d(sx,sy,sz) scaleZ(z)動(dòng)畫
@keyframes 規(guī)定動(dòng)畫
animation: myname 3s ease|linear ;響應(yīng)式布局
viewport 響應(yīng)視窗
@media 媒體查詢@media(max-width:480px){......}
超小屏幕（手機(jī)，小于768px）@media(max-width:767px){......}
小屏幕（平板饼问，大于等于768px）@media(min-width:768px){......}
中等屏幕（桌面顯示器影兽，大于等于992px）@media(min-width:992px){......}
大屏幕（大桌面顯示器，大于等于1200px）@media(min-width:1200px){......}
media type：screen/TV/print/projection/all
@media only screen and (max-width:480px){......}響應(yīng)式圖片
手機(jī)端圖片尺寸768
media或者 picture標(biāo)簽
<font color=D90000>box-sizing:border-box;</font>
!important 增加權(quán)重
