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