摘要：常見子元素居中方式原理是絕對定位是根據(jù)左上角，然后讓子元素回移就居中了水平居中，條件是當(dāng)前元素指定寬和高水平垂直居中描述圖形的語言中的每個元素都是可用的。您可以為某個元素附加事件處理器每個被繪制的圖形均被視為對象。

(1) "position: absolute": "position: absolute;" + "transform: translate(-50%, -50%)" // 原理是絕對定位是根據(jù)左上角，然后讓子元素回移50%就居中了
(2) "display: flex": "display: flex;" + "justify-content: center;" + "align-items: center;"
(3) "margin: 0px auto": // 水平居中，條件是當(dāng)前元素指定寬和高
(4) "margin: auto; position: absolute; top/left/bottom/right: 0px": // 水平 垂直居中
(5)

svg：XML 描述 2D 圖形的語言；SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器；每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形
canvas ：JavaScript 來繪制 2D 圖形;逐像素進(jìn)行渲染的；旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
標(biāo)準(zhǔn)盒模型：整體寬度 = 內(nèi)容寬度（content） + padding + border + margin
非標(biāo)準(zhǔn)（IE5以下）： 整體寬度 = 內(nèi)容寬度（content + padding + border） + margin
擴(kuò)展：

1、兩種盒模型分別對應(yīng)css的那個屬性？box-sizing: content-box(標(biāo)準(zhǔn))，border-box（非標(biāo)準(zhǔn)）

2、margin的特性（塊級元素）：垂直疊加，發(fā)生于兄弟元素、自身元素、父子元素之間，發(fā)生條件是子元素處于標(biāo)準(zhǔn)文檔流

(1) 兄弟元素，垂直方向上交界都有margin那么取大值舍小值，可以理解兩軍交戰(zhàn)，實(shí)力強(qiáng)的把實(shí)力弱的團(tuán)滅了

(2) 父子元素，垂直方向上邊界的上邊界取同樣是取大值舍小值，發(fā)生條件是子元素在標(biāo)準(zhǔn)文檔流中并且父元素沒有border屬性

(3) 自身元素，如果一個元素沒有內(nèi)容或者高度并且margin-top和margin-bottom均有值，那么取兩者之間大的值小的會被舍棄，如果相鄰元素中有多個這樣de空元素則以自身疊加后大的為這些元素的外邊距其余的外邊距

2、CSS選擇器有哪些？哪些屬性可以繼承？
id選擇器、class選擇器、標(biāo)簽選擇器、相鄰選擇器往后(+)、子元素器(>)、后代選擇器（div p）、通配符選擇器（ * ）、偽類選擇器（:hover）、屬性選擇器([attribute=value]); 可繼承屬性font-family、font-size、color
3、css 樣式優(yōu)先級？
!important > 行內(nèi) > id > class > 標(biāo)簽,繼承的樣式優(yōu)先級最低
4、display有哪些值？說明他們的作用?

inline（默認(rèn)）–內(nèi)聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block

4、position的值？

static（默認(rèn)）：按照正常文檔流進(jìn)行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。

5、CSS3有哪些新特性？

1 RGBA和透明度(opacity)
2 background-image background-origin(content-box/padding-box/      border-box) background-size background-repeat
3 word-wrap（對長的不可分割單詞換行）word-wrap：break-word
4 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
5 盒陰影：box-shadow: 10px 10px 5px #888888
6 font-face屬性：定義自己的字體
7 圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角
8 邊框圖片：border-image: url(border.png) 30 30 round
9 媒體查詢：定義兩套css，當(dāng)瀏覽器的尺寸變化時會采用不同的屬性

6、經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？

* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

7、css多列等高如何實(shí)現(xiàn)？（例如左邊菜單想要和右側(cè)內(nèi)容保持高度一致）
可以通過css盒子模型來解決，每列元素都設(shè)置一個比較大的padding-bottom，然后margin-bottom設(shè)置一個可以相反的值，這樣保持在父元素內(nèi)的每列高度和之前一樣，然后父元素設(shè)置超過隱藏，就巧妙地形成了多列高度一樣
8、li與li之間有看不見的空白間隔是什么原因引起的(display:inline || inline-block)？有什么解決辦法？
如果是每行一個li元素那么行之間有個換行符，這是導(dǎo)致有空隙的原因，解決方法是將所有l(wèi)i元素寫在一行去掉換行符或者在ul折
9、css定義的權(quán)重
標(biāo)簽的權(quán)重是1， class的權(quán)重是10， id的權(quán)重是100，權(quán)重越大優(yōu)先級越高

div {} // 權(quán)重1
  .name {} // 權(quán)重10
  #id {} // 權(quán)重100
  .name div {} // 權(quán)重 10 + 1
  #id div {} // 權(quán)重 100 + 1
  .name.name div {} // 10 + 10 + 1

10、移動端的布局用過媒體查詢嗎？
@media (min-width: 700px) and (orientation:landscape){ .sidebar { display: none; } } // 屏幕大于700px時該樣式生效
11、::before 和 :after中雙冒號和單冒號 有什么區(qū)別？

::偽元素，:偽類

12、如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？

每秒60幀，animation

13、什么是CSS 預(yù)處理器 / 后處理器？

預(yù)處理器例如：less、sass、stylus，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將css作為目標(biāo)生成文件。
后處理器：autoprefixer，對css進(jìn)行兼容和優(yōu)化

14、css3 display新添加的屬性display: box, box后可以添加的屬性

(1) box-orient: 父容器里子容器的排列方式
(2) box-direction: 父容器里子容器的排列順序 horizontal | vertical
子元素可以設(shè)置box-flex: 比例，進(jìn)行等比分隔 normal | reverse | inherit
(3) box-align: 父容器里子元素的垂直對齊方式 start | end | center | baseline | strech
(4) box-pack: 父容器里子元素的水平對齊方式 start | end | center | justify
(5) line-clamp: 最多幾行，超出溢出