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