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

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

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

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

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

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

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

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

4.CSS3新增偽類(lèi)有那些？

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

元素的每個(gè)?

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

元素的每個(gè)?

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

元素的每個(gè)?

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

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

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

5.如何居中div？

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

1）負(fù)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)原點(diǎn)（左上角）移動(dòng)到container的中心，然后再利用負(fù)margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點(diǎn)就跟container的中心點(diǎn)對(duì)齊了。

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代碼：

?????

通過(guò)將盒子轉(zhuǎn)換為table元素，table元素本身是可以通過(guò)屬性來(lái)控制位置，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定位方法一樣，只不過(guò)吧margin改成了位移不需要計(jì)算一半是多少，直接 transform:translate(-50%,--50%)

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

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

7.position的值relative和absolute定位原點(diǎn)是？

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

8.CSS3有哪些新特性？

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

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

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

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

10.一個(gè)滿(mǎn)屏?品?字布局?如何設(shè)計(jì)?

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

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

行框的排列會(huì)受到中間空白（回車(chē)空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒(méi)有空格了。

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

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

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

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

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(容器塊)計(jì)算方式跟正常流有什么不同？

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

補(bǔ)充：

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

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

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

不同類(lèi)型的?Box,會(huì)參與不同的?Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響。
???? 創(chuàng)建規(guī)則：
????????? 根元素
??????????浮動(dòng)元素（float不是none）
??????????絕對(duì)定位元素（position取值為absolute或fixed）
??????????display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
??????????overflow不是visible的元素
??????作用：
??????????可以包含浮動(dòng)元素
??????????不被浮動(dòng)元素覆蓋
??????????阻止父子元素的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)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)

16.浮動(dòng)元素引起的問(wèn)題和解決辦法？

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

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

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

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

parent:after{

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

17.移動(dòng)端的布局用過(guò)媒體查詢(xún)嗎？

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

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

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

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

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

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

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

23.display:inline-block 什么時(shí)候會(huì)顯示間隙？

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

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

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

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

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

?

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

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

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

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

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

28.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

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

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

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

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