堅(jiān)持以下原則：
（1）漸進(jìn)增強(qiáng)
（2）添加私有前綴
（3）考慮用戶群體
【 選擇器 】css3 在之前的基礎(chǔ)上面擴(kuò)展了三種類型的選擇器
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">（獲取到一個(gè)元素有多重方式，我們要控制頁面上面的元素，必須先得到頁面上面的元素,假設(shè)你的頁面的層級結(jié)構(gòu)比較復(fù)雜的時(shí)候）</pre>
（1）屬性選擇器
a[href] 所有的a 標(biāo)簽，這個(gè)a需要有 href 屬性
a[href='demo'] 所有的a 標(biāo)簽，這個(gè)a需要有 href=demo
a[href*='demo'] 包含demo
a[href^='demo'] 以demo 開始
a[href$='demo'] demo 結(jié)束
（2）偽類選擇器
a:active a:link a:hover a:visited
新增:
li:first-child
li:last-child
li:nth-child() 根據(jù)n 去取值,索引是從1開始計(jì)算
li:nth-last-child 從后向前計(jì)算，倒著算
n 的用法. 取值0,1,2,3,4...
empty 空的.
div:empty 選中沒有子元素的div
div:target 結(jié)合錨點(diǎn)進(jìn)行使用，處于當(dāng)前錨點(diǎn)的元素會被選中；
（3）偽元素選擇器
我們的偽元素選擇器是:: 兩個(gè)
before: 想元素里面添加一個(gè)子元素，這個(gè)資源在最前面（它默認(rèn)是一個(gè)行內(nèi)元素，我們需要轉(zhuǎn)換成一個(gè)塊元素，必須設(shè)置content:''）
after: 想元素里面添加一個(gè)子元素，這個(gè)資源在最后面
first-letter 選中第一個(gè)字或者字母。
first-line 選中第一行
::selection 可改變選中文本的樣式；
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">1 //選中.demo 的父元素下面的第二個(gè)子元素，并且這個(gè)子元素有一個(gè)class 屬性，它的的值是demo 2 .demo:nth-child(2){ 3 }</pre>
（4）有兩種新增方式可以表示顏色
rgba （ red，green，blue，Alpha 透明通道）
hsla（Hue 色調(diào)，Saturation 飽和度，Lightness 亮度，Alpha 透明度）
如果給父盒子設(shè)置了透明度，子盒子會繼承父盒子的透明度；新增的顏色的標(biāo)識方式里面，支持設(shè)置透明，而且設(shè)置的透明不會影響到子盒子；我想實(shí)現(xiàn)半透明的效果，我就可以使用 rgba,hsla 顏色的表示方式.
（5）text-shadow 可以設(shè)置文本陰影，實(shí)際上就是給文本添加影子..
text-shadow:1px 1px 1px red;
第一個(gè)1px 向右移動，負(fù)值的是向左移動（正值向右偏移，負(fù)值向左偏移）
第二個(gè)1px 向下移動 ，負(fù)值是向上移動(正值是向下偏移，負(fù)值向上偏移)
第三個(gè)1px 向下移動 代表的是模糊度，，不能為負(fù)數(shù)，值越大，越模糊（模糊度，不能為負(fù)數(shù)，值越大，模糊度越高）
第四個(gè)red 代表模糊的顏色. 影子的顏色.
text-shadow:1px 1px 1px red,-1px -1px 1px red
// 可以為文本添加多個(gè)影子
（6）盒子模型
我們可以改變盒子計(jì)算寬高的方式，通過設(shè)置盒子的這個(gè)屬性
box-sizing:content-box/border-box
content-box 盒子的高度以及寬度 盒子的寬度=width+padding+border
border-box 盒子的高度以及寬度 盒子的高度以及寬度=width
【 邊框圓角 】
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">border-radius:
1:正圓
2：橢圓 x 軸 ，y 軸的概念.
3:android 機(jī)器人
4:小機(jī)器貓.
box-shadow 邊框陰影；可以設(shè)置邊框的陰影，外陰影，內(nèi)陰影.
border-image:
1:我們可以為邊框設(shè)置圖片，之前設(shè)置的都是背景色</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;">而現(xiàn)在我們可以為四個(gè)邊設(shè)置邊框圖片。
我們只需要一張圖，瀏覽器會自動幫我們進(jìn)行裁剪。然后我們還可以指定寬度
指定邊框圖片的平鋪方式.</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> 1：border-image-source 邊框圖片的路徑
2：border-image-slice 裁剪的方式
3: border-image-width 邊框的寬度
4: border-image-repeat:round,stretch,repeat
【 漸變 】
線性漸變:
liner-gradient(
135deg, 需要有一個(gè)角度. (順時(shí)針方向)
yellow 25%, 起始顏色
green 50% 終止顏色
)
徑向漸變：一個(gè)中心點(diǎn)，朝著四周進(jìn)行漸變
radius-gradient(
100px at center center 半徑 at 中心點(diǎn)的位置
yellow 起始顏色
green 終止顏色
)
【 背景 】
背景尺寸：
我們可以為一個(gè)div 設(shè)置背景，
1：假設(shè)我的背景圖片的大小超過了盒子的大小.
我們顯示的背景不全面
我們這個(gè)時(shí)候可以設(shè)置背景的大小與盒子的大小一致.
但是我們不能做到盒子變大，背景變大
background-size:contain cover
contain: 背景圖片始終完全顯示，等比例縮放.
cover: 也會縮放，背景始終填充整個(gè)區(qū)域</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> ** 背景原點(diǎn):**
background-origin: 可以設(shè)置背景圖片的位置.
background-origin:border-box,padding-box,content-box;</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> border-box 背景的原點(diǎn)在border 上面
padding-box 背景的原點(diǎn)在內(nèi)邊距上面
content-box 背景的遠(yuǎn)在content 內(nèi)容區(qū)域</pre>
<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word;"> 背景裁剪：
background-clip: border-box,padding-box,content-box;
多重背景：
url("images/bg1.png") left top no-repeat,
url("images/bg2.png") right top no-repeat,
url("images/bg3.png") right bottom no-repeat,
url("images/bg4.png") left bottom no-repeat,
url("images/bg5.png") center center no-repeat;
【 2D轉(zhuǎn)換】可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式
1、移動 translate(x, y) 可以改變元素的位置，x、y可為負(fù)值；
2、縮放 scale(x, y) 可以對元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，不可為負(fù)值；
4、旋轉(zhuǎn) rotate(deg) 可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；
5、傾斜 skew(deg, deg) 可以使元素按一定的角度進(jìn)行傾斜
【 過渡 】 我們要完成過渡，我們需要使用一個(gè)transition這樣的一個(gè)屬性
過渡 當(dāng)觸發(fā)的時(shí)候會有過渡的效果
1.transition-property:none|all|某一個(gè)屬性值
2.transition-duration：多少秒 也就是說過渡效果執(zhí)行多長時(shí)間 默認(rèn)的是0s
3.transition-timing-function:ease|linear|ease-out|ease-in|ease-in-out|貝塞爾曲線的參數(shù)值cubic-bezier(number，number，number，number)|steps（走幾步，start|end）
ease：兩頭慢，中間快
Linear：勻速
Ease-in：開始慢
Ease-out：結(jié)束慢
Ease-in-out：開始結(jié)束慢
Ease和ease-in-out的區(qū)別就是ease-in-out的幅度更大一點(diǎn)
4.transition-delay:延遲多少秒; 默認(rèn)的是0s
5.transition合寫
例如：transition:left 2s ease 1s
【 過渡 】 不用觸發(fā)自己執(zhí)行，而且可以做多貞的動畫
1.animation-name：none|自己命名
2.animation-duration：動畫多長時(shí)間
3.animation-timing-function 運(yùn)動軌跡和過渡的參數(shù)是一模一樣的，同上
4.animation-iteration-count：infinite|動畫執(zhí)行的次數(shù) 默認(rèn)是1次
5.animation-direction：normal|reverse|alternate|alternate-reverse 方向
alternate往返
alternate-reverse相反的往返
6.animation-play-state：running|paused 讓動畫暫停或者是繼續(xù)播放
7.animation-delay延遲
8.animation-fill-mode：none|backwards|forwards|both
動畫在開始的時(shí)候是否要保持第一針的設(shè)置，動畫在結(jié)束的時(shí)候是否保持結(jié)束時(shí)的狀態(tài)
None：不做設(shè)置
Backwards動畫開始在第一貞的狀態(tài)
forwards結(jié)束的時(shí)候保持動畫最后那貞的狀態(tài)
Both開始的時(shí)候保持第一貞的狀態(tài)，結(jié)束的時(shí)候保持結(jié)束時(shí)候的狀態(tài)
9.合寫 animation
animation：abc 2s ease 0s 1 normal none running
1 播放次數(shù)
Normal 方向 direction
None fill-mode
Running 播放狀態(tài)
動畫貞兩種書寫方式
@-webkit-keyframes abc{
0%{left:0;top:0;}
50%{left:250px;top:100px;}
100%{left:500px;top:0;}
}
@-webkit-keyframes abcd{
0%{color:#fff;}
100%{color:#000;}
}
@-webkit-keyframes abcde {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
1、伸縮布局
CSS3在布局方面做了非常大的改進(jìn)，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用。
如下圖：
主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目，默認(rèn)是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的
方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下
主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。
（1）必要元素：
1.flex-direction
決定主軸的方向，即項(xiàng)目排列的方向，有四個(gè)可能的值：row(默認(rèn))|row-reverse|column|column-reverse
row:主軸為水平方向，項(xiàng)目沿主軸從左至右排列
column：主軸為豎直方向，項(xiàng)目沿主軸從上至下排列
row-reverse：主軸水平，項(xiàng)目從右至左排列，與row反向
column-reverse：主軸豎直，項(xiàng)目從下至上排列，與column反向
2、flex-wrap
默認(rèn)情況下，item排列在一條線上，即主軸上，flex-wrap決定當(dāng)排列不下時(shí)是否換行以及換行的方式，可能的值nowrap(默認(rèn))|wrap|wrap-reverse
nowrap：自動縮小項(xiàng)目，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
3、flex-flow
是flex-direction和flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認(rèn)值為row nowrap，即橫向排列 不換行。
4、justify-content
決定item在主軸上的對齊方式，可能的值有flex-start（默認(rèn)），flex-end，center，space-between，space-around。當(dāng)主軸沿水平方向時(shí)，具體含義為
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
5、align-items
決定了item在交叉軸上的對齊方式，可能的值有flex-start|flex-end|center|baseline|stretch，當(dāng)主軸水平時(shí)，其具體含義為
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當(dāng)item未設(shè)置高度時(shí)，item將和容器等高對齊
6、align-content
該屬性定義了當(dāng)有多根主軸時(shí)，即item不止一行時(shí)，多行在交叉軸軸上的對齊方式。注意當(dāng)有多行時(shí)，定義了align-content后，align-items屬性將失效。align-content可能值含義如下（假設(shè)主軸為水平方向）：
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
stretch：各行將根據(jù)其flex-grow值伸展以充分占據(jù)剩余空間
四、flex item屬性詳述
item的屬性在item的style中設(shè)置。item共有如下六種屬性
1、order
order的值是整數(shù)，默認(rèn)為0，整數(shù)越小，item排列越靠前
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="order:4"><h2>item 1</h2></div>
<div class="div" style="order:2"><h2>item 2</h2></div>
<div class="div" style="order:3"><h2>item 3</h2></div>
<div class="div" style="order:1"><h2>item 4</h2></div>
</div></pre>
2、flex-grow
定義了當(dāng)flex容器有多余空間時(shí)，item是否放大。默認(rèn)值為0，即當(dāng)有多余空間時(shí)也不放大；可能的值為整數(shù)，表示不同item的放大比例，如
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div></pre>
即當(dāng)有多余空間時(shí)item1、item2、和item3以1：2:3的比例放大。
3、flex-shrink
定義了當(dāng)容器空間不足時(shí)，item是否縮小。默認(rèn)值為1，表示當(dāng)空間不足時(shí)，item自動縮小，其可能的值為整數(shù)，表示不同item的縮小比例。flex-grow
4、flex-basis
表示項(xiàng)目在主軸上占據(jù)的空間，默認(rèn)值為auto。如下代碼
<pre style="margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; font-size: 12px !important;"><div class="wrap">
<div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
<div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
<div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div></pre>
5、flex
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和。
6、align-self
align-self屬性允許item有自己獨(dú)特的在交叉軸上的對齊方式，它有六個(gè)可能的值。默認(rèn)值為auto
auto：和父元素align-self的值一致
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當(dāng)item未設(shè)置高度時(shí)，item將和容器等高對齊
3、Web字體
3.1 字體格式
不同瀏覽器所支持的字體格式是不一樣的，所以我們有必要了解一下有關(guān)字體格式的知識。
1、TureType(.ttf)格式
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字體是Web字體中最佳格式，他是一個(gè)開放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+；
5、SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知識后，我們就需要為不同的瀏覽器準(zhǔn)備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。
推薦http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字體
3.2 字體圖標(biāo)
下載自定義圖標(biāo)放到項(xiàng)目中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試字體圖標(biāo)的使用</title>
<!-- 1.引入字體圖標(biāo)樣式 -->
<link rel="stylesheet" href="iconfont.css">
<style type="text/css">
@font-face {
/* 1.首先指定字體的系列,我們指定為字體圖標(biāo) */
font-family: "iconfont";
/* 2.接下來的代碼指定了字體圖標(biāo)的路徑,兼容了各種移動端瀏覽器和PC端瀏覽器,你可以根據(jù)自己的需要,刪除不必要的兼容 */
src: url('iconfont.eot?t=1541904002925'); /* IE9*/
src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
}
/* 3.這里設(shè)置字體圖標(biāo)的默認(rèn)樣式,你可以更改默認(rèn)樣式 */
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4.下面的代碼就是我們的字體圖標(biāo)使用時(shí)引入的代碼,通過偽元素 :before 引入的 */
.icon-guangpan:before { content: "\e604"; }
.icon-zanting:before { content: "\e64b"; }
.myfontcss{
font-weight:900;font-size:30px;
}
</style>
</head>
<body>
<!-- 3.使用時(shí),需要引入2個(gè)class類,iconfont是必須引入的,另外一個(gè)是指定字體圖標(biāo)的名稱 -->
<!-- 另外我們可以給每個(gè)字體圖標(biāo)另外的樣式 -->
<span class='myfontcss iconfont icon-guangpan'></span>
<span class='iconfont icon-guangpan'></span>
</body>
