1,css3針對(duì)CSS2版本出現(xiàn)的弱點(diǎn)進(jìn)行的一個(gè)補(bǔ)充性提升。主要提升了新的CSS樣式的設(shè)置，

彈性盒子和媒體查詢以適應(yīng)手機(jī)端的開(kāi)發(fā)。，增加動(dòng)畫(huà)和變形以適應(yīng)動(dòng)畫(huà)特效的制作。

能夠制作一些有弧度的元素框。增加關(guān)于背景的尺寸設(shè)置，增加新的css選擇器類型。

2，css3為了解決瀏覽器兼容的問(wèn)題，設(shè)置了一些常用瀏覽器私有前綴：

常用瀏覽器：

IE（內(nèi)核：Trident），

chrome，蘋(píng)果瀏覽器（webkit內(nèi)核），

firfox(mozilla內(nèi)核)

-webkit-css3樣式名稱

-ms-css3樣式名稱//IE的私有前綴。

-moz-css3樣式名稱

3，css3選擇器：

1，屬性選擇器：

1),利用屬性來(lái)查找HTML標(biāo)簽[attr]//標(biāo)簽的屬性名英文單詞：attr.

[attr="value"]利用屬性名稱和值來(lái)找標(biāo)簽的。

[attr*="內(nèi)容"]尋找只要該屬性內(nèi)包含了該內(nèi)容的所有標(biāo)簽

? ? [attr^="內(nèi)容"]以該內(nèi)容開(kāi)頭的標(biāo)簽。

[attr$="內(nèi)容"]以該內(nèi)容結(jié)尾的標(biāo)簽。

2,結(jié)構(gòu)偽類選擇器：

父元素下的子元素選擇器：

e:first-child{}

e:last-child{}

e:nth-child(n){}注意：這個(gè)n的取值必須計(jì)算標(biāo)簽e在父級(jí)元素下總的排序號(hào)，同時(shí)該序號(hào)所代表的標(biāo)簽名必須和冒號(hào)左側(cè)的標(biāo)簽名能對(duì)上。

相同父元素下的相鄰兄弟元素選擇器：這個(gè)選擇器只是選擇父元素下同一類元素的順序個(gè)數(shù)。

e:first-of-type{}

e:last-of-type{}

e:nth-of-type(n){}這里的n代表的是同一個(gè)父級(jí)下第n個(gè)同類元素.

3.狀態(tài)偽類選擇器：

：focus 當(dāng)點(diǎn)擊的行為獲取焦點(diǎn)時(shí) input:focus{color:red;}

：after 在元素的內(nèi)容的后面插入內(nèi)容 div:after{content:"hello";display:block;color:red;}

：before在元素的內(nèi)容前面插入內(nèi)容。

：enabled，當(dāng)元素可以使用的時(shí)候

：disabled，當(dāng)元素不可以使用的時(shí)候

css3:text屬性：

text-shadow:x偏移量 y偏移量 z軸上的模糊值 陰影的顏色

box-shadow:x偏移量 y偏移量 z軸上的模糊值 陰影的顏色

text-stroke:文字輪廓線的寬度? 文字輪廓線的顏色。

css2:overflow:的屬性拓展：

overflow：hidden/scroll/auto

word-wrap:break-word? 強(qiáng)制換行，主要針對(duì)長(zhǎng)單詞和URL地址。

透明屬性：

rgba(255,245,10,0.5)//只能針對(duì)顏色設(shè)置透明，不能直接將標(biāo)簽設(shè)置為透明。

opacity(0.5)//具有繼承性。、

漸變：

線性漸變：

background:linear-gradient(to 方向，開(kāi)始顏色,結(jié)束顏色)；

徑向漸變：

background:radial-gradient(定位點(diǎn),漸變形狀,開(kāi)始顏色,結(jié)束顏色)//需要添加私有前綴

邊框：

弧角border-radius:

border-radius:

上top left

右 top right

下 right bottom

左 bottom left;

圓形：正方形的標(biāo)簽框，使用border-radius:50%;

橢圓：長(zhǎng)方形的，使用border-radius:50%;

半圓：寬取值：高取值=2:1 border-radius:高的值 高的值 0 0；

background:

background-size:背景圖的尺寸控制：

關(guān)鍵詞取值：

cover覆蓋，

contain容納。

固定取值：px取值：

background-size:

x軸取值?

y軸取值

background:可以實(shí)現(xiàn)多背景寫(xiě)法：每個(gè)背景圖片的引入需要用“,”號(hào)隔開(kāi)

background:

url(icon4.png) no-repeat left,

url(icon6.png) no-repeat right,

url(icon5.png) no-repeat top,

url(icon7.png) no-repeat bottom;

變形：transform:

transform:有四種變形方法：

位移：translate(),

旋轉(zhuǎn)：rotate();

縮放：scale()；

傾斜：skew();

因?yàn)樽冃问撬查g完成的，所以我們無(wú)法看到變形的過(guò)程，為了呈現(xiàn)更好的效果，

我們需要將變形的成果表現(xiàn)出來(lái)這就是我們需要學(xué)習(xí)

過(guò)渡：transition:

transition-property:對(duì)什么屬性進(jìn)行過(guò)渡（all,單獨(dú)的具體屬性），

transition-duration:過(guò)渡的持續(xù)時(shí)間。

transition-timing-function:linear//線性速度，從頭到尾都是保持勻速變化，

transition-delay：變形的推遲時(shí)間。

簡(jiǎn)寫(xiě)方式：

transition:transform 2s linear 2s;

需要結(jié)合著用：

transition:all 0.5s linear ;

transform:translate(0px,-6px);

不能出現(xiàn)過(guò)渡的屬性：display：none ---display:block;

translate(500px)【位移】//向右移動(dòng)500px；

translate(500px,600px)//元素沿著500px寬600px高的軌跡走的是對(duì)角線 ，走的距離可以取負(fù)值，代表相反方向。

rotate(360deg)【旋轉(zhuǎn)】，沿著元素的中心點(diǎn)宣傳360度。順時(shí)針?lè)较?，?fù)值是逆時(shí)針?lè)较颉?/b>

scale(1.5,1.5)【縮放】//沿著水平和垂直方向?qū)⒃胤糯鬄樵瓉?lái)的1.5倍，取值小于1，大于0是指縮小。

skew(xxdeg);【傾斜】將元素傾斜一定的角度，形成平行四邊形的立體效果。

變形中心點(diǎn)設(shè)置：

transform-origin:定位值

動(dòng)畫(huà)：面試題：動(dòng)畫(huà)和過(guò)渡的區(qū)別是什么？

1，過(guò)渡的特點(diǎn)：

1，所有的過(guò)渡變形都是一次性動(dòng)作，中間無(wú)法做狀態(tài)轉(zhuǎn)換。

2，所有的過(guò)渡都無(wú)法重復(fù)運(yùn)動(dòng)，一次運(yùn)動(dòng)結(jié)束，立即停止。

3，所有過(guò)渡均需要使用人為觸發(fā)才能實(shí)現(xiàn)。

4. 變形無(wú)法做批量運(yùn)動(dòng)設(shè)置。

動(dòng)畫(huà)：就是將整個(gè)形變動(dòng)作都?xì)w于一個(gè)時(shí)間段內(nèi)。并且能夠?qū)r(shí)間段進(jìn)行相應(yīng)的片段劃分，實(shí)在在不同片段內(nèi)，動(dòng)作變形不一樣。

動(dòng)畫(huà)內(nèi)容屬性：@keyframes{

0%{}

20%{}

40%{}

60%{}

80%{}

100%{}

}

如果我們的動(dòng)畫(huà)內(nèi)容想要加載到指定的標(biāo)簽上，就需要使用另一個(gè)屬性：animation。

animation-name:規(guī)定了動(dòng)畫(huà)的名稱

animation-duration：動(dòng)畫(huà)持續(xù)時(shí)間

animation-timing-function:動(dòng)畫(huà)的運(yùn)動(dòng)方式

animation-delay：動(dòng)畫(huà)觸發(fā)的延遲時(shí)間。

animation-iteration-count:播放次數(shù)：有一個(gè)永久播放：infinite

animation-derection:播放的方向：反向播放：reverse

alternate：奇數(shù)正向，偶數(shù)反向。

animation-play-state:播放狀態(tài)。暫停：paused

創(chuàng)建動(dòng)畫(huà)：

animation：a1 5s linear infinite

媒體查詢：

1，媒體查詢的樣式：@media。

如果我們要進(jìn)行媒體查詢，那么查詢什么呢？

查詢媒體類型：就是顯示設(shè)備的類型：

1，閱讀器設(shè)備kindle，

2，printer打印設(shè)備，

3，顯示器：screen，

顯示器根據(jù)尺寸分為四種類型屏幕。

1，屏幕寬度大于等于1200px的稱為大屏幕。

2，大于992，小于1200，稱為中屏。

3，大于768，小于992，稱為小屏

4，小于768稱為超小屏

為了配合媒體查詢能夠在手機(jī)設(shè)備上顯示樣式。我們需要講在頁(yè)面的head區(qū)域設(shè)置視窗。

彈性盒子：

彈性盒子的推出是為了對(duì)css2傳統(tǒng)盒子的一種補(bǔ)充和改善，

1，提高了元素盒子的使用靈活性，

2，實(shí)現(xiàn)關(guān)鍵詞取值，簡(jiǎn)化了css布局樣式的使用，提升了瀏覽器的通用性。

樣式屬性：

設(shè)置彈性盒子：

用法：在父級(jí)元素上設(shè)置：

display:flex，能夠直接作用在相鄰子級(jí)元素上，讓相鄰子級(jí)元素變成彈性盒子。

當(dāng)子級(jí)變成彈性盒子之后，所有的子級(jí)標(biāo)簽高度默認(rèn)為父級(jí)高度。所有的子級(jí)都自動(dòng)排為一行。不再需要浮動(dòng)。

彈性盒子的排列方向：

flex-direction:

row/

row-reverse/

column/

column-reverse;

練習(xí)：綜合利用彈性盒子排列和彈性盒子的設(shè)置來(lái)替代float實(shí)現(xiàn)一行四列的布局。

設(shè)置彈性盒子在默認(rèn)排列方式下，

水平對(duì)齊的方式：

屬性名稱：

justify-content:取值：

flex-start//居左，

flex-end//居右，

center居中，

space-between:左右兩側(cè)緊挨著父級(jí)標(biāo)簽，子級(jí)塊之間的間距相等。

space-around：子級(jí)塊左右兩側(cè)間距等于子級(jí)塊之間的間距的一半。

彈性盒子在垂直方向的對(duì)齊方式：

屬性：align-items

值：

flex-start：頂部

flex-end：底部

center：居中

flex-wrap:wrap;彈性盒子的子級(jí)，換行

align-content:

flex-start,

flex-end,

center,

space-between,

space-around

以上屬性均為：放在父級(jí)標(biāo)簽上實(shí)現(xiàn)對(duì)相鄰子級(jí)的控制。

以下屬性都是放在子級(jí)上實(shí)現(xiàn)對(duì)自身的控制

order：數(shù)值；數(shù)值大的排序在后面，。數(shù)字小的排前面，支持負(fù)數(shù)。

align-self:設(shè)置具體的子級(jí)在垂直方向的對(duì)齊問(wèn)題，

flex-start，

flex-end，

center

flex：設(shè)置子級(jí)的所占比例問(wèn)題，設(shè)置的數(shù)字表示子級(jí)標(biāo)簽所占份數(shù)。