Web前端有哪些css面試題？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、資陽ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的資陽網(wǎng)站制作公司

　常見的Web前端CSS面試題：

　1、談?wù)勀銓?duì)CSS布局的理解

　2、請(qǐng)列舉幾種可以清除浮動(dòng)的方法（至少兩種）
　浮動(dòng)會(huì)漂浮于普通流之上，像浮云一樣，但是只能左右浮動(dòng)。正是這種特性，導(dǎo)致框內(nèi)部由于不存在其他普通流元素了，表現(xiàn)出高度為0（高度塌陷）。
　a. 添加額外標(biāo)簽，例如

　3、請(qǐng)列舉幾種隱藏元素的方法
　a. visibility: hidden；這個(gè)屬性只是簡單的隱藏某個(gè)元素，但是元素占用的空間任然存在。
　b. opacity: 0；一個(gè)CSS3屬性，設(shè)置0可以使一個(gè)元素完全透明，制作出和visibility一樣的效果。與visibility相比，它可以被transition和animate
　c. position: absolute；使元素脫離文檔流，處于普通文檔之上，給它設(shè)置一個(gè)很大的left負(fù)值定位，使元素定位在可見區(qū)域之外。
　d. display: none；元素會(huì)變得不可見，并且不會(huì)再占用文檔的空間。
　e. transform: scale(0)；將一個(gè)元素設(shè)置為無限小，這個(gè)元素將不可見。這個(gè)元素原來所在的位置將被保留。
　f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個(gè)屬性用于記錄一個(gè)元素的狀態(tài)
　g. height: 0; overflow: hidden；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術(shù)就可以正常工作。
　h. filter: blur(0)；將一個(gè)元素的模糊度設(shè)置為0，從而使這個(gè)元素“消失”在頁面中。
　參考《使用CSS隱藏HTML元素的4種常用方法》《通過HTML和CSS隱藏和顯示元素的4種方法》

　4、如何讓一段文本中的所有英文單詞的首字母大寫
　text-transform：
　none| capitalize(將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫) | uppercase(將每個(gè)單詞轉(zhuǎn)換成大寫 ) | lowercase(將每個(gè)單詞轉(zhuǎn)換成小寫 )

　5、請(qǐng)簡述CSS樣式表繼承
　CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會(huì)被繼承下去的屬性如下：參考《CSS樣式表繼承詳解》
　文本相關(guān)：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
　列表相關(guān)：list-style-image，list-style-position，list-style-type， list-style

　6、請(qǐng)簡述CSS的選擇器
　元素選擇器：* 、E、 E#id、 E.class
　關(guān)系選擇器：E、F、E>F、E+F、E~F
　屬性選擇器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
　偽類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
　偽對(duì)象選擇器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
　參考《選擇符列表》

　7、CSS偽類與CSS偽對(duì)象的區(qū)別
　CSS 引入偽類和偽元素的概念是為了描述一些現(xiàn)有CSS無法描述的東西
　根本區(qū)別在于：它們是否創(chuàng)造了新的元素（抽象）
　偽類：一開始用來表示一些元素的動(dòng)態(tài)狀態(tài)，隨后CSS2標(biāo)準(zhǔn)擴(kuò)展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標(biāo)識(shí)的“幽靈”分類
　偽對(duì)象：代表了某個(gè)元素的子元素，這個(gè)子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹中
　參考《CSS偽類與CSS偽元素的區(qū)別及由來》

　8、請(qǐng)簡述CSS的權(quán)重規(guī)則
　一個(gè)行內(nèi)樣式+1000，一個(gè)id+100，一個(gè)屬性選擇器/class類/偽類選擇器+10，一個(gè)元素名/偽對(duì)象選擇器+1。
　關(guān)系選擇器將拆分為兩個(gè)選擇器再計(jì)算。參考《CSS權(quán)重》

　9、請(qǐng)寫出多種等高布局
　a. 假等高列：使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假像
　b. 給容器div使用單獨(dú)的背景色（固定布局）（流體布局）：用元素中的最大高度撐大其他的容器高度
　c. 創(chuàng)建帶邊框的兩列等高布局：用border-left來做，只能使用兩列。
　d. 使用正padding和負(fù)margin對(duì)沖實(shí)現(xiàn)多列布局方法：在所有列中使用正的上、下padding和負(fù)的上、下margin，并在所有列外面加上一個(gè)容器，設(shè)置overflow:hiden把溢出背景切掉
　e. 使用邊框和定位模擬列等高：但不能使用在多列
　f. 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運(yùn)行

　10、在CSS樣式中常使用px、em，各有什么優(yōu)劣，在表現(xiàn)上有什么區(qū)別？
　px是相對(duì)長度單位，相對(duì)于顯示器屏幕分辨率而言的。
　em是相對(duì)長度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。
　px定義的字體，無法用瀏覽器字體放大功能。
　em的值并不是固定的，會(huì)繼承父級(jí)元素的字體大小，1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值。

　11、CSS中 link 和@import 的區(qū)別是什么？
　a. link屬于HTML標(biāo)簽，而@import是CSS提供的，且只能加載 CSS
　b. 頁面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載
　c. import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無兼容問題
　d. link方式的樣式的權(quán)重 高于@import的權(quán)重
　e. 當(dāng)使用 Javascript 控制 DOM 去改變樣式的時(shí)候，只能使用 link 方式，因?yàn)?@import 眼里只有 CSS ，不是 DOM 可以控制

　12、position的absolute與fixed共同點(diǎn)與不同點(diǎn)
　相同：
　a. 改變行內(nèi)元素的呈現(xiàn)方式，display被置為block
　b. 讓元素脫離普通流，不占據(jù)空間
　c. 默認(rèn)會(huì)覆蓋到非定位元素上
　區(qū)別：
　absolute的”根元素“是可以設(shè)置的，而fixed的”根元素“固定為瀏覽器窗口。
　當(dāng)你滾動(dòng)網(wǎng)頁，fixed元素與瀏覽器窗口之間的距離是不變的。

　13、position的值， relative和absolute分別是相對(duì)于誰進(jìn)行定位的？
　absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位
　fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。（IE6不支持）
　relative：生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位
　static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中

　14、CSS3有哪些新特性？
　CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），對(duì)文字加特效（text-shadow），線性漸變（gradient），變形（transform）
　增加了更多的CSS選擇器 多背景 rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄布局
　參考《CSS3中的動(dòng)畫效果記錄》、《CSS3中border-radius、box-shadow與gradient那點(diǎn)事兒》

　15、為什么要初始化CSS樣式？
　因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
　當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

　16、解釋下 CSS sprites原理，優(yōu)缺點(diǎn)
　CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，
　再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，
　background-position可以用數(shù)字精確的定位出背景圖片的位置。
　優(yōu)點(diǎn)：
　a. 減少網(wǎng)頁的http請(qǐng)求
　b. 減少圖片的字節(jié)
　c. 解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名
　d. 更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。
　缺點(diǎn)：
　a. 在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂
　b. CSS Sprites在開發(fā)的時(shí)候，要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置
　c. 在維護(hù)的時(shí)候比較麻煩，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片

　17、解釋下浮動(dòng)和它的工作原理？
　a. 浮動(dòng)元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）
　b. 浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
　18、浮動(dòng)元素引起的問題
　a. 父元素的高度無法被撐開，影響與父元素同級(jí)的元素
　b. 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
　c. 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)

　19、什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？
　如果使用import方法對(duì)CSS進(jìn)行導(dǎo)入，會(huì)導(dǎo)致某些頁面在Windows下的IE出現(xiàn)一些奇怪的現(xiàn)象：
　以無樣式顯示頁面內(nèi)容的瞬間閃爍，這種現(xiàn)象稱之為文檔樣式短暫失效(Flash of Unstyled Content)，簡稱為FOUC。
　原理：當(dāng)樣式表晚于結(jié)構(gòu)性html加載，當(dāng)加載到此樣式表時(shí)，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現(xiàn)了短暫的花屏現(xiàn)象。
　解決方法：使用LINK標(biāo)簽將樣式表放在文檔HEAD中。

　20、line-height三種賦值方式有何區(qū)別？（帶單位、純數(shù)字、百分比）
　帶單位：px不用計(jì)算，em則會(huì)使元素以其父元素font-size值為參考來計(jì)算自己的行高
　純數(shù)字：把比例傳遞給后代，例如父級(jí)行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px
　百分比：將計(jì)算后的值傳遞給后代
　參考《line-height的理解》、《淺析line-height和vertical》，查看在線源碼。

　21、:link、:visited、:hover、:active的執(zhí)行順序是怎么樣的？
　L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個(gè)詞來概括

　22、經(jīng)常遇到的瀏覽器兼容性有哪些？如何解決？
　a. 瀏覽器默認(rèn)的margin和padding不同
　b. IE6雙邊距bug
　c. 在ie6，ie7中元素高度超出自己設(shè)置高度。原因是IE8以前的瀏覽器中會(huì)給元素設(shè)置默認(rèn)的行高的高度導(dǎo)致的
　d. min-height在IE6下不起作用
　e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6
　f. input邊框問題，去掉input邊框一般用border:none;就可以，但由于IE6在解析input樣式時(shí)的BUG(優(yōu)先級(jí)問題)，在IE6下無效
　23、有哪項(xiàng)方式可以對(duì)一個(gè)DOM設(shè)置它的CSS樣式？
　a. 外部樣式表：通過標(biāo)簽引入一個(gè)外部css文件
　b. 內(nèi)部樣式表：將css代碼放在