1 CSS常見(jiàn)面試題
1 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin
2 box-sizing屬性？
用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-boxcontext-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬
3 CSS選擇器有哪些？哪些屬性可以繼承？
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
不可繼承的樣式：border, padding, margin, width, height
優(yōu)先級(jí)（就近原則）：!important > [ id > class > tag ]
!important 比內(nèi)聯(lián)優(yōu)先級(jí)高
4 CSS優(yōu)先級(jí)算法如何計(jì)算？
元素選擇符：1
class選擇符：10
id選擇符：100
元素標(biāo)簽：1000
!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算。
如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低。
5 CSS3新增偽類(lèi)有那些?
p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
6 如何居中div？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的div居中？
div：
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
浮動(dòng)元素的上下左右居中：
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
絕對(duì)定位的左右居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
有更加優(yōu)雅的居中方式就是用flexbox，我以后會(huì)做整理。
7 display有哪些值？說(shuō)明他們的作用?
inline（默認(rèn)）–內(nèi)聯(lián)
none–隱藏
block–塊顯示
table–表格顯示
list-item–項(xiàng)目列表
inline-block
8 position的值？
static（默認(rèn)）：按照正常文檔流進(jìn)行排列；
relative（相對(duì)定位）：不脫離文檔流，參考自身靜態(tài)位置通過(guò) top, bottom, left, right 定位；
absolute(絕對(duì)定位)：參考距其最近一個(gè)不為static的父級(jí)元素通過(guò)top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對(duì)像是可視窗口。
9 CSS3有哪些新特性？
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對(duì)長(zhǎng)的不可分割單詞換行）word-wrap：break-word
文字陰影：text-shadow：5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
font-face屬性：定義自己的字體
圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角
邊框圖片：border-image: url(border.png) 30 30 round
盒陰影：box-shadow: 10px 10px 5px #888888
媒體查詢(xún)：定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性
10 請(qǐng)解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場(chǎng)景？
該布局模型的目的是提供一種更加高效的方式來(lái)對(duì)容器中的條目進(jìn)行布局、對(duì)齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來(lái)排列。彈性盒布局并沒(méi)有這樣內(nèi)在的方向限制，可以由開(kāi)發(fā)人員自由操作。
試用場(chǎng)景：彈性布局適合于移動(dòng)前端開(kāi)發(fā)，在Android和ios上也完美支持。
11.什么是 BFC機(jī)制
BFC(Block Formatting Context)，塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。
觸發(fā)條件 (以下任意一條)
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或則releative中的任何一個(gè)
在IE下, Layout,可通過(guò)zoom:1 觸發(fā)BFC布局與普通文檔流布局區(qū)別:
BFC布局規(guī)則:
浮動(dòng)的元素會(huì)被父級(jí)計(jì)算高度(父級(jí)元素觸發(fā)了BFC)
非浮動(dòng)元素不會(huì)覆蓋浮動(dòng)元素的位置(非浮動(dòng)元素觸發(fā)了BFC)
margin不會(huì)傳遞給父級(jí)(父級(jí)觸發(fā)BFC)
屬于同一個(gè)BFC的兩個(gè)相鄰元素上下margin會(huì)重疊
普通文檔流布局: 浮動(dòng)的元素是不會(huì)被父級(jí)計(jì)算高度
非浮動(dòng)元素會(huì)覆蓋浮動(dòng)元素的位置
margin會(huì)傳遞給父級(jí)元素
兩個(gè)相鄰元素上下的margin會(huì)重疊
開(kāi)發(fā)中的應(yīng)用
阻止margin重疊
可以包含浮動(dòng)元素 —— 清除內(nèi)部浮動(dòng)(清除浮動(dòng)的原理是兩個(gè) div都位于同一個(gè) BFC 區(qū)域之中)
自適應(yīng)兩欄布局
可以阻止元素被浮動(dòng)元素覆蓋
12. CSS3中新增的選擇器以及屬性
這里只是列出來(lái), 具體的使用,請(qǐng)查看我的關(guān)于css3新增選擇器與屬性文章
13. 居中布局
水平居中
1. 行內(nèi)元素: text-align:center
2. 塊級(jí)元素: margin:0 auto
3. 絕對(duì)定位和移動(dòng): absolute + transform
4. 絕對(duì)定位和負(fù)邊距: absolute + margin
5. flex布局: flex + justify-content:center
垂直居中
1. 子元素為單行文本: line-height:height
2. absolute + transform
3. flex + align-items:center
4. table: display:table-cell; vertical-align: middle
5. 利用position和top和負(fù)margin
水平垂直居中
1. 已知元素寬高:絕對(duì)定位+margin:auto:
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
2. 已知元素寬高: 絕對(duì)定位+負(fù)margin
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
3. absolute+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父級(jí)的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
4.flex + justify-content + align-items
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句話(huà)就可以實(shí)現(xiàn)不定寬高水平垂直居中。*/
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
14. 清除浮動(dòng)有哪些方法, 各有什么優(yōu)缺點(diǎn)
使用clear屬性的空元素 在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)。亦可使用<br class="clear" />或<hr class="clear" />來(lái)進(jìn)行清理。
優(yōu)點(diǎn): 簡(jiǎn)單, 寫(xiě)少量代碼, 兼容性也好 缺點(diǎn): 添加無(wú)語(yǔ)義html元素, 不利于代碼語(yǔ)義化, 后期維護(hù)成本大
使用css的overflow屬性 給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置zoom:1。在添加overflow屬性后，浮動(dòng)元素又回到了容器層，把容器高度撐起，達(dá)到了清理浮動(dòng)的效果。
優(yōu)點(diǎn): 簡(jiǎn)單, 代碼少, 瀏覽器支持好 缺點(diǎn): 不能和position配合使用, 因?yàn)槌龅某叽鐣?huì)被隱藏overflow:hidden
使用CSS的:after偽元素 結(jié)合 :after 偽元素（注意這不是偽類(lèi)，而是偽元素，代表一個(gè)元素之后最近的元素）和 IEhack ，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。給浮動(dòng)元素的容器添加一個(gè) clearfix的class，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見(jiàn)的塊元素（Block element）清理浮動(dòng)。通過(guò)CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見(jiàn)的空格"020"或點(diǎn)"."，并且賦予clear屬性來(lái)清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。
優(yōu)點(diǎn): 瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn): 代碼多，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持給父級(jí)元素設(shè)置高度簡(jiǎn)單, 代碼少,好掌握 缺點(diǎn): 只適用于高度固定的布局
15. 用純CSS創(chuàng)建一個(gè)三角形的原理是什么
之前寫(xiě)三角形, 都是直接記住代碼,沒(méi)有探究原因,我也是直到有一次面試時(shí),面試大哥讓我說(shuō)說(shuō)css創(chuàng)建三角形的原理,我就......回來(lái)就趕緊翻資料.接下來(lái)我就將當(dāng)時(shí)我理解的過(guò)程列舉出來(lái):
1. 寫(xiě)一個(gè)我們最熟悉的 border應(yīng)用
.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下:
2. 接下來(lái),我們將border值增大
.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
很容易發(fā)現(xiàn), border渲染并不是正方形, 而是梯形的.
3. 在增大border的基礎(chǔ)下, 此時(shí)我們將盒子寬高變成0,會(huì)產(chǎn)生什么效果呢!
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
四個(gè)三角形拼合成的矩形呈現(xiàn)在我們眼前,那如如果我們只想要一個(gè)三角形, 我們是不是可以設(shè)想將其他三個(gè)設(shè)為不可見(jiàn);
4. 設(shè)置透明, 隱藏其中三個(gè)三角形
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
三角形這樣就出來(lái), 有木有很簡(jiǎn)單, 當(dāng)然我們也可以采用逆向思維來(lái)寫(xiě)這個(gè)效果, 就是先將所有邊框設(shè)為透明, 然后需要哪邊再對(duì)其設(shè)置顏色, 效果是一樣的
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
這樣給面試你的人講,講明白應(yīng)該不是問(wèn)題., 重點(diǎn)就是要理解border的應(yīng)用
16. 實(shí)現(xiàn)三欄布局有哪些方法, 分別描述一下
三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在開(kāi)發(fā)十分常見(jiàn)，那么什么是三欄布局？即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應(yīng)，想要完成的最終效果如下圖所示：
下面列出四種實(shí)現(xiàn)方式, 在開(kāi)發(fā)中可以根據(jù)實(shí)際需求選擇適合自己的方法進(jìn)行編碼:
Flex 布局
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
簡(jiǎn)單實(shí)用，現(xiàn)在比較流行的方案，但是需要考慮瀏覽器的兼容性。
絕對(duì)定位布局
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
<div class="container">
<div class="left">1</div>
<div class="main">2</div>
<div class="right">3</div>
</div>
這種方案也簡(jiǎn)單實(shí)用, 并且可以將 <div class="main"></div>元素放到第一位,使得主要內(nèi)容優(yōu)先加載!
雙飛翼布局
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}
</style>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
圣杯布局
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
圣杯布局和雙飛翼布局解決問(wèn)題的方案在前一半是相同的，也就是三欄全部float浮動(dòng)，但左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。
17. css3實(shí)現(xiàn)0.5px的細(xì)線(xiàn)
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class="line"></div>
18. link 與 @import 的區(qū)別
a.從屬關(guān)系區(qū)別@import是 CSS 提供的語(yǔ)法規(guī)則，只有導(dǎo)入樣式表的作用；link是HTML提供的標(biāo)簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等
b.加載順序區(qū)別加載頁(yè)面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載；@import引入的 CSS 將在頁(yè)面加載完畢后被加載。
c.兼容性區(qū)別@import是 CSS2.1 才有的語(yǔ)法，故只可在 IE5+ 才能識(shí)別；link標(biāo)簽作為 HTML 元素，不存在兼容性問(wèn)題。
d.DOM可控性區(qū)別可以通過(guò) JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式；由于DOM方法是基于文檔的，無(wú)法使用@import的方式插入樣式。
19. 開(kāi)發(fā)中為什么要初始化css樣式
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
20. CSS優(yōu)化、提高性能的方法有哪些
盡量將樣式寫(xiě)在單獨(dú)的css文件里面，在head元素中引用 將代碼寫(xiě)成單獨(dú)的css文件有幾點(diǎn)好處：
內(nèi)容和樣式分離，易于管理和維護(hù)
減少頁(yè)面體積
css文件可以被緩存、重用，維護(hù)成本降低
不使用@import避免使用復(fù)雜的選擇器，層級(jí)越少越好 建議選擇器的嵌套最好不要超過(guò)三層，
比如：精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式利用CSS繼承減少代碼量避免
！important，可以選擇其他選擇器
21 什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。基本原理是通過(guò)媒體查詢(xún)檢測(cè)不同的設(shè)備屏幕尺寸做處理。
頁(yè)面頭部必須有meta聲明的viewport。<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
22 視差滾動(dòng)效果？
視差滾動(dòng)（Parallax Scrolling）通過(guò)在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢來(lái)創(chuàng)建出令人驚嘆的3D效果。
CSS3實(shí)現(xiàn)優(yōu)點(diǎn)：開(kāi)發(fā)時(shí)間短、性能和開(kāi)發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器jQuery實(shí)現(xiàn)通過(guò)控制不同層滾動(dòng)速度，計(jì)算每一層的時(shí)間，控制滾動(dòng)效果。
優(yōu)點(diǎn)：能兼容到各個(gè)版本的，效果可控性好缺點(diǎn)：開(kāi)發(fā)起來(lái)對(duì)制作者要求高插件實(shí)現(xiàn)方式例如：parallax-scrolling，兼容性十分好
23 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用
單冒號(hào)(:)用于CSS3偽類(lèi)，雙冒號(hào)(::)用于CSS3偽元素。
::before就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于dom之中，只存在在頁(yè)面之中。
:before 和 :after 這兩個(gè)偽元素，是在CSS2.1里新出現(xiàn)的。
起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)，成為::before ::after
24 你對(duì)line-height是如何理解的？
行高是指一行文字的高度，具體說(shuō)是兩行文字間基線(xiàn)的距離。
CSS中起高度作用的是height和line-height，沒(méi)有定義height屬性，最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中，其實(shí)也可以把height刪除。多行文本垂直居中：需要設(shè)置display屬性為inline-block。
25 怎么讓Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
26 讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？
-webkit-font-smoothing在window系統(tǒng)下沒(méi)有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
27 position:fixed;在android下無(wú)效怎么處理？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
28 如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
29 li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車(chē)空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒(méi)有空格了。
解決方法：
可以將<li>代碼全部寫(xiě)在一排浮動(dòng)li中float：left在ul中用font-size：0（谷歌不支持）；
可以使用letter-space：-3px
30 display:inline-block 什么時(shí)候會(huì)顯示間隙？
有空格時(shí)候會(huì)有間隙 解決：移除空格margin正值的時(shí)候 解決：margin使用負(fù)值使用font-size時(shí)候
解決：font-size:0、letter-spacing、word-spacing
31 有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿(mǎn)剩下的高度
外層div使用position：relative；
高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0;
left: 0
32 png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒(méi)有了解過(guò)webp？
png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式.
優(yōu)點(diǎn)是：壓縮比高，色彩好。大多數(shù)地方都可以用。jpg是一種針對(duì)相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯(cuò)。在www上，被用來(lái)儲(chǔ)存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像。可以實(shí)現(xiàn)動(dòng)畫(huà)效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。
缺點(diǎn)是壓縮的時(shí)間更久了，兼容性不好，目前谷歌和opera支持。
33 style標(biāo)簽寫(xiě)在body后與body前有什么區(qū)別？
頁(yè)面加載自上而下 當(dāng)然是先加載樣式。
寫(xiě)在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫(xiě)在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）
34 CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理?
參數(shù)是scroll時(shí)候，必會(huì)出現(xiàn)滾動(dòng)條。參數(shù)是auto時(shí)候，子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條。
參數(shù)是visible時(shí)候，溢出的內(nèi)容出現(xiàn)在父元素之外。
參數(shù)是hidden時(shí)候，溢出隱藏。
35 闡述一下CSS Sprites
將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能；CSS Sprites能減少圖片的字節(jié)。
