前端面试题整理（css）
1、介紹所知道的CSS hack技巧(如：_，?*， +，?\9， !important 之類)。
CSS hack的原理：
由于不同的瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣，以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響，我們可以據(jù)此針對(duì)不同的瀏覽器情景來(lái)應(yīng)用不同的CSS。
條件注釋法：
只在IE下生效： <!--[if IE]> 這段文字只在IE瀏覽器顯示 <![endif]-->只在IE6下生效： <!--[if IE 6]> 這段文字只在IE6瀏覽器顯示 <![endif]-->只在IE6以上版本生效： <!--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]-->只在IE8上不生效： <!--[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]-->非IE瀏覽器生效： <!--[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]-->類內(nèi)屬性前綴法：
| hack | 寫法 | 實(shí)例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 綠色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黃色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 藍(lán)色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 紅色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
說(shuō)明：在標(biāo)準(zhǔn)模式中
- “-″減號(hào)是IE6專有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack
選擇器前綴法：
選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。
目前最常見的是
*html *前綴只對(duì)IE6生效 *+html *+前綴只對(duì)IE7生效 @media screen\9{...}只對(duì)IE6/7生效 @media \0screen {body { background: red; }}只對(duì)IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效 @media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效CSS hack利弊
一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我們的項(xiàng)目頁(yè)面使用了大量 CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法時(shí),可能就得讓IE8- 的專屬hack出馬了。使用hack雖然對(duì)頁(yè)面表現(xiàn)的一致性有好處，但過(guò)多的濫用會(huì)造成html文檔混亂不堪，增加管理和維護(hù)的負(fù)擔(dān)。相信只要大家一起努 力，少用、慎用hack，未來(lái)一定會(huì)促使瀏覽器廠商的標(biāo)準(zhǔn)越來(lái)越趨于統(tǒng)一，順利過(guò)渡到標(biāo)準(zhǔn)瀏覽器的主流時(shí)代。拋棄那些陳舊的IE hack，必將減輕我們編碼的復(fù)雜度，少做無(wú)用功。
2、介紹CSS盒模型。
盒狀模型是CSS中重要的概念。盒狀模型中最重要的是內(nèi)容，它是必備的，其他的幾項(xiàng)都是可選的。 如上圖，盒狀模型有內(nèi)至外的順序是：- content（內(nèi)容，它可以是文字、圖片等。）
- padding（內(nèi)邊距，也有人稱之為空白、內(nèi)補(bǔ)丁等。）
- border（邊框。）
- margin（外邊距，也可稱為邊界。）
?
3、CSS層疊是什么？介紹一下。
我認(rèn)可的理解：層疊指的是上級(jí)標(biāo)簽的樣式會(huì)自動(dòng)繼承到其所有下級(jí)標(biāo)簽，如針對(duì)<body>設(shè)置的標(biāo)簽選擇器所設(shè)的字體樣式會(huì)自動(dòng)應(yīng)用到<body>下的<p>中，除非<p>重寫了相關(guān)樣式將其覆蓋。
CSS語(yǔ)義化的命名是指用易于理解的名稱對(duì)html標(biāo)簽附加的class或id命名，如對(duì)于頁(yè)面上方的<div>，可將其id設(shè)為header；頁(yè)面下方的<div>設(shè)為footer，可以增強(qiáng)CSS的可維護(hù)性。
基本上層疊的意思就是“繼承”、“權(quán)重”、“覆蓋”，通過(guò)良好的層級(jí)命名更好的實(shí)現(xiàn)效果，更少的代碼，更多的功能。
4、都知道哪些CSS瀏覽器兼容性問(wèn)題。
問(wèn)題1：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外邊距（margin）和內(nèi)邊距（padding）不同
解決方案：*{margin:0;padding:0;}
備注：不建議通配符*，css遍歷也是有代價(jià)的（雖說(shuō)現(xiàn)代瀏覽器可以忽略）。可以寫全body,p,html,h1,h2,h3...{margin:0;padding:0;}
問(wèn)題2：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div+float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問(wèn)題。
問(wèn)題3：圖片默認(rèn)有間距
解決方案：使用float屬性為img布局，上下間距可以設(shè)置vertical-align: middle;或者設(shè)置成display:block。
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。
問(wèn)題4：CSS透明問(wèn)題
解決方案：
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
備注：最好兩個(gè)都寫，并將opacity屬性放在下面。
問(wèn)題5：CSS圓角問(wèn)題
解決方案：ie7以下版本不支持圓角,其他瀏覽器都是加前綴例：FF（-moz-）
?
備注：隨著瀏覽器更新?lián)Q代，圓角屬性都會(huì)被支持的；ie6-7,可以用三角形實(shí)現(xiàn)（有興趣的可以研究研究）
?
5、CSS3都有哪些新內(nèi)容。
css3邊框：
- border-radius：圓角邊框
- box-shadow：邊框陰影
- border-image：邊框圖片
css3背景：
- background-size：圖片大小
- background-origin：圖片定位區(qū)域
css3文本效果：
- text-shadow：文本陰影
- word-wrap：自動(dòng)換行
css3字體：
- @font-face：定義字體
css32D轉(zhuǎn)換：
- translate()：當(dāng)前位置移動(dòng)
- rotate()：順時(shí)針旋轉(zhuǎn)角度
- scale()：元素尺寸放大縮小
- skew()：元素翻轉(zhuǎn)
- matrix()：2D轉(zhuǎn)換的組合
css33D轉(zhuǎn)換：
- rotateX()：圍繞其 X 軸旋轉(zhuǎn)
- rotateY():圍繞其 Y 軸旋轉(zhuǎn)
css3過(guò)渡：
- transition：hover過(guò)渡
css3動(dòng)畫：
animation：動(dòng)畫設(shè)置 @keyframes：創(chuàng)建動(dòng)畫規(guī)則css3多列：
- column-count：分隔的列數(shù)
- column-gap：列之間的間隔
- column-rule：列之間的寬度、樣式和顏色
css3用戶界面：
- resize：是否可由用戶調(diào)整元素尺寸
- box-sizing：可以改變盒子模型
- outline-offset：超出邊框邊緣的位置繪制輪廓
轉(zhuǎn)載于:https://www.cnblogs.com/chenrf/p/4894383.html
總結(jié)
以上是生活随笔為你收集整理的前端面试题整理（css）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 知识点小记之转义字符
- 下一篇： 前端面试题整理（js）