1、CSS的盒子模型？
（1）兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).
box-sizing：content-box(默認(rèn)) | border-box（ie盒模型）
2、link 和@import 的區(qū)別是?
（1）、link屬于XHTML標(biāo)簽，而@import是CSS提供的;
（2）、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）、import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題;
（4）、link方式的樣式的權(quán)重 高于@import的權(quán)重;
3、display:(顯示)
none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內(nèi)聯(lián)元素。
block：指定對象為塊元素。
list-item：指定對象為列表項目。
inline-block：指定對象為內(nèi)聯(lián)塊元素。（CSS2）
table：指定對象作為塊元素級的表格。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）
box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
4、visibility：（為被隱藏的對象保留其物理空間）
visible：設(shè)置對象可視。
hidden：設(shè)置對象隱藏。
collapse：主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內(nèi)容使用。對于表格外的其他對象，其作用等同于hidden。
5、overflow、overflow-x、overflow-flow：
visible：對溢出內(nèi)容不做處理，內(nèi)容可能會超出容器。
hidden：隱藏溢出容器的內(nèi)容且不出現(xiàn)滾動條。
scroll：隱藏溢出容器的內(nèi)容，溢出的內(nèi)容將以卷動滾動條的方式呈現(xiàn)。
auto：當(dāng)內(nèi)容沒有溢出容器時不出現(xiàn)滾動條，當(dāng)內(nèi)容溢出容器時出現(xiàn)滾動條，按需出現(xiàn)滾動條。此為body對象和textarea的默認(rèn)值。
6、opacity：（不透明度）
使用浮點數(shù)指定對象的不透明度。值被約束在[0.0-1.0]范圍內(nèi)。
7、@charset "utf-8"; 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。
8、css選擇符：
關(guān)系選擇：E F { sRules } 包含選擇符 會選中所有E 下的F 后代元素;
E>F { sRules }子選擇符 選中E 的子元素 F;
E+F { sRules }相鄰選擇符，選中有相同父元素下的E的所有緊鄰F兄弟元素；
E~F { sRules }兄弟選擇符會命中所有符合條件的兄弟元素，而不強制是緊鄰的元素。css3
屬性選擇符：
E[att] { sRules } 選擇具有att屬性的E元素。
E[att="val"] { sRules } 選擇具有att屬性且屬性值等于val的E元素。
E[att^="val"] { sRules } 選擇具有att屬性且屬性值為以val開頭的字符串的E元素。css3
E[att$="val"] { sRules } 選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。
E[att*="val"] { sRules } 選擇具有att屬性且屬性值為包含val的字符串的E元素。
偽類選擇符：（css3）
E:not(s) { sRules } 匹配不包含s選擇符的元素E;
E:root { sRules } 匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML
E:last-child { sRules } 匹配父元素的最后一個子元素E;
E:only-child { sRules } 匹配父元素僅有的一個子元素E。
E:nth-child(n) { sRules } 匹配父元素的第n個子元素E，假設(shè)該子元素不是E，則選擇符無效。
E:nth-last-child(n) { sRules } 匹配父元素的倒數(shù)第n個子元素E;
E:first-of-type {sRules } 匹配同類型中的第一個同級兄弟元素E。
E:last-of-type { sRules } 匹配同類型中的最后一個同級兄弟元素E。
E:only-of-type { sRules } 匹配同類型中的唯一的一個同級兄弟元素E。
E:nth-of-type(n) { sRules } 匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n) { sRules } 匹配同類型中的倒數(shù)第n個同級兄弟元素E。
E:empty { sRules } 匹配沒有任何子元素（包括text節(jié)點）的元素E。
9、BFC:（ Box、Formatting Context）
定義：--“塊級格式化上下文”。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干
BFC布局規(guī)則：
1、內(nèi)部的Box會在垂直方向，一個接一個地放置。
2、Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
3、每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4、BFC的區(qū)域不會與float box重疊。
5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6、計算BFC的高度時，浮動元素也參與計算
二、哪些元素會生成BFC?
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
小技巧
/*設(shè)置字體抗鋸齒*/
-webkit-font-smoothing:antialiased;
/*清除浮動代碼1*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.floatfix{
*zoom:1;
}
.floatfix:after{content:"";display:table;clear:both;}
//css3部分
1、tansform(變換)
-webkit-perspective:800px;/*定義 3D 元素距視圖的距離, perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。*/
-webkit-transform-style:preserve-3d; /*子元素將保留其 3D 位置。*/
-webkit-backface-visibility:hidden; /*定義當(dāng)元素不面向屏幕時不可見*/
none：無轉(zhuǎn)換
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當(dāng)于直接應(yīng)用一個[a,b,c,d,e,f]變換矩陣
translate(<length>[, <length>])：指定對象的2D translation（2D平移）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)值為0
translateX(<length>)：指定對象X軸（水平方向）的平移
translateY(<length>)：指定對象Y軸（垂直方向）的平移
rotate(<angle>)：指定對象的2D rotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義
scale(<number>[, <number>])：指定對象的2D scale（2D縮放）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)取第一個參數(shù)的值
scaleX(<number>)：指定對象X軸的（水平方向）縮放
scaleY(<number>)：指定對象Y軸的（垂直方向）縮放
skew(<angle> [, <angle>])：指定對象skew transformation（斜切扭曲）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認(rèn)值為0
skewX(<angle>)：指定對象X軸的（水平方向）扭曲
skewY(<angle>)：指定對象Y軸的（垂直方向）扭曲
2、transition：（過渡）
[ transition-property ]：檢索或設(shè)置對象中的參與過渡的屬性
[ transition-duration ]：檢索或設(shè)置對象過渡的持續(xù)時間
[ transition-timing-function ]：檢索或設(shè)置對象中過渡的動畫類型
[ transition-delay ]：檢索或設(shè)置對象延遲過渡的時間
縮寫：transition:all .5s ease-in .1s;
