css3：
屬性選擇器（^ $ *）
僞類選擇器（root、not、empty、target）
僞元素選擇器（selection）
僞元素 after before first-letterfirst-line
層次選擇器（> + ~）
盒模型 box-sizing
伸縮盒子display:flex
多列布局：column-（count width gap rulespan）
變形transform（translate、scale、rotate、skew、matrix）
過渡動畫transtion（property、duration、timing-function、delay）過渡屬性，過渡時間過渡函數 延遲時間
動畫鋪墊animation可以按指定的幀狀態過渡執行（0-100%）
漸進增強，優雅降級
先考慮低端設備能否看到所有內容，在此基礎上爲高端用戶帶來更好的體驗
對應不同級別的瀏覽器，有不同的頁面，主要內容要表示出來
漸進增強，
對於支持css3的瀏覽器，做出適當的css3屬性
不支持css3的瀏覽器，做出模擬css3的樣式
本質上讓低級瀏覽器渲染頁面好看一些，但是沒有得到實質性的提高
CSS3 屬性選擇器
class中出現的字符 ^開頭 $結尾 *任意位置出現
div[class*='jc']
僞類選擇器
1.根標籤選擇器:root 相當於html
2.否定選擇器div:not([class*= 'a'])
3.空標籤選擇器 選擇標籤裏沒有任何內容的
<div class="1jcDy1"></div>
<div class="1Dyjc1"></div>
<div class="aaa"></div>
<div></div>
4.目標元素選擇器
:target{
display: block;
background-color: yellow;
}
<a href="#anchor">12222</a>
<div id="anchor">1111</div>
僞元素選擇器
1. p::selection 該標籤被選中的時候，背景可以改變顏色，火狐下要加-moz
層次選擇器
E>F直接子元素
EF
E+F後面緊跟着的兄弟節點
E~F通用選擇器
動態僞類選擇器
:link
E:hover
E:focus
E:visted
E:active
目標僞類選擇器
E:target
UI 元素僞類元素選擇器
E:check
E:enabled
E:disabled
E :first-child
:last-child
:nth-child(n);
:nth-last-child(n);
:nth-of-type()
:last-of-type()
僞元素
::after
::before
::first-letter
::first-line
CSS3 盒模型
W3C標準和模型
內盒width =content
IE 傳統盒模型 IE6以下
width = content + padding + border
CSS3 盒模型
box-sizing:
content-box標準盒模型
border-box IE盒模型
inherit繼承父級盒模型
outline
border
伸縮佈局盒模型(float不能用，在移動端不能定寬,用伸縮盒子可以自適應)
display:flex;
flex 設置伸縮盒子
flex-grow 將盒子剩餘部分按比例分配
flex-shrink 設置或檢索彈性盒的收縮比率
flex-basis 設置或檢索彈性盒伸縮基準值。
flex-flow 複合屬性。設置或檢索伸縮盒對象的子元素排列方式。
flex-direction 設置或檢索伸縮盒對象的子元素在父容器中的位置。
flex-wrap 設置或檢索伸縮盒對象的子元素超出父容器時是否換行。
align-content 設置或檢索彈性盒堆疊伸縮行的對齊方式。
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align-self 設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。
justify-content 設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
order 設置或檢索伸縮盒對象的子元素出現的順序。
// /父級
justity-content center 水平居中
align-content:center 垂直居中//多行元素起作用
align-items:center
css3多列布局
column-conut：2 兩列
column-width:400px; 每一列的寬度
這兩個不能混着用
column-gap:200px 列與列之間的寬度
-webkit-column-rule:10px solid red; 列邊框，不會影響寬度
column-span:all; 跨越列，當標題欄
如果給容器大小，超過容器大小，就會變成一列，默認溝壑寬度是font-size
50px 400px 16px conut
column - width = (width-(n-1)*font-size)/n
div {
width: 400px;
border:2px solid black;
-webkit-column-width:195px;
-webkit-column-rule:10px solid red;
-webkit-column-count:2;
-webkit-column-gap:0;
}
漸變
linear-gradient(top color color )
變形
transform
translate() 移動
scale() 縮放
rotate() 旋轉
skew() 傾斜
matrix()
transform-origin 指定元素中心點的位置
transfrom-style :flat / preserve-3d
perspective 景深
translate3d(tx,ty,tz)3d 位移
translateZ()
scale3d(x,y,z) >0 縮小 <1>1 放大
scaleZ() -1表示對稱點
rotate3d(x,y,z,deg)
rotateX
torateY
rotateZ
css過渡
transtion 過渡屬性，過渡時間 過渡函數 延遲時間
觸發過渡
僞元素觸發
：hover
：focus
：check
媒體查詢觸發
@media
JavaScript觸發
觸發過渡
有起始點
有終止點
利用transtion 完成過渡
通過硬件加速使得過渡更流暢
transform translateZ(0);
帶有硬件加速的過渡
CSS3 動畫
animation 關鍵幀動畫名字 播放時間 動畫播放方式
延遲 循環次數 播放方向 播放狀態
animation-fill-mode :forwards(播放完 保持在最後一針)
@key-frames name {
from{}persent{}to{}
}
媒體查詢
引入方式
<Link media="screen"></Link>
@import URL（） screen
@media
max-width
min-width
屏幕輸出寬度device-width