前端面試題歸類-css
一.說下盒模型?
有兩種盒模型，W3C盒模型和IE盒模型
通常說的“IE盒子模型”指的是IE5.5，IE6及其以後，盒模型都為 content-box
當瀏覽器未設定<!doctype>宣告時，盒模型都為 border-box
通過 css3 的box-sizing屬性，可以更改元素的盒子模型
標準 W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
標準盒模型 box-sizing: content-box
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
IE盒模型 box-sizing: border-box
二.不定寬高水平垂直居中？
1.通過display：flex；justify-content:center; align-items:center;就可以讓子元素不定寬高水平垂直居中
2.也可以父display：flex；，子設定一個margin：auto；
3.通過css3，給父元素設定相對定位，給子元素設定絕對定位，left：50% top：50% 通過transform：translate（-50%，-50%）拉回自身的寬和高的一半。
4.通過給父元素設定display：table-cell; vertical-align：middle text-align：center 給子元素設定vertical-align：middle text-align：center。就可以讓子元素不定寬高水平垂直居中了。
三.CSS3的新增特性？
ie9開始支援
1.選擇器增加；
2.樣式增加：常用
比如：圓角。陰影，漸變背景，半透明，圖片邊框等；
3.新增的背景樣式：
背景圖片的顯示範圍，和起點，縮放。
4.引入了flex彈性 盒模型； 常用
5.陰影效果；文字及盒子陰影。 常用
6.顏色與透明；
新增了HSL/HSLA/RGBA幾種顏色模式；
7.web字型和web圖示 常用
@font-face{
font-family: myFont;
src: url('')
}
div{
font-family: myFont
}
8.和容器的變形； 常用
transform: translate(50px,100px);平移
transform: rotate(30deg);旋轉
transform: scale(2,4);縮放
transform: skew(30deg,20deg);翻轉
9.過度動畫和互動； 常用
transition過度和animation動畫
四.什麼是BFC？
BFC是W3C CSS2.1規範中的一個概念，在CSS3.0規範中已被修改為flow root。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。BFC（block formatting context），中文為“塊級格式化上下文”
五.如何觸發BFC？
- float屬性不為none 【會影響上級元素】
- position為absolute或fixed 【會影響上機元素】
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible, 【建議使用auto/hidden】
- <html>根元素
六.BFC解決了什麼問題？
解決自適應兩欄佈局問題：利用BFC的區域不會與float box重疊的規則。
解決浮動後塌陷問題：利用計算BFC的高度時，浮動元素也參與計算規則。
解決垂直margin重疊問題：利用Box垂直方向的距離由margin決定。
屬於同一個BFC(同一個標記)的兩個相鄰Box的margin會發生重疊規則，在一個box外包裹一個容器，讓他生成不同的BFC，這樣就不會margin重疊了。
七.為什麼overflow:hidden能觸發bfc？
塊級格式化上下文 (Block Formatting Context)：
- 盒子在容器（包含塊）內從上到下一個接一個地放置
- 兩個兄弟盒之間的豎直距離由
margin屬性決定 - 同一個 BFC 內垂直
margin會合並 - 盒子的左外邊緣挨著容器（包含塊）的左邊
塊級格式化上下文(BFC) 的特性
- BFC 內的浮動不會影響到BFC外部的元素
- BFC 的高度會包含其內的浮動元素
- BFC 不會和浮動元素重疊
- BFC 可以通過
overflow:hidden等方法建立
所有要處理 margin 摺疊，就需要讓兩個元素處於不同的BFC，overflow: hidden正好可以觸發BFC
八.如何用css建立一個三角形？
把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
九.Position定位值有哪些？
1.relative相對定位 一般給父元素設定
2.absolute絕對定位 一般給子元素設定 相對父元素或祖先帶定位樣式的元素定位
3.fixed 固定在某個位置，相對瀏覽器視窗固定在一個位置
4. Inherit：繼承父元素的position值。
粘性定位
十.為什麼margin: 0 auto會讓div居中
margin 可以有4個值，分別對應影響的方向是上，右，下，左， 2個值的時候，對應第一個值是 控制上下距離，第二個值是控制左右， 所以magrgin：0 auto， 就是上下距離為0，auto是自適應，這裡指的是左右兩個方向的距離一樣，也就是說，不論你的寬度怎麼變化，都是兩個方向距離一樣，形成居中。
要給居中元素一個寬度，否則無效
該元素不可以浮動，否則無效