css3
live 設(shè)置快捷鍵
常見(jiàn)設(shè)計(jì)稿：
640 iphone5 320分辨率 DPR 2.0
750 iphone6 ?375分辨率 DPR 2.0
1242 iphon6p 414*3分辨率 ?DPR3.0
720 小米
border-radius
border-radius:50%;
圓形，方形 邊長(zhǎng)的一半
前面是水平半徑，后面是垂直半徑
四個(gè)數(shù)字方向分別是左上 ?右上 ?右下 ?左下 ?順時(shí)針
線性漸變
linear-gradient
linear-gradient([<起點(diǎn)> |
| <角度>,]? <點(diǎn)>, <點(diǎn)>…)
只能用在背景上
顏色是沿著一條直線軸變化
參數(shù)
起點(diǎn)：從什么方向開(kāi)始漸變
left
惧笛、top泻轰、left top
角度：從什么角度開(kāi)始漸變
xxx deg的形式
點(diǎn)：漸變點(diǎn)的顏色和位置
red 50%，位置可選
重復(fù)線性漸變
css3選擇器
:nth-child(n) 第幾個(gè)元素 從1開(kāi)始設(shè)置
:nth-child(2n) 偶數(shù)元素 從0開(kāi)始設(shè)置
:nth-child(2n+1) 奇數(shù)元素
:nth-child(event) 根據(jù)奇偶數(shù)
:nth-of-type(n)
:first-child ?->nth-child(1) 第一個(gè)子元素
:first-of-type ->nth-of-type(1)
:last-child ? 最后一個(gè)子元素
:last-of-type
:only-child 僅有一個(gè)子元素
:only-of-type 同種類型的子元素只有一個(gè)
:div:empty{}查找作為父元素的空div給他設(shè)置樣式
徑向漸變
radial-gradient([[ || ] [at ]?,| at ,]?[,]+);
從“一個(gè)點(diǎn)”向多方向顏色漸變
shape形狀 ： ellipse橢圓、circle 圓形 或設(shè)置水平半徑,垂直半徑
size:漸變的大小，即漸變到哪里停止，有如下關(guān)鍵詞:
closest-side：最近邊
farthest-side：最遠(yuǎn)邊鹤树；
closest-corner：最近角；
farthest-corner：最遠(yuǎn)角 (默認(rèn)值)
position ：關(guān)鍵詞|數(shù)值|百分比
重復(fù)的徑向漸變
背景
background-size:cover ;背景圖不一定顯示完整逊朽，鋪滿整個(gè)容器
background-size:100% 100%;相對(duì)于元素寬高的百分比 罕伯；
background-size:contain;背景圖顯示完整，但是不一定鋪滿整個(gè)容器
background-origin
background-origin: padding-box; 從padding區(qū)域顯示 ?針對(duì)邊框內(nèi)部開(kāi)始定位
background-origin: border-box;從border區(qū)域顯示 ? ? 針對(duì)邊框外部開(kāi)始定位
background-origin: content-box; 從content區(qū)域顯示 針對(duì)內(nèi)容區(qū)域的左上角定位
background-clip
background-clip: padding-box;從padding區(qū)域往外裁剪
background-clip: border-box;/*從邊框區(qū)域往外裁剪 默認(rèn)*/
background-clip: content-box;/*從內(nèi)容區(qū)域往外裁剪*/
text ? 文本裁剪
盒子陰影
box-shadow: h ?v ?blur spread color inset;
h :水平方向偏移 x軸
v : 垂直方向偏移 y軸
blur : 模糊度
spread : 厚度
color : 顏色
inset :加上這個(gè)表示內(nèi)陰影 默認(rèn)是外陰影
第一個(gè)參數(shù)是x軸方向 第二個(gè)是y軸方向 第三個(gè)是模糊度 ?第四個(gè)是厚度 ?第五個(gè)是顏色
文字陰影
text-shadow : x y blur ?color
x軸偏移 ?y軸偏移 ?模糊度 ?顏色
多層陰影制作文字立體效果 ,設(shè)置多種顏色,中間以逗號(hào)隔開(kāi)
text-stroke: 2px blue
通過(guò)設(shè)定1px的透明邊框叽讳，可以讓文字變得平滑
顏色設(shè)成透明能創(chuàng)建鏤空字體
css3
`
transform
transition過(guò)渡動(dòng)畫(huà)屬性
語(yǔ)法：當(dāng)CSS屬性時(shí)發(fā)生改變時(shí)追他，在一定時(shí)間內(nèi)由起始值向結(jié)束值之間實(shí)現(xiàn)平滑過(guò)渡的動(dòng)畫(huà)效果
特點(diǎn)：1.只有兩種狀態(tài)，起始狀態(tài)和結(jié)束狀態(tài)
2.需要觸發(fā)條件岛蚤，例如js,偽類邑狸，媒體查詢等
細(xì)分屬性：
transition-property 過(guò)渡屬性 all(默認(rèn)值)
transition-duration 動(dòng)畫(huà)執(zhí)行的時(shí)間 （必須設(shè)置）
transition-timing-function 動(dòng)畫(huà)類型（動(dòng)畫(huà)運(yùn)行的速度）：ease（默認(rèn)值）|linear|ease-in(進(jìn)入時(shí)減速)|ease-out（出去時(shí)加速）|ease-in-out（先減速后加速）|貝賽爾曲線
transition-delay 延遲時(shí)間
復(fù)合寫(xiě)法
transition:all s linear s;
過(guò)渡動(dòng)畫(huà)效果的分析步驟：
1.確定過(guò)渡屬性
2.找到過(guò)渡屬性的起始值和結(jié)束值
3.在合適的位置上添加transition屬性
transform
transform
2D變型方法
transform:rotate(45deg) 正（從前往后）->順時(shí)針 負(fù)->逆時(shí)針 旋轉(zhuǎn)
transform:scale(x,y) 默認(rèn)值是1 <1縮小 >1放大 縮放
transform:skew(x,y) x:正->左 負(fù)->右 y: 正->下 負(fù)->上
transform:translate(tx,ty) tx：正->右 負(fù)->左 ty:正->下 負(fù)->上 ?平移
上述方法可以組合一起用，但是注意順序問(wèn)題,通常情況下涤妒，把translate()放在最后
transform-origin:center(默認(rèn)在元素的中心點(diǎn)) 變型的基準(zhǔn)點(diǎn)
rotate,skew,scale可以改變變型的基準(zhǔn)點(diǎn)单雾，但是translate()不能改變基準(zhǔn)點(diǎn)，永遠(yuǎn)是元素的中心點(diǎn)
animation
animation調(diào)用聲明的幀動(dòng)畫(huà)
1：animation-name:move;幀動(dòng)畫(huà)名稱 （必寫(xiě)）
2：animation-duration:1s;動(dòng)畫(huà)執(zhí)行的時(shí)間 （必寫(xiě)）
3：animation-timing-function：ease(默認(rèn)值)|linear... 運(yùn)行的速度（運(yùn)動(dòng)曲線）
- linear：線性過(guò)渡
- ease：勻速
- ease-in ：由慢到快
- ease-out:由快到慢
- steps(函數(shù)被劃分為幾步，start/end)默認(rèn)值是end
- start忽略第一幀 ?end忽略最后一幀
4：animation-delay:1s 延遲時(shí)間
5：animation-iteration-count :1|infinite(無(wú)數(shù)次) 動(dòng)畫(huà)執(zhí)行的次數(shù)
6：animation-direction:normal(默認(rèn)值)|reverse|alternate|alternate-reverse 動(dòng)畫(huà)運(yùn)行的方向
7：animation-play-state:running(默認(rèn)值)|paused(停止) 動(dòng)畫(huà)運(yùn)行的狀態(tài)
8：animation-fill-mode:none(默認(rèn)值:動(dòng)畫(huà)運(yùn)行結(jié)束后回到起始狀態(tài))|backwards(從第一幀開(kāi)始運(yùn)行)|forwards（動(dòng)畫(huà)運(yùn)行結(jié)束后停留在最后一幀）|both（開(kāi)始運(yùn)行時(shí)從第一幀開(kāi)始硅堆，結(jié)束時(shí)停留在最后一幀）
背景類有8個(gè)屬性
復(fù)合寫(xiě)法：
animation:move 1s linear 1s 2 reverse ?both;
有些屬性就設(shè)置默認(rèn)值屿储，則有時(shí)可簡(jiǎn)寫(xiě)成如下這樣：
animation:move 1s 1 1s both;
幀動(dòng)畫(huà)彌補(bǔ)了過(guò)渡動(dòng)畫(huà)的缺陷
特點(diǎn)：1.可以設(shè)置多種狀態(tài)，可以制作復(fù)雜的動(dòng)畫(huà)效果
2.不需要觸發(fā)條件渐逃，瀏覽器加載時(shí)直接可運(yùn)行
語(yǔ)法：實(shí)現(xiàn)幀動(dòng)畫(huà)需要兩個(gè)步驟：
@keyframes move{
form{
初始值
}
to{
}
}
1.通過(guò)@keyframes 動(dòng)畫(huà)名 設(shè)置動(dòng)畫(huà)運(yùn)行的軌跡
@keyframes move{
0%{百分比指相對(duì)于時(shí)間的百分比
設(shè)置CSS樣式
}
50%{
}
100%{
}
}
3D變型效果
在3D空間里展示必須設(shè)置如下兩個(gè)屬性：
transform-style:preserve-3d (3D空間里展示) 作用在變形元素的父標(biāo)簽上
perspective:800px ?景深效果 （近大遠(yuǎn)小的效果）作用在祖先標(biāo)簽上,到Z軸0坐標(biāo)位置的距離
perspective-origin:center (透視點(diǎn)位置够掠，默認(rèn)是在物體的中心位置上)
translate3d(tx,ty,tz);
translateX() translateY()
translateZ() 先找到正面，往正面的前面移動(dòng)是正值茄菊，則看到的物體變大疯潭，往正面的后面移動(dòng)，則看到的物體變小
scale3d(sx,sy,sz)
scaleX() scaleY()
scaleZ() 單個(gè)使用不起作用面殖，必須配合著其他變型方法一起使用才起作用
rotate3d(rx,ry,rz,a)rx,ry,rz向量坐標(biāo) a角度
rotateX(15deg) 正->前翻 負(fù)->后翻
rotateY(45deg) 正->往右 負(fù)->往左
rotateZ() 效果等同于rotate()效果袁勺，但是這個(gè)是在Z上旋轉(zhuǎn)
媒體查詢
@media screen and
@media 媒體 媒介
媒體類型 all 所有類型
screen 設(shè)備類型
print 打印機(jī)類型
TV 電視機(jī)類型
連接符 ? and
only
not
條件（）
min-width
max-width
大括號(hào) {
選擇器{
屬性名:屬性值；
屬性名：屬性值
}
}
頁(yè)面布局的方式有多少種
1：固定布局 寬高寫(xiě)死 px pc端
2：流失布局 ?百分比布局+媒體查詢+px單位 常用pc和移動(dòng)端公用一套頁(yè)面結(jié)構(gòu)
3：流式布局+rem單位 ? ? ? ? ? 常用在移動(dòng)端項(xiàng)目
4：flexbox 彈性布局 ?彈性盒模型 ?主要在移動(dòng)端
響應(yīng)式查詢
meta:vp 快捷鍵
viewport：視口畜普；
width:可視寬度
height：可視寬度
device-width物理設(shè)備寬度
user-scalable：是否允許用戶縮放
initial-scale=1.0：初始縮放比例 1.0 是沒(méi)有縮放 比1.0大的話，就是放大
maximum-scale=1.0：準(zhǔn)許用戶縮放到最大比例 1.0默認(rèn)
minimum-scale=1.0：準(zhǔn)許用戶縮放到最小比例
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒體類型
screen ?電腦 移動(dòng)端 屏幕
print:打印機(jī)
all:所有設(shè)備
max-width: 小于等于
min-width:大于等于
orientation: portrait 檢測(cè)豎屏
orientation: landscape 檢測(cè)橫屏
小于等于
@media screen and (max-width: 414px){
#box{
background: green;
}
}
大于等于
@media screen and (min-width: 415px){
#box{
background: red;
}
}
在800 -1000中改變
@media screen and (min-width:800px) and (max-width: 1000px){
#box{
background: #F82D2D;
width: 300px;
height: 300px;
}
}
檢查豎屏
@media all and (orientation: portrait) {
#box{
background: red;
height: 400px;
}
}
檢查橫屏
@media all and (orientation: landscape){
#box{
background: green;
width: 500px;
}
}
流式布局
流式布局群叶，又稱佰分百布局
width:設(shè)置成百分比 一行五個(gè)每個(gè)設(shè)置百分之二十
rem
window.devicePixelRatio 像素比
像素比=設(shè)備物理像素/設(shè)備獨(dú)立像素（css像素）
rem相對(duì)于根元素字體的單位 html
font-size=50px
1rem=50px
640/320=100/x
em 是根據(jù)上級(jí)父級(jí)
font-size=50px
1em=50px
動(dòng)態(tài)計(jì)算根元素字體
var desW = 640;
function resfreshRem() {
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}
/*resize 事件 窗口改變事件*/
window.addEventListener('resize', resfreshRem)
audio 音頻路徑地址
autoplay自動(dòng)播放 loop循環(huán)
src ?音頻的路徑
autoplay ?自動(dòng)播放
loop ?循環(huán)播放
preload 音頻是否有預(yù)加載的效果
auto - 當(dāng)頁(yè)面加載后載入整個(gè)音頻
meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù)
none - 當(dāng)頁(yè)面加載后不載入音頻
play(); ? 音頻播放
pause(); ?音頻暫停
paused; ? 暫停的狀態(tài)
canplay ? 緩沖到音頻可以播放的狀態(tài)
css3動(dòng)畫(huà)庫(kù)
bounceInLeft 從左邊飛入
bounceInRight 從右邊飛入
bounceInUp ?從下面飛入
zoomIn 從中間向兩邊展開(kāi)
產(chǎn)品形態(tài)
1：
- pc跟移動(dòng)端公用一套頁(yè)面結(jié)構(gòu) - 域名地址同一個(gè)吃挑，有一個(gè)人獨(dú)立完成獵豹，華為街立，mobike
2：
- pc和移動(dòng)端分離開(kāi) ?- 域名地址不同- 由不同的人開(kāi)發(fā)京東 淘寶 網(wǎng)易 騰訊 新浪
display: -webkit-box;/*控制他的方位*/
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient:vertical ;/*垂直方向
