????????????????????????????????????????????????css篇
一、css3的新特性（不列全部，撿重點(diǎn)回答）
1、CSS3選擇器:last-child、nth-child(n)、nth-last-child(n)等。點(diǎn)此查看更多
2、@Font-face（加載字體樣式）
3、Transition,Transform和Animation（動(dòng)畫相關(guān)）
????這三個(gè)特性是CSS3新增的和動(dòng)畫相關(guān)的特性。
Transition
????Transition可以在當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果，而不用使用Flash動(dòng)畫或JavaScript。
Transition有如下屬性：
????transition-property: 規(guī)定應(yīng)用過(guò)渡的CSS屬性的名稱。
????transition-duration: 規(guī)定完成過(guò)渡效果需要多長(zhǎng)時(shí)間。
????transition-delay: 規(guī)定過(guò)渡效果何時(shí)開始，默認(rèn)是0。
????transition-timing-function: 規(guī)定過(guò)渡效果的時(shí)間曲線，默認(rèn)是"ease"，還有l(wèi)inear、ease-in、ease-out、ease-in-out和cubic-bezier等過(guò)渡類型。
????transition: 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。
Transform
????Transform用來(lái)向元素應(yīng)用各種2D和3D轉(zhuǎn)換，該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜等操作。
變換類型
????transform可以有各種變換類型，即屬性值：
????none: 定義不進(jìn)行轉(zhuǎn)換。
????matrix(n,n,n,n,n,n): 定義2D轉(zhuǎn)換，使用六個(gè)值的矩陣。
????matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定義3D轉(zhuǎn)換，使用16個(gè)值的4x4矩陣。
????translate(x,y): 定義2D位移轉(zhuǎn)換。
????translate3d(x,y,z): 定義3D位移轉(zhuǎn)換。
????translateX(x): 定義位移轉(zhuǎn)換，只是用X軸的值。
????translateY(y): 定義位移轉(zhuǎn)換，只是用Y軸的值。
????translateZ(z): 定義3D位移轉(zhuǎn)換，只是用Z軸的值。
????scale(x,y): 定義2D縮放轉(zhuǎn)換。
????scale3d(x,y,z): 定義3D縮放轉(zhuǎn)換。
????scaleX(x): 通過(guò)設(shè)置X軸的值來(lái)定義縮放轉(zhuǎn)換。
????scaleY(y): 通過(guò)設(shè)置Y軸的值來(lái)定義縮放轉(zhuǎn)換。
????scaleZ(z): 通過(guò)設(shè)置Z軸的值來(lái)定義3D縮放轉(zhuǎn)換。
????rotate(angle): 定義2D旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
????rotate3d(x,y,z,angle): 定義3D旋轉(zhuǎn)。
????rotateX(angle): 定義沿著X軸的3D旋轉(zhuǎn)。
????rotateY(angle): 定義沿著Y軸的3D旋轉(zhuǎn)。
????rotateZ(angle): 定義沿著Z軸的3D旋轉(zhuǎn)。
????skew(x-angle,y-angle): 定義沿著X和Y軸的2D傾斜轉(zhuǎn)換。
????skewX(angle): 定義沿著X軸的2D傾斜轉(zhuǎn)換。
????skewY(angle): 定義沿著Y軸的2D傾斜轉(zhuǎn)換。
????perspective(n): 為3D轉(zhuǎn)換元素定義透視視圖。
Animation
????Animation讓CSS擁有了可以制作動(dòng)畫的功能。使用CSS3的Animation制作動(dòng)畫我們可以省去復(fù)雜的js代碼。
4、邊框（border）
????CSS3新增了三個(gè)邊框?qū)傩?，分別是border-radius、box-shadow和border-image。border-radius可以創(chuàng)建圓角邊框，box-shadow可以為元素添加陰影，border-image可以使用圖片來(lái)繪制邊框。IE9+支持border-radius和box-shadow屬性。Firefox、Chrome以及Safari支持所有新的邊框?qū)傩浴?/p>
5、陰影（Shadow）?
6、box-sizing
????box-sizing屬性可設(shè)置的值有content-box、border-box和inherit。
????content-box: padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 (Element width = width + border + padding)，此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
????border-box: padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 (Element width = width)，此屬性表現(xiàn)為怪異模式下的盒模型。
7、文字效果
等.........
二、如何居中一個(gè)div（此處默認(rèn)水平開始）
1、通過(guò)margin: 0 auto; text-align: center實(shí)現(xiàn)CSS水平居中。
2、通過(guò)display:flex實(shí)現(xiàn)CSS水平居中
3、通過(guò)display:table-cell和margin-left實(shí)現(xiàn)CSS水平居中。
4、通過(guò)position:absolute實(shí)現(xiàn)CSS水平居中。
5、通過(guò)display:inline-block和margin:0 auto實(shí)現(xiàn)CSS水平居中。
垂直居中
1、通過(guò)position:absolute，讓left和top都是50%，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達(dá)到居中效果了（margin設(shè)負(fù)值也可以單獨(dú)拿出來(lái)，此處不舉例說(shuō)明）
2、通過(guò)display:flex實(shí)現(xiàn)CSS垂直居中
等.........
三、請(qǐng)簡(jiǎn)述盒模型
????盒模型由外而內(nèi)包括：邊距（margin）、邊框（border）、填充（padding）、內(nèi)容（content）。它在頁(yè)面中所占的實(shí)際寬度是margin + border + paddint + content 的寬度相加。
但是，盒模型有標(biāo)準(zhǔn)盒模型和IE的盒模型。點(diǎn)此查看更多
四、css優(yōu)先級(jí)
1、從大到小
????內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 元素（類型）選擇器 = 偽元素選擇器
????!important 權(quán)重最高
五、清除浮動(dòng)
1，父級(jí)div定義?height
????父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題
2、結(jié)尾處加空div標(biāo)簽?clear:both
????添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
3、父級(jí)div定義?偽類:after?和?zoom
????瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題
4、父級(jí)div定義?overflow:hidden
????必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
六、margin重疊問(wèn)題。
????1、相鄰元素margin重疊
????2、父元素和子元素之間margin重疊
解決方案：
margin-top重疊
????1.給父元素添加overflow:hidden;
????2.給父元素添加border屬性；
????3.在父元素中添加padding-top；
????4.在父元素和子元素之間添加空格文字圖片等；
margin-bottom重疊
? ? 1、和margin-top設(shè)置類似，另外還可以給父元素添加高度值；
關(guān)于margin值的計(jì)算
????1、如果兩個(gè)margin都是正值，那么取margin值最大那個(gè)，例如父元素設(shè)置margin-top為20px，而子元素也設(shè)置了margin-top為50px，那么最終是以子元素的margin-top為準(zhǔn)；
? ? 2、如果兩個(gè)margin值為一正一負(fù)，則最終的margin值以這兩個(gè)margin值相加的結(jié)果為準(zhǔn)；
? ? 3、如果兩個(gè)margin值都為負(fù)數(shù)，則取這兩個(gè)負(fù)margin值中絕對(duì)值最大的那個(gè)負(fù)margin值為準(zhǔn)；
七、css字體單位及應(yīng)用場(chǎng)景
1、px
????px就是pixel像素的縮寫，相對(duì)長(zhǎng)度單位，網(wǎng)頁(yè)設(shè)計(jì)常用的基本單位。像素px是相對(duì)于顯示器屏幕分辨率而言的
2、em
????em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸（參考物是父元素的font-size）
如當(dāng)前父元素的字體尺寸未設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸
特點(diǎn)：
1. em的值并不是固定的；
2. em會(huì)繼承父級(jí)元素的字體大小
3、rem（移動(dòng)端）
????rem是CSS3新增的一個(gè)相對(duì)單位，rem是相對(duì)于HTML根元素的字體大小（font-size）來(lái)計(jì)算的長(zhǎng)度單位
????如果你沒有設(shè)置html的字體大小，就會(huì)以瀏覽器默認(rèn)字體大小，一般是16px
4、vw、vh
????vw、vh、vmax、vmin這四個(gè)單位都是基于視口
????vw是相對(duì)視口（viewport）的寬度而定的，長(zhǎng)度等于視口寬度的1/100
????假如瀏覽器的寬度為200px，那么1vw就等于2px（200px/100）
????vh是相對(duì)視口（viewport）的高度而定的，長(zhǎng)度等于視口高度的1/100
????假如瀏覽器的高度為500px，那么1vh就等于5px（500px/100）
????vmin和vmax是相對(duì)于視口的高度和寬度兩者之間的最小值或最大值
5、%（百分比）
????一般來(lái)說(shuō)就是相對(duì)于父元素
????1、對(duì)于普通定位元素就是我們理解的父元素
????2、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素
????3、對(duì)于position: fixed;的元素是相對(duì)于ViewPort（可視窗口）
6、rpx（微信小程序）
????rpx其實(shí)是微信對(duì)于rem的一種應(yīng)用的規(guī)定，或者說(shuō)一種設(shè)計(jì)的方案，官方上規(guī)定屏幕寬度為20rem，規(guī)定屏幕寬為750rpx。所以在微信小程序中1rem=750/20rpx。
八、box-sizing的作用
????box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
????1、content-box? 是默認(rèn)值。
????如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來(lái)的元素寬度中。
????2、border-box?
????告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說(shuō)，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border?+ padding的計(jì)算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。
