1.圖像標(biāo)簽可以有多個(gè)屬性，但必需寫在標(biāo)簽名后面
2.屬性之間不分先后順序，標(biāo)簽名與屬性，屬性與屬性之間用空格隔開
3.屬性采取鍵值對(duì)的格式，即key="value"的格式，屬性="屬性值".
4.導(dǎo)圖片
? src屬性是必須要寫的，他決定你用哪張圖片
? alt是替換文本：當(dāng)圖片顯示不出來(lái)時(shí)將文字替換到文本中，
? title是提示文本，當(dāng)鼠標(biāo)移到圖片上會(huì)出來(lái)提示
6.目錄文件夾：普通文件夾，里面放了我們制作頁(yè)面需要的相關(guān)素材，html文件，圖片等
7.根目錄：打開最外面一層是根目錄
8.相對(duì)路徑：圖片相對(duì)文件所在位置，同級(jí)（直接用圖片名），下一級(jí)（先寫圖片所在文件夾，再寫圖片名），上一級(jí)（先用../返回上一級(jí)，再寫圖片路徑）
9.絕對(duì)路徑：從盤符開始，到圖片位置，與相對(duì)路徑不同的是使用"\"（斜杠）隔開而不是"/".絕對(duì)路徑可以使用網(wǎng)站上的圖片地址
10.超鏈接：外部鏈接，內(nèi)部鏈接，下載鏈接，網(wǎng)頁(yè)元素鏈接，錨點(diǎn)鏈接和空鏈接。內(nèi)部鏈接不需要hittp://開頭
11.注釋：<!--注釋標(biāo)簽-->
12.特殊字符： （空格）；<（小于號(hào)）; >（大于號(hào)）;
13.表格基本語(yǔ)法：<table>
? ? ? ? ? ? ? <tr>? <th> </th>? </tr>
? ? ? ? ? ? ? ? <tr>? <td> </td>? </tr>
? ? ? ? ? ? ? ? </table>
? ? ? ? ? ? ? ? <table>:單元格范圍
? ? ? ? ? ? ? ? <tr>:行
? ? ? ? ? ? ? ? <td>:單元格標(biāo)簽
? ? ? ? ? ? ? ? <th>:表頭單元格
? ? ? ? ? ? ? ? align:表格相對(duì)周圍居中
? ? ? ? ? ? ? ? border：邊框
? ? ? ? ? ? ? ? cellpadding:單元格內(nèi)文字與單元格邊框的距離
? ? ? ? ? ? ? ? cellspacing：?jiǎn)卧襁吙蛑g的距離
? ? ? ? ? ? ? ? width，height：設(shè)置單元格寬高
? ? ? ? ? ? ? ? rowspan="合并單元格個(gè)數(shù)"：跨行合并
? ? ? ? ? ? ? ? colspan="合并單元格個(gè)數(shù)"：跨列合并
14.列表標(biāo)簽：<ul>無(wú)序列表（重點(diǎn)），里面只能放<li>標(biāo)簽，不能放其他標(biāo)簽和文字。但可以放到<li>里
? ? ? ? ? ? <ol>有序列表（理解），里面只能放<li>標(biāo)簽，不能放其他標(biāo)簽和文字。但可以放到<li>里
? ? ? ? ? ? <dl>自定義列表（重點(diǎn)），<dl>定義列表，<dt>定義項(xiàng)目/名字，<dd>每個(gè)項(xiàng)目名字,<dt>和<dd>里可以放任何標(biāo)簽
15.表單標(biāo)簽：表單域<form>
? ? ? ? ? ? input輸入表單元素，單標(biāo)簽,
? ? ? ? ? ? select下拉表單元素?
? ? ? ? ? ? textarea文本域元素
16.CSS選擇器:寫在<head>里，<style></style>?
? 1.標(biāo)簽選擇器：快速為同類型標(biāo)簽統(tǒng)一設(shè)置樣式，但不能設(shè)計(jì)差異化樣式，只能選擇全部標(biāo)簽。
? 2.class類選擇器：樣式點(diǎn)定義 結(jié)構(gòu)類調(diào)用 一個(gè)或多個(gè) 開發(fā)最常用
? ? 多類名：標(biāo)簽屬性可以有個(gè)類名，在標(biāo)簽class屬性中寫，class="類名一 類名二 類名三"; 多個(gè)類名之間用空格隔開
? 3.id選擇器，樣式#定義，結(jié)構(gòu)id調(diào)用，只調(diào)用一次，別人切勿使用。
? ? 類選擇器和id選擇器區(qū)別：class如名字，可以多人使用。而id是身份證，只能一人使用。
? 4.*通配符選擇器：不需要調(diào)用，自動(dòng)修改所有元素樣式
? 5.偽類選擇器:? :hover? :link? :active :focus等
17.字體屬性：
? font-weight ，normal：默認(rèn)值，bold：變粗，100-900：400不變粗（normal），700變粗（bold）。
? font-style，字體設(shè)置傾斜字體italic，或者用normal使傾斜的字體不傾斜。
18.符合屬性：font:font-style font-weight font-size/line-height font-family
? ? ? ? ? ? ? font-size和font-family必須有，且不能更換順序。
19.文本屬性
? text-color改變文本顏色三種方法: 1.預(yù)定義的顏色值:red,green,blue
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.十六進(jìn)制：#FF0000，#FF6600，#29D794
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.RGB代碼：rgb（255，0，0）或rgb（100%，0，0）? ? ? ? ? ? ?
? text-decoration裝飾文本：1.none：默認(rèn)，沒(méi)有裝飾或取消下劃線
? ? ? ? ? ? ? ? ? ? ? ? ? 2.underLine：下劃線
? ? ? ? ? ? ? ? ? ? ? ? ? 3.line-through: 刪除線
? ? ? ? ? ? ? ? ? ? ? ? ? 4.overLine：上劃線
? 文本外觀
? text-indent文本縮進(jìn)：? text-indent：20px； 縮進(jìn)20個(gè)像素距離
? ? ? ? ? ? ? ? ? ? ? ? text-indent：2em；縮進(jìn)當(dāng)前字體元素兩個(gè)大小的距離
? line-height行間距：:行高，控制行與行之間的距離
? 20.引用方式
? ? 內(nèi)部樣式表：寫到html頁(yè)面里，將CSS代碼抽取出來(lái)，單獨(dú)放到一個(gè)<style>標(biāo)簽中
? ? 行內(nèi)樣式表：直接將style寫到標(biāo)簽內(nèi)部，適合于修改樣式比較小的情況
? ? 外部樣式表：樣式單獨(dú)的寫到CSS文件中
21.emmet語(yǔ)法
1.輸入標(biāo)簽名后按下tab鍵，直接生成標(biāo)簽
2.如果向生成多個(gè)相同標(biāo)簽加上*就可以了。
3.如果有父子級(jí)關(guān)系，可以用>，直接生成
4.兄弟級(jí)用+
5.生成帶有類名或id名，直接.demo（class）或者#two（id） tab鍵就可以了，指定標(biāo)簽 標(biāo)簽名 .類名或標(biāo)簽名.id名。
6.如果生成的div類名有順序，可以用自增符號(hào)$,例： .demo$*5;
7.如果想在生成的標(biāo)簽內(nèi)部寫內(nèi)容可以用{}表示
22.選擇器? ?
? 1.后代選則器? ? ? 元素1 元素2 { 樣式聲明 }
? 2.子元素選擇器? ? 元素1 > 元素2 { 樣式聲明 }
? 3.并集選擇器? ? ? 元素1，元素2 { 樣式聲明 }? 可以用多個(gè)選擇器的選擇方法，中間用","隔開即可
23.鏈接偽類選擇器
? a:link? ? ? ? 未訪問(wèn)的鏈接
? a:visited? ? 選擇點(diǎn)擊過(guò)的鏈接
? a:hover? ? ? 鼠標(biāo)經(jīng)過(guò)的那個(gè)鏈接
? a:active? ? ? 選擇的是我們鼠標(biāo)正在按下還沒(méi)有彈起鼠標(biāo)的那個(gè)鏈接
? 必須按照l(shuí)ink-visited-hover-active順序聲明，否則可能沒(méi)有效果
24.focus偽類選擇器
? input:focus{ 樣式聲明 }
25.元素的顯示模式
? ? 1.塊元素：自己獨(dú)占一行
? ? ? ? ? ? ? 高度，寬度外邊距以及內(nèi)邊距都可以控制。
? ? ? ? ? ? ? 寬度默認(rèn)是容器（父級(jí)寬度）的100%
? ? ? ? ? ? ? 是一個(gè)容器及盒子，里面可以放行
? ? ? ? ? 注意：文字類的元素內(nèi)不能使用塊級(jí)元素，例如<p>標(biāo)簽中不能放<div>
? ? ? ? ? ? ? ? 同理，<h1>-<h6>等都是文字塊級(jí)標(biāo)簽，里面也不能放其他塊級(jí)元素
? ? 2.行內(nèi)元素：相鄰行內(nèi)元素在一行，一行可以顯示多個(gè)。
? ? ? ? ? ? ? ? 無(wú)法設(shè)置高和寬
? ? ? ? ? ? ? ? 默認(rèn)寬度就是它本身內(nèi)容的寬度
? ? ? ? ? ? ? ? 行內(nèi)元素只能容納文本或其他行內(nèi)元素
? ? ? ? ? ? ? ? 鏈接內(nèi)不能再放其他鏈接
? ? ? ? ? ? ? ? 特殊情況下<a>內(nèi)可以放塊級(jí)元素，但是給<a> 轉(zhuǎn)換一下塊級(jí)模式最安全
? ? 3.行內(nèi)塊元素：既具有塊元素特點(diǎn)，可以設(shè)置高度，行高，外邊距等
? ? ? ? ? ? ? ? 又具有行內(nèi)元素，一行可以放多個(gè)。
? ? ? ? ? ? ? ? 且默認(rèn)寬度就是它本身內(nèi)容的寬度（行內(nèi)元素特點(diǎn)）
26.元素顯示模式轉(zhuǎn)換
? ? 1.轉(zhuǎn)換為塊元素? ? ? display：block;
? ? 2.轉(zhuǎn)換為行內(nèi)元素? ? display：inline;? ? ? ? ?
? ? 3.轉(zhuǎn)換為行內(nèi)塊元素? display：inline-block;
27.讓行高等于盒子高度則，文字居中，行高小會(huì)偏上，行高大會(huì)偏下。
28.CSS背景
? ? 1.一般情況下元素背景顏色默認(rèn)值是transparent（透明）；
? ? 2.背景顏色? background-color：顏色值;
? ? 3.背景圖片? background-image：none | url（url）
? ? 4. 背景平鋪? repeat：背景在縱向和橫向上平鋪(默認(rèn))
? ? ? ? ? ? ? ? no-repeat：背景圖像不平鋪
? ? ? ? ? ? ? ? repeat-x： 背景圖像在橫向上平鋪
? ? ? ? ? ? ? ? repeat-y： 背景圖像在縱向上平鋪
? ? ? ? ? ? ? ? background-repeat： 平鋪類型;
? ? 5.方位名詞?
? ? ? ? 參數(shù)是方位名詞? ? 如果是方位名詞，則兩個(gè)值前后順序無(wú)關(guān)，比如left top和top left效果一致
? ? ? ? ? ? ? ? ? ? ? ? 如果只寫一個(gè)方位，則另外一個(gè)方位居中顯示
? ? ? ? 參數(shù)是精確單位? ? background-position： xpx ypx;
? ? ? ? ? ? ? ? ? ? ? ? ? 第一個(gè)一定是x，第二個(gè)一定是y。
? ? ? ? 參數(shù)是混合單位? ? 既有方位名詞又有精確單位
? ? ? ? ? ? ? ? ? ? ? ? ? 但第一個(gè)一定是x，第二個(gè)一定是y
? ? 6.背景固定?
? ? ? ? background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。
? ? ? ? background-attachment后期可以制作視差滾動(dòng)效果
? ? ? ? background-attachment: scroll | fixed
? ? ? ? scroll 背景圖像隨對(duì)象內(nèi)容滾動(dòng)（默認(rèn)）
? ? ? ? fixed? 背景圖像固定
? ? 7.背景的復(fù)合寫法：
? ? ? ? 沒(méi)有特定書寫順序，一般習(xí)慣約定順序?yàn)椋?/p>
? ? ? ? background：背景顏色 背景圖片地址? 背景平鋪 背景圖像滾動(dòng) 背景圖片位置;
? ? 8.背景半透明
? ? ? ? background：rgba（0,0,0,0.3）
? ? ? ? r:紅 g:綠 b:藍(lán) a:alpha透明度
29.CSS三大特性
? ? 1.層疊性：相同的選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)被另一個(gè)樣式覆蓋
? ? ? ? 原則：樣式?jīng)_突，遵循就近原則，哪個(gè)里的近，執(zhí)行哪個(gè)。
? ? ? ? ? ? ? 樣式不沖突的不會(huì)重疊
? ? 2.繼承性：子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)，子承父業(yè)。
? ? ? ? 優(yōu)點(diǎn)：恰當(dāng)?shù)氖褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性
? ? ? ? 子元素可以繼承父元素的樣式（text-,font-,line-這些元素開頭的可以繼承，以及color屬性）
? ? ? ? 行高的繼承：行高可以跟單位也可以不跟單位，不跟單位時(shí)（12px/1.5），行高是當(dāng)前文字大小（12px）的1.5倍
? ? ? ? ? ? ? ? ? ? 12px/1.5 這樣寫更靈活
? ? 3.優(yōu)先級(jí)：? ? 繼承或*? ? ? ? ? ? 0，0，0，0
? ? ? ? ? ? ? ? ? 元素選擇器? ? ? ? ? 0，0，0，1
? ? ? ? ? ? ? ? ? 類選擇器? ? ? ? ? ? 0，0，1，0
? ? ? ? ? ? ? ? ? ID選擇器? ? ? ? ? ? 0，1，0，0
? ? ? ? ? ? ? ? ? 行內(nèi)選擇器style=""? 1，0，0，0
? ? ? ? ? ? ? ? ? ！important最重要? 無(wú)窮大?
? ? ? ? ? 通過(guò)權(quán)重執(zhí)行優(yōu)先級(jí)
? ? ? ? ? 1.權(quán)重是由4組數(shù)字組成但沒(méi)有不會(huì)有進(jìn)位
? ? ? ? ? 2.從左向右判斷，如果數(shù)字相同，則判斷下一位。
? ? ? ? ? 3.繼承的權(quán)重是0，如果該元素沒(méi)有被直接選中，不管父元素權(quán)重多高，子元素得到的權(quán)重都是0
? ? ? ? ? 權(quán)重的疊加
? ? ? ? ? ? ul li? ? 權(quán)重 0，0，0，1+0，0，0，1=0，0，0，2
? ? ? ? ? ? .nav li? 權(quán)重 0，0，1，0+0，0，0，1=0，0，1，1
30.盒子模型
一. 邊框
? ? 1. border-width border-height 邊框?qū)挾群透叨?/p>
? ? 2. border-color? ? ? ? ? ? ? 邊框顏色
? ? 3. border-style? ? ? ? ? ? ? 邊框樣式： solid? 實(shí)現(xiàn)邊框
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dashed? 虛線邊框
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dotted? 點(diǎn)線邊框
? ? 邊框簡(jiǎn)寫：? ? ? border： 5px solid red;? ? 沒(méi)有順序
? ? 邊框分開寫法：? border-top: 1px solid red; 只設(shè)置上邊框，其它同理
二. 內(nèi)邊距（padding）
? ? ? ? padding-left? ? 左內(nèi)邊距
? ? ? ? padding-right? 右內(nèi)邊距
? ? ? ? padding-top? ? 上內(nèi)邊距
? ? ? ? padding-bottom? 下內(nèi)邊距
? ? ? ? padding: 5px;? ? ? ? ? ? ? ? 1個(gè)值，代表上下左右都有5像素內(nèi)邊距
? ? ? ? padding: 5px 10px;? ? ? ? ? ? 2個(gè)值，上下是5像素，左右是10像素
? ? ? ? padding: 5px 10px 20px;? ? ? 3個(gè)值，代表上內(nèi)邊距5像素，左右內(nèi)邊距10像素，下內(nèi)邊距20像素
? ? ? ? padding: 5px 10px 20px 30px;? 4個(gè)值，上5，右10，下20，左30
? ? 內(nèi)邊距設(shè)置會(huì)撐開盒子，但如果不給盒子設(shè)置寬度屬性，則padding不會(huì)撐開盒子。
? ? 子標(biāo)簽繼承父標(biāo)簽的寬度，若不在子標(biāo)簽里再次設(shè)置寬度，則padding不會(huì)撐開盒子，若設(shè)置，則會(huì)撐開
三. 外邊距（margin）
? ? ? ? margin-left? ?
? ? ? ? margin-right?
? ? ? ? margin-top
? ? ? ? margin-bottom
? ? 外邊距實(shí)現(xiàn)水平居中：盒子必須指定了寬度（width）
? ? ? ? ? ? ? ? ? ? ? 盒子左右外邊距都設(shè)置為auto
? ? 盒子的塌陷問(wèn)題
? ? ? ? ? ? ? 為父邊框定義上邊框
? ? ? ? ? ? ? 可以為父元素定義上內(nèi)邊距
? ? ? ? ? ? ? 可以為父元素添加overflow：hidden
? ? 清除內(nèi)外邊距
? ? ? ? ? ? ? *{
? ? ? ? ? ? ? ? padding：0;? /*清除內(nèi)邊距*/
? ? ? ? ? ? ? ? margin:? 0;? /*清除外邊距*/
? ? ? ? ? ? ? }
? ? 行內(nèi)元素只設(shè)置左右內(nèi)外邊距，若要上下內(nèi)外邊距，可以將行內(nèi)元素轉(zhuǎn)為塊元素
? 什么時(shí)候用margin什么時(shí)候用padding：大部分時(shí)候可以混用
31.去掉li前面的小圓點(diǎn)
? ? list-style：none;
32.圓角邊框
? ? border-radius: length;? ? 設(shè)置盒子模型四個(gè)角的弧度
? ? length是圓角的半徑像素；
? ? border-radius：10px 40px;? ? ? ? ? ? 左上和右下10px，右上和左下40px
? ? border-radius: 10px 20px 30px 40px;? 對(duì)應(yīng)左上，右上，右下，左下
? ? border-top-left-radius: 10px;? ? ? ? 左上設(shè)置圓角
? ? 靈活使用可以將正方形做成圓形
33.盒子陰影
? ? box-shadow: h-shadow v-shadow blur spread color inset;
? ? h-shadow? ? ? 必需，陰影的水平位置，允許有負(fù)值（相對(duì)盒子而言）
? ? v-shadow? ? ? 必需，陰影的垂直位置，允許有負(fù)值（相對(duì)盒子而言）
? ? blur? ? ? ? ? 可選，模糊距離
? ? spread? ? ? ? 可選，陰影的尺寸
? ? color? ? ? ? 可選，陰影的顏色，請(qǐng)參閱CSS顏色值
? ? inset? ? ? ? 可選，將外部陰影改為內(nèi)部陰影
? ? 注意：1.默認(rèn)的是外陰影（outset），但是不可以寫這個(gè)單詞，否則導(dǎo)致陰影無(wú)效
? ? ? ? ? 2.盒子陰影不占用空間，不會(huì)影響其他盒子排列
34.文字陰影
? ? text-shadow: h-shadow v-shadow blur color
? ? h-shadow? ? ? 必需，陰影的水平位置，允許有負(fù)值
? ? v-shadow? ? ? 必需，陰影的垂直位置，允許有負(fù)值
? ? blur? ? ? ? ? 可選，模糊距離
? ? color? ? ? ? 可選，陰影的顏色，請(qǐng)參閱CSS顏色值
35.浮動(dòng)
? 標(biāo)準(zhǔn)流：標(biāo)簽按照規(guī)定好的默認(rèn)方式排列
? ? ? ? 1.塊級(jí)元素會(huì)獨(dú)占一行，從上向下順序排列
? ? ? ? ? 常用元素：div，hr,p,h1~h6,ul,ol,dl,form,table
? ? ? ? 2.行內(nèi)元素按照從左到右順序排列，碰到父類元素邊緣后自動(dòng)換行
? ? ? ? ? 常用元素：span，a,i,em等
? 多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級(jí)元素橫向排列找浮動(dòng)
? 設(shè)置浮動(dòng)后特性：
? ? 1.脫離標(biāo)準(zhǔn)普通流的控制移動(dòng)到指定位置（脫標(biāo)）
? ? 2.浮動(dòng)的盒子不在保留原先的位置
? ? 3.浮動(dòng)的元素是相互貼靠在一起，如果父級(jí)裝不下這些浮動(dòng)的盒子，多出的盒子會(huì)另起一行
? ? 4.設(shè)置浮動(dòng)的元素有行內(nèi)塊元素的特性，即設(shè)置float后，可以設(shè)置寬，高等
? ? 標(biāo)準(zhǔn)流父級(jí)元素和子元素浮動(dòng)搭配使用
? ? 通欄：和瀏覽器一樣寬的盒子
? ? 浮動(dòng)的盒子只會(huì)影響后面的標(biāo)準(zhǔn)流盒子而不會(huì)影響前面的標(biāo)準(zhǔn)流盒子
? ? 為了以后可以一直往父盒子里加子盒子，所以可以不設(shè)置高。
? ? 浮動(dòng)的盒子不會(huì)有外邊距合并的問(wèn)題
? ? 清除浮動(dòng)：
? ? ? ? 選擇器 {clear：屬性值 }
? ? ? ? 屬性值： left 不允許左側(cè)有浮動(dòng)元素
? ? ? ? ? ? ? ? right 不允許右側(cè)有浮動(dòng)元素
? ? ? ? ? ? ? ? both? 同時(shí)清除左右兩側(cè)浮動(dòng)的影響
? ? ? ? 如果父盒子本是有高度則不需要清除浮動(dòng)
? ? ? ? 清除浮動(dòng)后，父類會(huì)根據(jù)浮動(dòng)的子盒自動(dòng)檢測(cè)高度，父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
? ? ? ? 清除浮動(dòng)的策略：閉合浮動(dòng)，只讓浮動(dòng)在父盒子內(nèi)不影響，不影響父盒子外面元素
? ? ? 清除浮動(dòng)方法：
? ? ? ? ? 1.額外標(biāo)簽法（隔墻法）
? ? ? ? ? ? ? 1.在浮動(dòng)元素后加塊元素
? ? ? ? ? ? ? 2.父級(jí)添加overflow，將其值設(shè)置為hidden，auto，或scroll。
? ? ? ? ? ? ? 3.after偽元素法（大廠用的多）（一段代碼）
? ? ? ? ? ? ? 4.雙偽元素（一段代碼）
36.CSS屬性書寫順序
? ? ? 1.布局定位屬性：display
? ? ? 2.自身屬性
? ? ? 3.文本屬性
? ? ? 4.其他屬性
37.CSS定位
? ? 定位組成:
? ? ? ? 定位=定位模式+邊偏移
? ? 定位模式:
? ? 用position屬性來(lái)設(shè)置,其值有四個(gè)
? ? ? ? static? ? 靜態(tài)定位
? ? ? ? relative? 相對(duì)定位
? ? ? ? absolute? 絕對(duì)定位
? ? ? ? fixed? ? 固定定位
? ? 邊偏移:
? ? ? ? 邊偏移就是定位盒子移動(dòng)到最終位置.有top,bottem,left和right4個(gè)屬性
? ? ? ? 例如: top? ? top:80px? ? 頂端偏移量,定義元素相對(duì)于父元素上邊線的距離
? ? 靜態(tài)定位
? ? ? 選擇器 {position: static;}
? ? ? 靜態(tài)定位按照標(biāo)準(zhǔn)流特性拜訪位置,沒(méi)有邊偏移
? ? 相對(duì)定位
? ? ? 選擇器 {position: relative;}
? ? ? 相對(duì)定位時(shí)元素在移動(dòng)時(shí),相對(duì)它原來(lái)的位置來(lái)說(shuō)
? ? ? 相對(duì)定位原來(lái)的位置繼續(xù)占有,后面的盒子依然以標(biāo)準(zhǔn)流的方式對(duì)待它(不脫標(biāo))
? ? 絕對(duì)定位
? ? ? 選擇器 {position: absolute;}
? ? ? 相對(duì)于父盒子移動(dòng)位置,若沒(méi)有父元素則以瀏覽器為準(zhǔn),父元素沒(méi)有定位則還是以瀏覽器為準(zhǔn)定位
? ? ? 如果有多個(gè)祖父級(jí)元素,則以最近的帶有定位的祖父級(jí)元素位置為準(zhǔn)
? ? ? 絕對(duì)定位不再占有原先的位置(脫離標(biāo)準(zhǔn)流)
? ? 子絕父相
? ? ? 子盒子若想在父盒子中自由顯示需要加絕對(duì)定位,而父盒子有必須有定位,
? ? ? 子盒子才能被父盒子約束,但父盒子又不能使用絕對(duì)定位,父類需要位置,因?yàn)榻^對(duì)定位沒(méi)有位置,
? ? ? 后面盒子會(huì)往前,因此父盒子使用相對(duì)定位.
? ? 固定定位
? ? ? 選擇器 {position:fixed}
? ? ? 特點(diǎn):1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素.?
? ? ? ? ? ? ? 跟父元素?zé)o關(guān)
? ? ? ? ? ? ? 不隨滾動(dòng)條滾動(dòng)
? ? ? ? ? ? 2.固定定位不占有位置(脫標(biāo))
? ? ? ? ? ? ? 固定定位也可以看做是一種特殊的絕對(duì)定位.
? ? 粘性定位
? ? ? 可以認(rèn)為是相對(duì)定位和固定定位的混合
? ? ? 選擇器{position: sticky; top: 10px;}
? ? ? 特點(diǎn)?
? ? ? ? 1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素(固定定位特點(diǎn))
? ? ? ? 2.粘性定位占有原有的位置(相對(duì)定位特點(diǎn))
? ? ? ? 3.必須添加top,left,right,bottom其中的一個(gè)才有效
? ? 疊放次序z-index
? ? ? ? 選擇器{z-index: 1;}
? ? ? ? 數(shù)值可以是正整數(shù),負(fù)數(shù)或0,默認(rèn)是auto,數(shù)值越大,盒子越靠上
? ? ? ? 如果都沒(méi)有設(shè)數(shù)字或數(shù)字一樣,則后來(lái)者居上.
? ? ? ? 數(shù)字后面不能加單位
? ? ? ? 只有定位的盒子才有z-index屬性
? ? 定位的拓展
? ? ? 定位居中
? ? ? 行內(nèi)元素添加絕對(duì)或者固定定位,可以直接設(shè)置高度和寬度
? ? ? 塊級(jí)元素添加絕對(duì)或者固定定位,如果不給寬度或者高度,默認(rèn)大小是內(nèi)容的大小
? ? ? 脫標(biāo)的盒子不會(huì)觸發(fā)外邊距合并問(wèn)題
? ? ? 浮動(dòng)的元素不會(huì)壓住文字,而絕對(duì)定位或固定定位會(huì)壓住下面標(biāo)準(zhǔn)流的所有內(nèi)容
? ? ? 一個(gè)盒子既有l(wèi)eft又有right，則執(zhí)行l(wèi)eft。既有top又有bottom，則執(zhí)行top
38.元素的顯示與隱藏
? display屬性（重點(diǎn)）
? ? ? display: none;? ? 隱藏對(duì)象
? ? ? display：block;? 除了轉(zhuǎn)換為塊級(jí)元素之外，同時(shí)還有顯示元素的意思
? ? ? display隱藏元素，不再占有原來(lái)位置，并沒(méi)有刪除
? visibility可見性
? ? ? visibility: visible;? 元素可視
? ? ? visibility: hidden;? ? 元素的顯示與隱藏
? ? ? visibility隱藏元素后，繼續(xù)占有原來(lái)位置
? 如果隱藏元素想要原來(lái)位置，就用visibility:hidden?
? 如果隱藏元素不想要原來(lái)位置，就用display：none（用處更多 重點(diǎn)）
? overflow溢出
? ? ? overflow:visible;? ? 顯示
? ? ? overflow:hidden;? ? ? 超出部分不顯示，但并不是刪除超出部分?
? ? ? overflow:scroll;? ? ? 添加滾動(dòng)條，超出部分可以滾動(dòng)查看
? ? ? overflow:auto;? ? ? ? 在需要的時(shí)候自動(dòng)添加滾動(dòng)條
39.精靈圖
? 為什么要用精靈圖？
? ? ? 為了有效的減少服務(wù)器接收和發(fā)送請(qǐng)求的次數(shù)，提高網(wǎng)頁(yè)的加載速度
? 代碼例子
? ? <style>
? ? ? ? .box {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? ? ? background: url("img/sprt.png") -100px -100px;
? ? ? ? }
? ? </style>
? ? 精靈圖缺點(diǎn)
? ? ? 1.圖片本身較大
? ? ? 2.放大縮小會(huì)失真
? ? ? 3.一但圖片完成想要跟換很困難
40.字體圖標(biāo)
? ? ? ? 可以是方框圖標(biāo)，也可以用前面的代碼
? ? ? ? 展示的是圖標(biāo)，本質(zhì)屬于字體。
? ? ? ? 簡(jiǎn)單的圖片可以用字體圖標(biāo)，而復(fù)雜的不行，所以字體圖標(biāo)不能替代精靈圖
? ? ? ? 下載字體圖標(biāo)網(wǎng)站：iconmoon和iconfont
? ? ? 追加圖標(biāo)：在網(wǎng)站上點(diǎn)擊import icons選擇selection.json文件，然后選擇想要圖標(biāo)進(jìn)行下載，最后將原來(lái)圖標(biāo)文件扔掉
41.鼠標(biāo)樣式
? ? ? ? 格式
? ? ? ? li {cursor : pointer}
? ? ? ? 屬性值? ? ? ? ? 描述
? ? ? ? default? ? ? ? 小白（默認(rèn)）
? ? ? ? pointer? ? ? ? 小手
? ? ? ? move? ? ? ? ? ? 移動(dòng)
? ? ? ? text? ? ? ? ? ? 文本
? ? ? ? not-allowed? ? 禁止
42.CSS用戶界面樣式
? ? 1.輪廓線outline
? ? ? ? input {outline：none;}
? ? 2.文本域防止拖拽文本域
? ? ? ? textarea {resize：none;}
? ? ? ? 文本域書寫最好在一行，否則網(wǎng)頁(yè)文本域中會(huì)出現(xiàn)開頭有空格的情況
43.vertical-align屬性應(yīng)用
? ? 可以使圖片表單和文字對(duì)齊
? ? 默認(rèn)基線對(duì)齊
? ? 只對(duì)行內(nèi)或行內(nèi)塊元素有效
? ? ? ? 格式： img {vertical-align：middle;}
? ? ? ? middle? 中線對(duì)齊
? ? ? ? top? ? ? 頂線對(duì)齊
? ? ? ? bottom? 底線對(duì)齊
? ? 給圖片加邊框時(shí)底部經(jīng)常會(huì)有空隙，那是因?yàn)閳D片與文字默認(rèn)基線對(duì)齊，只要添加其它對(duì)齊方式即可? ?
? ? 也可以將元素轉(zhuǎn)換為塊級(jí)元素，因?yàn)閴K級(jí)元素沒(méi)有vertical-align屬性
44.溢出的文字省略號(hào)
? ? 單行文字省略號(hào)步驟：
? ? ? ? div {
? ? ? ? ? 先強(qiáng)制一行內(nèi)顯示
? ? ? ? ? white-space: nowrap;
? ? ? ? ? 溢出部分隱藏
? ? ? ? ? overflow:hidden;
? ? ? ? ? 文字用省略號(hào)代替超出部分
? ? ? ? ? text-overflow:ellipsis;
? ? ? ? ? }
? ? 多行文字省略號(hào)步驟：
? ? ? ? div{
? ? ? ? ? 一段固定代碼
? ? ? ? }
? ? ? ? 可以選擇第幾行.
45.margin負(fù)值的的巧妙運(yùn)用
? ? 使用margin-left：-1px;做出1px的邊框
? 使鼠標(biāo)經(jīng)過(guò)將邊框變色
? ? 如果盒子沒(méi)有定位，則鼠標(biāo)經(jīng)過(guò)添加相對(duì)定位即可
? ? 如果如果有定位，則利用z-index提高層級(jí)
46.文字圍繞浮動(dòng)元素
? ? 在父盒子里直接加文字，給放圖片的子盒子加浮動(dòng)
47.CSS初始化
? ? CSS初始化是指重設(shè)瀏覽器的樣式（也稱CSSreset）
? ? 就是設(shè)置自己最初想要的標(biāo)簽或圖片等樣式
? ? 例如： * {
? ? ? ? ? ? padding：0;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? }
48.HTML5的新特性
? ? 1.HTML5新增的語(yǔ)義化標(biāo)簽
? ? <header>：頭部標(biāo)簽
? ? <nav>：導(dǎo)航標(biāo)簽
? ? <article>：內(nèi)容標(biāo)簽
? ? <section>：定義文檔某個(gè)區(qū)域
? ? <aside>：側(cè)邊欄標(biāo)簽
? ? <footer>：尾部標(biāo)簽
? ? 這些標(biāo)簽主要針對(duì)搜索引擎的
? ? 但這些標(biāo)簽在IE9里面不是塊級(jí)元素，需要自己轉(zhuǎn)換
49.HTML5新增的多媒體標(biāo)簽
? ? 1.視頻<video>
? ? 當(dāng)前<video>元素支持三種視頻格式：MP4,ogg,WebM? 盡量使用MP4格式
? ? 語(yǔ)法：
? ? ? <video src="文件地址" controls="controls"></video>
? ? 視頻<video>常見屬性
? ? ? ? 屬性? ? ? ? ? ? 值? ? ? 描述
? ? ? autoplay ? ? autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
? ? ? controls ? ? controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
? ? ? width ? ? ? ? pixels ? 設(shè)置視頻播放器的寬度。
? ? ? height ? ? ? pixels ? 設(shè)置視頻播放器的高度。
? ? ? loop ? ? ? ? loop ? ? 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
? ? ? muted ? ? ? ? muted ? ? 規(guī)定視頻的音頻輸出應(yīng)該被靜音。
? ? ? poster ? ? ? URL ? ? ? 規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像。
? ? ? preload ? ? ? preload ? 如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
? ? ? src ? ? ? ? ? url ? ? ? 要播放的視頻的 URL。
? ? 2.音頻<audio>
? ? ? <audio>支持的三種文件格式：MP3，Wav，Ogg。
? ? ? 語(yǔ)法：
? ? ? ? <audio src="someaudio.wav">
? ? ? ? 您的瀏覽器不支持 audio 標(biāo)簽。
? ? ? ? </audio>
? ? ? 音頻<audio>常見屬性
? ? ? ? 屬性 ? ? ? ? ? 值 ? ? ? ? ? ? 描述
? ? ? ? autoplay ? ? autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
? ? ? ? controls ? ? controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
? ? ? ? loop ? ? ? ? loop ? ? 如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開始播放。
? ? ? ? preload ? ? ? preload ? 如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
? ? ? ? src ? ? ? ? ? url ? ? ? 要播放的音頻的 URL。
? ? 3.input類型
? ? ? ? input表單需要在<form> <from/>表單域里書寫
? ? ? ? input表單可以現(xiàn)在人輸入的內(nèi)容
? ? ? ? 格式
? ? ? ? ? <input type="email"/>
? ? ? ? 常用屬性
? ? ? ? ? ? 屬性值? ? ? ? ? ? ? ? ? ? 說(shuō)明
? ? ? ? ? ? type="number"? ? ? ? ? 限制用戶輸入number類型數(shù)據(jù)?
? ? ? ? ? ? type="tel"? ? ? ? ? ? ? 手機(jī)號(hào)碼
? ? ? ? ? ? type="search"? ? ? ? ? 搜索框
? ? ? ? ? ? placeholder="提示文本"? 表單的提示信息
? ? ? ? ? ? multiple="multiple"? ? ? 可以多選文件提交
50.CSS3的新特性
? ? 1.屬性選擇器（權(quán)重 10）
? ? ? ? ? ? 寫法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 所選的元素
? ? ? ? 標(biāo)簽[屬性] { }? ? ? ? ? ? ? ? ? 具有該屬性的該標(biāo)簽元素?
? ? ? ? 標(biāo)簽[屬性=值] { }? ? ? ? ? ? ? 具有該屬性值的該標(biāo)簽元素? ? （重點(diǎn)）
? ? ? ? 標(biāo)簽[class^=值的相同開頭] { }? 具有相同開頭值的該標(biāo)簽元素
? ? ? ? 標(biāo)簽[class$=值的相同結(jié)尾] { }? 具有相同結(jié)尾值的該標(biāo)簽元素
? ? ? 類選擇器，偽類選擇器和屬性選擇器的權(quán)重都是10
? ? 2.結(jié)構(gòu)偽類選擇器（權(quán)重 10）
? ? ? ? E:first-child? ? 選擇父元素里第一個(gè)子元素?
? ? ? ? E:last-child? ? ? 選擇父元素里最后一個(gè)子元素
? ? ? ? E:nth-child(n)? ? 選擇父元素里第n個(gè)子元素
? ? ? ? E:nth-child(n) 執(zhí)行時(shí)首先看： nth-child(n) 之后回去看前面E,父元素中有其他類型的元素時(shí)，不建議用這個(gè)
? ? ? ? n可以是even(偶數(shù))，也可以是odd（偶數(shù)），可以直接將奇數(shù)或偶數(shù)個(gè)元素直接選取出來(lái)
? ? ? ? 如果在括號(hào)里寫n，則意為選擇所有元素
? ? ? ? 括號(hào)里也可以寫公式：
? ? ? ? ? 公式? ? ? ? 含義
? ? ? ? ? 2n? ? ? ? ? 偶數(shù)? ?
? ? ? ? ? 2n+1? ? ? ? 奇數(shù)
? ? ? ? ? 5n? ? ? ? ? 5的倍數(shù)
? ? ? ? ? n+5? ? ? ? 從第5個(gè)開始
? ? ? ? ? -n+5? ? ? ? 前5個(gè)
? ? ? ? 無(wú)論公式是什么，其中的n都是代表從0開始一直加一的數(shù)
? ? ? ? E：first-of-type? ?
? ? ? ? E: last-of-type
? ? ? ? E: nth-of-type(n)?
? ? ? ? E: nth-of-type(n) 執(zhí)行時(shí)先看E再看nth-of-type(n)
? ? 3.偽元素選擇器（權(quán)重 1）
? ? ? 和標(biāo)簽選擇器的權(quán)重都是1
? ? ? 可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，不需要HTML,從而簡(jiǎn)化了HTML結(jié)構(gòu)
? ? ? 選擇符? ? ? ? ? 簡(jiǎn)介
? ? ? ::before? ? 在元素內(nèi)部的前面插入內(nèi)容? ?
? ? ? ::after? ? ? 在元素內(nèi)部的后面插入內(nèi)容
? ? ? 兩者相當(dāng)于一個(gè)盒子，但是它們是行內(nèi)元素，不能設(shè)置大小，除非轉(zhuǎn)化為塊元素
? ? ? div::before{ content:"內(nèi)容" }? （權(quán)重為2）
? ? ? div::after{ content:"內(nèi)容" }
? ? ? content屬性必須要寫
? ? 4.CSS3盒子模型
? ? ? 通過(guò)box-sizing來(lái)指定盒模型，有兩個(gè)值：conttent-box，border-box，計(jì)算盒子大小的方式發(fā)生了改變
? ? ? 1.box-sizing：content-box 盒子大小為width+padding+border（以前默認(rèn)的）
? ? ? 2.box-sizing：border-box? 盒子大小為width
? ? 5.CSS3其他特性
? ? ? 1.CSS3濾鏡filter
? ? ? ? filter：函數(shù)（）;? 例如：filter：blur（5px）;? blur模糊處理，數(shù)值越大越模糊
? ? ? 2.CSS3函數(shù)calc
? ? ? ? width：calc（100%-80px）;? 子盒子永遠(yuǎn)比父盒子少80px
? ? ? ? 括號(hào)里可以用+ - * /
? ? 6.CSS3過(guò)渡（重點(diǎn)）
? ? ? 誰(shuí)要過(guò)度給誰(shuí)加transition
? ? ? 語(yǔ)法：
? ? ? ? transition: 要過(guò)度的屬性? 花費(fèi)時(shí)間? 運(yùn)動(dòng)曲線? 何時(shí)開始;? ?
? ? ? ? ? 屬性：想要變化的CSS屬性，如果想要所有屬性都變化，那么屬性寫all就行了
? ? ? ? ? 花費(fèi)時(shí)間：?jiǎn)挝皇敲耄?.3s
? ? ? ? ? 時(shí)間曲線：默認(rèn)是ease（可以省略）
? ? ? ? ? 何時(shí)開始：?jiǎn)挝皇敲耄梢栽O(shè)置延遲觸發(fā)時(shí)間，默認(rèn)是0s（可以省略）
狹義的HTML5 CSS3
? ? HTML5結(jié)構(gòu)標(biāo)簽本身
? ? CSS3相關(guān)樣式?
品優(yōu)購(gòu)項(xiàng)目知識(shí)點(diǎn)
? 1.網(wǎng)站favicon圖標(biāo)
? ? ? ? 步驟：
? ? ? ? 1.制作favicon圖標(biāo)
? ? ? ? 2.favicon圖標(biāo)放到網(wǎng)站根目錄下
? ? ? ? 3.HTML頁(yè)面引入favicon圖標(biāo)
? 2.網(wǎng)站TDK三大標(biāo)簽SEO優(yōu)化（搜索引擎優(yōu)化）
? ? ? ? SEO目的是對(duì)網(wǎng)站進(jìn)行深度優(yōu)化，從而幫助網(wǎng)站獲取免費(fèi)流量，進(jìn)而在搜索引擎上提高排名
? ? ? ? 1.title網(wǎng)站標(biāo)題
? ? ? ? ? 建議：網(wǎng)站名（產(chǎn)品名）-網(wǎng)站介紹 （不超過(guò)30字）
? ? ? ? 2.description網(wǎng)站說(shuō)明
? ? ? ? ? 簡(jiǎn)要說(shuō)明我們網(wǎng)站主要是做什么的
? ? ? ? ? <meta name="description" content="說(shuō)明內(nèi)容"/>
? ? ? ? 3.keywords關(guān)鍵字
? ? ? ? ? keyword是頁(yè)面關(guān)鍵詞，是搜索引擎的關(guān)注點(diǎn)之一
? ? ? ? ? 最好限制為6-8個(gè)
? ? ? ? ? <meta name="keywords" content="關(guān)鍵字1，關(guān)鍵字2，關(guān)鍵字3"/>
? 3.LOGO SEO優(yōu)化
? ? ? ? 1.logo里首先放一個(gè)h1標(biāo)簽,目的是為了提權(quán),告訴搜索引擎,這個(gè)地方很重要
? ? ? ? 2.h1里再放一個(gè)鏈接,可以返回首頁(yè),吧logo背景給鏈接
? ? ? ? 3.鏈接里放文字,但不要顯示出來(lái)
? ? ? ? ? 方法一:text-indent移動(dòng)盒子外面(text-indent: 9999px),然后overflow:hidden,淘寶的做法
? ? ? ? ? 方法二:直接給font-size:0; 就看不到文字了,京東的做法
? ? ? ? 4.最后給鏈接一個(gè)title屬性,這樣鼠標(biāo)放到logo上就可以看到提示文字了.
51.Web服務(wù)器
? 本地服務(wù)器：自己的電腦設(shè)置為本地服務(wù)器
? 遠(yuǎn)程服務(wù)器：別的公司為我們提供的一臺(tái)電腦，只要把網(wǎng)站項(xiàng)目傳到這太電腦，任何人都可以利用域名（網(wǎng)址）訪問(wèn)我們的網(wǎng)站了
? 免費(fèi)的遠(yuǎn)程服務(wù)器： http://free.3v.do/
? 步驟：
? ? ? 1.去免費(fèi)空間網(wǎng)站注冊(cè)賬號(hào)
? ? ? 2.記錄下主機(jī)名，用戶名，密碼，域名。
? ? ? 3.利用cutftp軟件上傳網(wǎng)站到遠(yuǎn)程服務(wù)器
? ? ? 4.在瀏覽器中輸入域名，即可訪問(wèn)我們的品優(yōu)購(gòu)網(wǎng)站了。
52.2D轉(zhuǎn)換（transform）
? ? ? 移動(dòng)：translate
? ? ? 旋轉(zhuǎn)：rotate
? ? ? 縮放：scale
? ? 1.2D轉(zhuǎn)換之移動(dòng)translate
? ? ? 語(yǔ)法
? ? ? ? transform:translate(x,y); 或者分開寫
? ? ? ? transform:translateX(n);
? ? ? ? transform:translateY(n);
? ? ? ? 括號(hào)里如果是百分比，則這個(gè)移動(dòng)距離是按照長(zhǎng)寬的百分比移動(dòng)
? ? ? ? translate 對(duì)于行內(nèi)元素是無(wú)效的
? ? ? ? 優(yōu)點(diǎn)：保留原來(lái)位置，所以不會(huì)影響其他盒子位置
? ? ? ? 盒子移動(dòng)方法：定位 盒子外表距 2d轉(zhuǎn)換移動(dòng)
? ? 2.2D轉(zhuǎn)換之旋轉(zhuǎn)rotate
? ? ? ? 語(yǔ)法
? ? ? ? ? transform:rotate(度數(shù))
? ? ? ? 重點(diǎn)?
? ? ? ? ? rotate里跟度數(shù)，單位是deg 比如rotate（45deg）
? ? ? ? ? 角度為正時(shí)，順時(shí)針。負(fù)時(shí)，為逆時(shí)針
? ? ? ? ? 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)時(shí)元素的中心點(diǎn)
? ? ? ? 設(shè)置轉(zhuǎn)換中心點(diǎn)
? ? ? ? ? transform-origin:x y;
? ? ? ? ? x,y可以給像素或者方位名詞（top bottom left right）
? ? ? ? ? 默認(rèn)的是 50% 50% 等價(jià)于center center;
? ? 3.2D轉(zhuǎn)換之縮放scale
? ? ? ? 語(yǔ)法
? ? ? ? ? transform:scale(x,y);
? ? ? ? ? x，y寫為數(shù)字不帶單位，數(shù)字1就是一倍，2就是兩倍的意思
? ? ? ? ? 只寫一個(gè)參數(shù)時(shí)，則是等比縮放
? ? ? ? 優(yōu)勢(shì)：
? ? ? ? ? 相比于直接調(diào)節(jié)width和height，這個(gè)方法會(huì)向上延伸，可以設(shè)置縮放中心點(diǎn)，而且不影響其他盒子
? ? 2D轉(zhuǎn)換的綜合寫法順序
? ? ? 格式： transform:translate() rotate() scale()...等
? ? ? 注意： 其順序會(huì)影響轉(zhuǎn)換效果（先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向）
? ? ? ? ? ? 當(dāng)我們同時(shí)有位移和其他屬性的時(shí)候，記得要將位移放到最前
53.動(dòng)畫
? ? 1.用keyframes定義動(dòng)畫（類似定義類選擇器）
? ? ? 定義動(dòng)畫（CSS樣式）：
? ? ? ? ? @keyframes 動(dòng)畫名稱 {
? ? ? ? ? ? 0% {
? ? ? ? ? ? ? width:100px;
? ? ? ? ? ? }
? ? ? ? ? ? 100%{
? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? 元素使用動(dòng)畫：
? ? ? ? ? animation-name：動(dòng)畫名稱;
? ? ? ? ? animation-duration：持續(xù)時(shí)間;
? ? ? 注意：
? ? ? ? 1.可以做多個(gè)狀態(tài)的變化
? ? ? ? 2.百分比要是整數(shù)
? ? ? ? 3.里面的百分比是持續(xù)時(shí)間的劃分
? ? 2.動(dòng)畫常用屬性
? ? ? ? ? ? anmiation-timing-function:ease;? 運(yùn)動(dòng)曲線,默認(rèn)是ease，staps值可以分步?
? ? ? ? ? ? animation-delay: 1s;? ? ? ? ? ? 何時(shí)開始
? ? ? ? ? ? animation-interation-count:? ? ? 重復(fù)次數(shù)? ? ? iteration重復(fù)的? count次數(shù)? infinite無(wú)限
? ? ? ? ? 簡(jiǎn)寫：
? ? ? ? ? ? ? animation: name duration timing-function delay iteration-count direction;
? ? ? ? ? ? ? 前面兩個(gè)屬性一定要寫
? ? ? ? ? ? ? 簡(jiǎn)寫屬性里不包括animation-play-sate:pused;經(jīng)常和鼠標(biāo)經(jīng)過(guò)等配合使用
? ? 若設(shè)置多個(gè)動(dòng)畫，則將兩動(dòng)畫屬性用逗號(hào)鏈接即可
54.3D轉(zhuǎn)換
? ? ? 1.3D移動(dòng)translate3D
? ? ? ? ? ? 各軸正方向
? ? ? ? ? ? ? x軸：水平向右
? ? ? ? ? ? ? y軸：豎直向下
? ? ? ? ? ? ? z軸：垂直屏幕向外
? ? ? ? ? ? ? ? translateZ后面的單位我們一般跟px
? ? ? ? ? ? 簡(jiǎn)寫：
? ? ? ? ? ? ? transform：translate3D（x，y，z）;
? ? ? ? ? ? x，y，z是不能省略的，如果沒(méi)有就寫0
? ? ? 2.透視perspective
? ? ? ? perspective: 像素;
? ? ? ? 透視寫在被觀察元素的父盒子的上面，代表眼睛的位置
? ? ? 3.3D旋轉(zhuǎn)rotate3D
? ? ? ? transform:rotateX(45deg): 沿著x軸正方向旋轉(zhuǎn)45度2
? ? ? ? transform:rotateY(45deg): 沿著y軸正方向旋轉(zhuǎn)45度
? ? ? ? transform:rotateZ(45deg): 沿著z軸正方向旋轉(zhuǎn)45度
? ? ? ? transform:rotate3d(x，y，z，deg): 沿著自定義軸正方向旋轉(zhuǎn)deg為角度（了解即可）
? ? ? ? 左手準(zhǔn)則
? ? ? ? ? ? 左手的拇指指向x軸的正方向
? ? ? ? ? ? 其余手指的彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向
? ? ? 4.3D呈現(xiàn)tranfrom-style
? ? ? ? 控制子元素是否開啟三位立體環(huán)境
? ? ? ? transform-style: flat子元素不開啟3d立體空間（默認(rèn)的）
? ? ? ? transform-style: preserve-3d; 子元素開啟立體空間
? ? ? ? 代碼寫給父級(jí)，但是影響的是子盒子
? ? ? ? 這個(gè)屬性很重要，后面必用?
? 注意：3D模型要時(shí)刻牢記中心點(diǎn)和中心軸在哪
