Web前端有哪些css面試題

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

　　常見的Web前端CSS面試題：

　　1、談?wù)勀銓SS布局的理解

　　2、請列舉幾種可以清除浮動的方法（至少兩種）
　　浮動會漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是這種特性，導(dǎo)致框內(nèi)部由于不存在其他普通流元素了，表現(xiàn)出高度為0（高度塌陷）。
　　a. 添加額外標(biāo)簽，例如<div ></div>
　　b. 使用br標(biāo)簽和其自身的html屬性，例如<br clear="all" />
　　c. 父元素設(shè)置 overflow：hidden；在IE6中還需要觸發(fā)hasLayout，例如zoom：1；
　　d. 父元素設(shè)置 overflow：auto 屬性；同樣IE6需要觸發(fā)hasLayout
　　e. 父元素也設(shè)置浮動
　　f. 父元素設(shè)置display:table
　　g. 使用:after 偽元素；由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
　　在CSS2.1里面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。
　　創(chuàng)建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，同時BFC仍然屬于文檔中的普通流。
　　IE6-7的顯示引擎使用的是一個稱為布局（layout）的內(nèi)部概念。
　　參考《那些年我們一起清除過的浮動》

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

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

　　5、請簡述CSS樣式表繼承
　　CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《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、請簡述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等
　　偽對象選擇器：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偽對象的區(qū)別
　　CSS 引入偽類和偽元素的概念是為了描述一些現(xiàn)有CSS無法描述的東西
　　根本區(qū)別在于：它們是否創(chuàng)造了新的元素（抽象）
　　偽類：一開始用來表示一些元素的動態(tài)狀態(tài)，隨后CSS2標(biāo)準(zhǔn)擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標(biāo)識的&ldquo;幽靈&rdquo;分類
　　偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中
　　參考《CSS偽類與CSS偽元素的區(qū)別及由來》

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

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

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

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

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

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

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

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

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

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

　　19、什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？
　　如果使用import方法對CSS進行導(dǎo)入，會導(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)加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現(xiàn)了短暫的花屏現(xiàn)象。
　　解決方法：使用LINK標(biāo)簽將樣式表放在文檔HEAD中。

　　20、line-height三種賦值方式有何區(qū)別？（帶單位、純數(shù)字、百分比）
　　帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高
　　純數(shù)字：把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px
　　百分比：將計算后的值傳遞給后代
　　參考《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，即用喜歡和討厭兩個詞來概括

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

　　24、什么是外邊距重疊？重疊的結(jié)果是什么？
　　外邊距重疊就是margin-collapse。
　　在CSS當(dāng)中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
　　折疊結(jié)果遵循下列計算規(guī)則：
　　a. 兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
　　b. 兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
　　c. 兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。

　　25、rgba()和opacity的透明效果有什么不同？
　　a. opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，rgba()只作用于元素的顏色或其背景色。
　　b. 設(shè)置rgba透明的元素的子元素不會繼承透明效果！

　　26、css屬性content有什么作用？有什么應(yīng)用？
　　css的content屬性專門應(yīng)用在 before/after 偽元素上，用于來插入生成內(nèi)容。
　　可以配合自定義字體顯示特殊符號。

看完上述內(nèi)容，你們掌握Web前端有哪些css面試題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！