摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。

1.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有兩種，?IE 盒子模型、W3C 盒子模型；
盒模型：?內(nèi)容(content)、填充(padding)、邊界(margin)、?邊框(border)；
區(qū)? 別：?IE的content部分把?border 和?padding計算了進去；

在CSS3中引入了box-sizing屬性, 它可以允許改變默認的CSS盒模型對元素寬高的計算方式.
共包括兩個選項：
content-box：標(biāo)準(zhǔn)盒模型，CSS定義的寬高只包含content的寬高
border-box：IE盒模型，CSS定義的寬高包括了content，padding和border

2.CSS選擇符有哪些？哪些屬性可以繼承？

id選擇器（?# myid）
類選擇器（.myclassname）
標(biāo)簽選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
后代選擇器（li a）
通配符選擇器（?* ）
屬性選擇器（a[rel = "external"]）
偽類選擇器（a:hover, li:nth-child）
可繼承的樣式：?font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;

3.CSS優(yōu)先級算法如何計算？

*?? 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
*?? 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
!important >? id > class > tag
important 比?內(nèi)聯(lián)優(yōu)先級高
?

4.CSS3新增偽類有那些？

舉例：
p:first-of-type 選擇屬于其父元素的首個?

元素的每個?

元素。
p:last-of-type? 選擇屬于其父元素的最后?

元素的每個?

元素。
p:only-of-type? 選擇屬于其父元素唯一的?

元素的每個?

元素。
p:only-child??????? 選擇屬于其父元素的唯一子元素的每個?

元素。
p:nth-child(2)? 選擇屬于其父元素的第二個子元素的每個?

元素。
?
:after????????? 在元素之前添加內(nèi)容,也可以用來做清除浮動。
:before???????? 在元素之后添加內(nèi)容
:enabled???????
:disabled?????? 控制表單控件的禁用狀態(tài)。
:checked??????? 單選框或復(fù)選框被選中。

5.如何居中div？

水平垂直居中問題，在css中margin: 0 auto;可以實現(xiàn)水平居中，但是在垂直居中方面一直沒有特定的屬性，直到css3的出現(xiàn)，有了彈性盒，可以通過設(shè)置彈性盒直接設(shè)置居中位置，做瀏覽器兼容的話可以通過使用一些hack處理 負margin方法，table-cell方法，位移方法

1）負margin方法：

CSS代碼：

.container{??????
??????? width: 500px;?????? 
??????? height: 400px;?????? 
??????? border: 2px solid #379;?????? 
??????? position: relative;? 
}?
.inner{??????
??????? width: 480px;?????? 
??????? height: 380px;?????? 
??????? background-color: #746;?????? 
??????? position: absolute;?????? 
??????? top: 50%;?????? 
??????? left: 50%;?????? 
??????? margin-top: -190px; /*height的一半*/?????? 
??????? margin-left: -240px; /*width的一半*/? 
}

HTML代碼：

???? 

???? 
 

這里，我們首先用top:50%和left:50%讓inner的坐標(biāo)原點（左上角）移動到container的中心，然后再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點就跟container的中心點對齊了。

2）table－cell方法

?
CSS代碼：

div{????
???? width: 300px; 
???? height: 300px; 
???? border: 3px solid #555; 
???? display: table-cell; 
???? vertical-align: middle; 
???? text-align: center; 
}
img{
???? vertical-align: middle; 
}

HTML代碼：

?????

通過將盒子轉(zhuǎn)換為table元素，table元素本身是可以通過屬性來控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的
3）彈性盒子法
CSS代碼：

.container{
?????? width: 300px; 
?????? height: 200px; 
?????? border: 3px solid #546461; 
?????? display: -webkit-flex; 
?????? display: flex; 
?????? -webkit-align-items: center; 
?????? align-items: center; 
?????? -webkit-justify-content: center; 
?????? justify-content: center;? 
}?
.inner{
?????? border: 3px solid #458761; 
?????? padding: 20px;? 
}

HTML代碼：

 
???? 
 
???????? 我在容器中水平垂直居中 
???? 
 

align-items控制垂直方向的居中，justify-content控制水平方向的居中。這是CSS3的新方法

4）位移方法

位移方法和margin定位方法一樣，只不過吧margin改成了位移不需要計算一半是多少，直接 transform:translate(-50%,--50%)

6.display有哪些值？說明他們的作用。

block????????? ? ??象塊類型元素一樣顯示。
none?????????? ? ??缺省值。象行內(nèi)元素類型一樣顯示。
inline-block???象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。
list-item????? ? ?象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
table????????? ? ? ?此元素會作為塊級表格來顯示
inherit??????? ? ??規(guī)定應(yīng)該從父元素繼承?display 屬性的值

7.position的值relative和absolute定位原點是？

absolute? 生成絕對定位的元素，相對于值不為?static的第一個父元素進行定位。
fixed （老IE不支持）?生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative? 生成相對定位的元素，相對于其正常位置進行定位。
static??????? 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略?top, bottom, left, right z-index 聲明）。
inherit????? 規(guī)定從父元素繼承?position 屬性的值。

8.CSS3有哪些新特性？

新增各種CSS選擇器? （: not(.input)：所有?class 不是“input”的節(jié)點）
圓角?????????? （border-radius:8px）
多列布局??????? （multi-column layout）
陰影和反射??????? （ShadowReflect）
文字特效????? （text-shadow、）
文字渲染????? （Text-decoration）
線性漸變????? （gradient）
旋轉(zhuǎn)????????? （transform）
增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫，多背景
transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

9.用純CSS創(chuàng)建一個三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設(shè)為?transparent）

#demo {
?? ??? ?width: 0;
?? ??? ?height: 0;
?? ??? ?border-width: 20px;
?? ??? ?border-style: solid;
?? ??? ?border-color: transparent transparent red transparent;
}

10.一個滿屏?品?字布局?如何設(shè)計?

簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可

11.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。

12.為什么要初始化CSS樣式。

因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法：?* {padding: 0; margin: 0;} （強烈不建議）
淘寶的樣式初始化代碼：
?????

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
?????body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } 
?????h1, h2, h3, h4, h5, h6{ font-size:100%; } 
?????address, cite, dfn, em, var { font-style:normal; } 
?????code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
?????small{ font-size:12px; } 
?????ul, ol { list-style:none; } 
?????a { text-decoration:none; } 
?????a:hover { text-decoration:underline; } 
?????sup { vertical-align:text-top; } 
?????sub{ vertical-align:text-bottom; } 
?????legend { color:#000; } 
?????fieldset, img { border:0; } 
?????button, input, select, textarea { font-size:100%; } 
?????table { border-collapse:collapse; border-spacing:0; }

13.absolute的containing block(容器塊)計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的?position 值不為?static 的元素，然后再判斷：
1）若此元素為?inline 元素，則?containing block 為能夠包含這個元素生成的第一個和最后一個?inline box 的?padding box (除?margin, border 外的區(qū)域) 的最小矩形；
2）否則,則由這個祖先元素的?padding box 構(gòu)成。
如果都找不到，則為?initial containing block。

補充：

1）static(默認的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
2）absolute: 向上找最近的定位為absolute/relative的元素
3）fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

14.對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？

(W3C CSS 2.1 規(guī)范中的一個概念,它是一個獨立容器，決定了元素如何對其內(nèi)容進行定位,以及與其他元素的關(guān)系和相互作用。）
?一個頁面是由很多個?Box 組成的,元素的類型和?display 屬性,決定了這個?Box 的類型。

不同類型的?Box,會參與不同的?Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會互相影響。
???? 創(chuàng)建規(guī)則：
????????? 根元素
??????????浮動元素（float不是none）
??????????絕對定位元素（position取值為absolute或fixed）
??????????display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
??????????overflow不是visible的元素
??????作用：
??????????可以包含浮動元素
??????????不被浮動元素覆蓋
??????????阻止父子元素的margin折疊

15.css定義的權(quán)重

以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
????????????????? /權(quán)重為1/??????????? div{}
????????????????? /權(quán)重為10/????????? .class1{}
????????????????? /權(quán)重為100/?????? #id1{}
????????????????? /權(quán)重為100+1=101/???????? #id1 div{}
????????????????? /權(quán)重為10+1=11/????????????? .class1 div{}
????????????????? /權(quán)重為10+10+1=21/????? .class1 .class2 div{}
如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)

16.浮動元素引起的問題和解決辦法？

浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    display: inline-block;
} /* for IE/Mac */

??????????????????
清除浮動的幾種方法：
1）額外標(biāo)簽法，

（缺點：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
2）使用after偽類

parent:after{

?? ??? ?content:".";???????????? height:0;?visibility:hidden;????????????????????? display:block;???????? clear:both;
?}
3）浮動外部元素
4）設(shè)置overflow為hidden或者auto

17.移動端的布局用過媒體查詢嗎？

css的媒體查詢允許通過@media標(biāo)簽為特定媒體的瀏覽器設(shè)定樣式，其中包含眾多篩選，功能強大。
18.使用?CSS 預(yù)處理器嗎？喜歡那個？????????????
SASS (SASS、LESS沒有本質(zhì)區(qū)別，只因為團隊前端都是用的SASS)，可以使用sass和less對css做模塊化開發(fā)，定制樣式的組件
19.CSS優(yōu)化、提高性能的方法有哪些？
將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

20.元素豎向的百分比設(shè)定是相對于容器的高度嗎？

是的，元素的百分比設(shè)置一般是根據(jù)父級元素的寬高決定的，如果父級元素沒有寬高百分比是不起作用的

21.什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？

響應(yīng)式設(shè)計就是為了實現(xiàn)根據(jù)不同設(shè)備環(huán)境自動響應(yīng)及調(diào)整網(wǎng)頁布局的一種設(shè)計方案
基本原理就是利用css的媒體查詢功能更具不同屏幕的大小，向下兼容設(shè)備、移動優(yōu)先，達到響應(yīng)的效果

22.::before 和?:after中雙冒號和單冒號?有什么區(qū)別？解釋一下這2個偽元素的作用。

雙冒號是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時支持舊的偽類，比如:first-line、:first-letter、:before、:after等。
對于CSS2之前已有的偽元素，比如:before和:after，單冒號和雙冒號的寫法::before和::after作用是一樣的。
如果只需要兼容webkit、firefox、opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號寫法比較安全。

23.display:inline-block 什么時候會顯示間隙？

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

24.png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？

GIF：?8位像素，256色???無損壓縮???支持簡單動畫???支持boolean透明 ? 適合簡單動畫
JPEG：顏色限于256?? 有損壓縮?? 可控制壓縮質(zhì)量?? 不支持透明?? 適合照片
PNG：有PNG8和truecolor PNG??? PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫、適合圖標(biāo)、背景、按鈕

25.是CSS 預(yù)處理器?/ 后處理器？

預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強了css代碼的復(fù)用性，還有層級、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。

?

后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實現(xiàn)跨瀏覽器兼容性的問題。

26.css sprite是什么,有什么優(yōu)缺點。

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案
優(yōu)點：
減少HTTP請求數(shù)，極大地提高頁面加載速度
增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小
更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
缺點：
圖片合并麻煩
維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式

27.你用過柵格系統(tǒng)嗎？

現(xiàn)在大部分UI框架都內(nèi)置有刪格化系統(tǒng)，常用bootstrap中的，bootstap它提供了一套響應(yīng)式，移動優(yōu)先的流式柵格系統(tǒng)(grid system)，將屏幕分成12列來實現(xiàn)響應(yīng)式的。它的實現(xiàn)原理非常簡單，Media Query加上float布局，也研究過bootstrap的源碼，在這個過程中也對預(yù)處理器有了更深的體會，刪格系統(tǒng)這塊在bootstrap中sass源碼使用的循環(huán)生成，less使用的遞歸生成，我自己也多帶帶封裝過一個刪格系統(tǒng)

28.漸進增強和優(yōu)雅降級

漸進增強?：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級?：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

29.什么是?FOUC（無樣式內(nèi)容閃爍）？你如何來避免?FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

而引用CSS文件的@import就是造成這個問題的罪魁禍?zhǔn)住E會先加載整個HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系。?
解決方法簡單的出奇，只要在之間加入一個或者