1.CSS預(yù)處理器有哪些類型，有什么區(qū)別

CSS是一門標(biāo)記性語(yǔ)言，不利于復(fù)用，很難寫出易于閱讀且易于維護(hù)的代碼。
于是就出現(xiàn)了CSS預(yù)處理器，增加了變量，函數(shù)，混入等功能，讓CSS更易于維護(hù)。
類型：

• sass：最早且最成熟的CSS預(yù)處理器，后綴名為.sass,scss.嚴(yán)格按照縮進(jìn)形式省去大括號(hào)和分號(hào)。
• less：基于sass,書寫格式更像css,易上手，易兼容，但編程功能不夠。
• stylus：基于node.js社區(qū)，主要用于node項(xiàng)目進(jìn)行預(yù)處理，stylus是新型語(yǔ)言，后綴名為.styl。

區(qū)別：

• 變量，less使用@開頭，中間使用：隔開，sass使用$開頭，中間使用：隔開，stylus開頭前兩種都可，但中間必須使用“=”隔開。

//less
@red: #c00;strong {color: @red;
}//sass
$red: #c00
strong{color: $red
}//stylus
red = #c00
strongcolor: red

• 作用域：sass在全局作用域，最好不要重名，less和stylus會(huì)先找局部作用域，沒有的話會(huì)一層一層網(wǎng)上找。
• 嵌套：三者都一致，引用父級(jí)選擇器使用&，但sass和stylus不使用大括號(hào)
• 混入：將一部分樣式抽出，作為一個(gè)單獨(dú)定義模塊，可以供多個(gè)選擇器復(fù)用sass申明需要@mixin，stylus可以不要符號(hào)，但默認(rèn)要“=”。
• 模塊化：將代碼分成一個(gè)個(gè)模塊。

2.盒模型是什么，有哪兩種類型

盒模型：在對(duì)一個(gè)文檔進(jìn)行布局時(shí)，瀏覽器引擎會(huì)根據(jù)css的基礎(chǔ)盒模型標(biāo)準(zhǔn)，將每一個(gè)元素變?yōu)橐粋€(gè)矩形盒子，盒子由四部分組成：content，padding，border，margin。

• 標(biāo)準(zhǔn)盒模型：width+ height代表的是content
• IE盒模型： width + height代表的是content + padding + border

可以通過box-sizing來改變盒模型，content-box為標(biāo)準(zhǔn)盒模型，border-box為IE盒模型

3.css選擇器有哪些，優(yōu)先級(jí)是怎樣的，哪些屬性可以繼承

CSS選擇器：

• id選擇器 （#myid)
• 類選擇器 (.class)
• 標(biāo)簽選擇器(div,p)
• 后代選擇器(h1 p)
• 子選擇器(ul > li)
• 兄弟選擇器(li~a)
• 相鄰兄弟選擇器(li+a)
• 屬性選擇器(a[rel = “external”])
• 偽類選擇器(a:hover)
• 偽元素選擇器(::before, ::after)
• 通配符選擇器(*)

優(yōu)先級(jí)：

內(nèi)聯(lián) > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
（1）內(nèi)聯(lián)樣式選擇器x,0,0,0（行內(nèi)樣式）
（2）ID選擇器0,x,0,0
（3）class選擇器/屬性選擇器/偽類選擇器 0,0,x,0
（4）元素和偽元素選擇器0,0,0,x

繼承屬性：
在css中，繼承是指的是給父元素設(shè)置一些屬性，后代元素會(huì)自動(dòng)擁有這些屬性

關(guān)于繼承屬性，可以分成：

字體系列屬性

font:組合字體
font-family:規(guī)定元素的字體系列
font-weight:設(shè)置字體的粗細(xì)
font-size:設(shè)置字體的尺寸
font-style:定義字體的風(fēng)格
font-variant:偏大或偏小的字體 文本系列屬性
text-indent：文本縮進(jìn)
text-align：文本水平對(duì)齊
line-height：行高
word-spacing：增加或減少單詞間的空白
letter-spacing：增加或減少字符間的空白
text-transform：控制文本大小寫
direction：規(guī)定文本的書寫方向
color：文本顏色

元素可見性

visibility

表格布局屬性

caption-side：定位表格標(biāo)題位置
border-collapse：合并表格邊框
border-spacing：設(shè)置相鄰單元格的邊框間的距離
empty-cells：單元格的邊框的出現(xiàn)與消失
table-layout：表格的寬度由什么決定

列表屬性

list-style-type：文字前面的小點(diǎn)點(diǎn)樣式
list-style-position：小點(diǎn)點(diǎn)位置
list-style：以上的屬性可通過這屬性集合

引用

quotes：設(shè)置嵌套引用的引號(hào)類型

光標(biāo)屬性

cursor：箭頭可以變成需要的形狀

繼承中比較特殊的幾點(diǎn)：

a 標(biāo)簽的字體顏色不能被繼承

h1-h6標(biāo)簽字體的大下也是不能被繼承的

無繼承的屬性
display

文本屬性：vertical-align、text-decoration

盒子模型的屬性：寬度、高度、內(nèi)外邊距、邊框等

背景屬性：背景圖片、顏色、位置等

定位屬性：浮動(dòng)、清除浮動(dòng)、定位position等

生成內(nèi)容屬性：content、counter-reset、counter-increment

輪廓樣式屬性：outline-style、outline-width、outline-color、outline

頁(yè)面樣式屬性：size、page-break-before、page-break-after

4. 說說em/px/rem/vh/vw的區(qū)別

• px:像素，即顯示在頁(yè)面上的一個(gè)小點(diǎn)，每個(gè)像素都是大小相同的, px大小與其他元素?zé)o關(guān)。絕對(duì)長(zhǎng)度單位，頁(yè)面按照精確像素進(jìn)行展示。
• em:相對(duì)長(zhǎng)度單位。相當(dāng)于當(dāng)前對(duì)象的文本字體尺寸，默認(rèn)字體尺寸1em = 16px,em值不固定，em會(huì)繼承父節(jié)點(diǎn)的字體大小，使用級(jí)聯(lián)方式計(jì)算尺寸。
• rem:相對(duì)長(zhǎng)度單位，相對(duì)的是html根元素font-size的值。rem集相對(duì)大小與絕對(duì)大小優(yōu)點(diǎn)于一身。
• vh,vw:vh表示窗口高度，vw表示窗口寬度，主要用于頁(yè)面視圖布局

5.元素實(shí)現(xiàn)水平垂直居中的方法有哪些，如果元素不定寬高呢？

• 使用絕對(duì)定位（absolute）：讓left、right、top、bottom都為0，然后讓margin：auto即可實(shí)現(xiàn)水平垂直居中。
• 子絕父相：水平居中l(wèi)eft:50%,margin-left:(盒子寬度一半），垂直居中：top:50%,margin-top:(盒子高度一半）‘
• flex布局：給父盒子一個(gè)彈性布局，并在父容器中寫入justify-content:center,盒align-items:center表示水平居中盒垂直居中，即可。

6.說說flex,以及適用的場(chǎng)景

flexible為彈性布局，容器默認(rèn)有兩條軸，主軸與交叉軸，通過flex-direction來決定主軸方向。每根軸都有起點(diǎn)和終點(diǎn)。
使用場(chǎng)景：用于實(shí)現(xiàn)水平方向上的元素水平垂直居中，可使用于二欄、三欄自適應(yīng)布局中。