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

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

• sass：最早且最成熟的CSS預處理器，后綴名為.sass,scss.嚴格按照縮進形式省去大括號和分號。
• less：基于sass,書寫格式更像css,易上手，易兼容，但編程功能不夠。
• stylus：基于node.js社區(qū)，主要用于node項目進行預處理，stylus是新型語言，后綴名為.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會先找局部作用域，沒有的話會一層一層網(wǎng)上找。
• 嵌套：三者都一致，引用父級選擇器使用&，但sass和stylus不使用大括號
• 混入：將一部分樣式抽出，作為一個單獨定義模塊，可以供多個選擇器復用sass申明需要@mixin，stylus可以不要符號，但默認要“=”。
• 模塊化：將代碼分成一個個模塊。

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

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

• 標準盒模型：width+ height代表的是content
• IE盒模型： width + height代表的是content + padding + border

可以通過box-sizing來改變盒模型，content-box為標準盒模型，border-box為IE盒模型

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

CSS選擇器：

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

優(yōu)先級：

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

繼承屬性：
在css中，繼承是指的是給父元素設置一些屬性，后代元素會自動擁有這些屬性

關于繼承屬性，可以分成：

字體系列屬性

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

元素可見性

visibility

表格布局屬性

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

列表屬性

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

引用

quotes：設置嵌套引用的引號類型

光標屬性

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

繼承中比較特殊的幾點：

a 標簽的字體顏色不能被繼承

h1-h6標簽字體的大下也是不能被繼承的

無繼承的屬性
display

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

盒子模型的屬性：寬度、高度、內外邊距、邊框等

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

定位屬性：浮動、清除浮動、定位position等

生成內容屬性：content、counter-reset、counter-increment

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

頁面樣式屬性：size、page-break-before、page-break-after

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

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

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

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

6.說說flex,以及適用的場景

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