CSS部分的面試題主要考察應試者對CSS基礎概念模型的理解，例如文檔流、盒模型、浮動、定位、選擇器權重、樣式繼承等。很多應試者認為CSS很簡單，沒多少內容，面試就是面試 JavaScript部分的內容，這些觀點是錯誤的，面試的第一關往往會考察應試者對CSS的掌握情況。因此，CSS也常常是應試者掉入的第一個陷阱。

1、CSS有哪些基本選擇器？它們的權重是如何表示的？

CSS基本選擇器有類選擇器、屬性選擇器和ID選擇器。

CSS選擇器的權重預示著CSS選擇器樣式渲染的先后順序，元素樣式渲染時，權重高的選擇器樣式會覆蓋權重低的選擇器樣式。

通常將權重分為4個等級，可用0.0.0.0來表示這4個等級。

！important關鍵字優先級最高。

注意：！importont井非選擇器，而是針對選擇器內的單一樣式設置的。當然，不同選擇器內應用 ！important的權重也是不一樣的，例如，在id選擇器內的！important關鍵字權重要高于類選擇器內的 ！important關鍵字權重，即下面所說的選擇器權重組合。

內聯樣式（非元素器）的優先級可看成1.0.0.0。

ID選擇器的優先級為0.1.0.0。

類屬性選擇器、屬性選擇器、偽類的優先級為0.0.1.0。

元素選擇器、偽元素選擇器的優先級為0.0.0.1。

通配符選擇器對特殊性沒有任何貢獻值。

當把選擇器組合使用的時候，相應的層級權重也會遞增，例如# id .class的權重為0.1.1.0。

2、CSS的引入方式有哪些？ink和@ import的區別是什么？

CSS有3種引入方式。

• 行內式是指將樣式寫在元素的 style屬性內。

• 內嵌式是指將樣式寫在 style元素內。

• 外鏈式是指通過link標簽，引入CSS文件內的樣式。

通過link標簽引入樣式與通過@ import方法引入樣式有如下區別。

（1）加載資源的限制。

link是 XHTML的標簽，除了加載CSS文件外，還可以加載RSS等其他事務，如加載模板等。

@ import只能加載CSS文件。

（2）加載方式。

如果用link引用CSS，在頁面載入時同時加載，即同步加載。

如果用@ import引用CSS，則需要等到網頁完全載入后，再加載CSS文件，即異步加載。

（3）兼容性。

link是 XHTML的標簽，沒有兼容問題。

@ import是在CSS2.1中提出的，不支持低版本的瀏覽器。

（4）改變樣式

link的標簽是DOM元素，支持使用 JavaScript控制DOM和修改樣式；@ import是種方法，不支持控制DOM和修改樣式。

3、浮動元素引起的問題和解決方法是什么？

引起的問題有如下幾個。

（1）父元素的高度無法被撐開，影響與父元素同級的元素。

（2）與元素同級的非浮動元素會緊隨其后（類似遮蓋現象）。

（3）如果一個元素浮動，則該元素之前的元素也需要浮動；否則，會影響頁面顯示的結構（即通常所說的串行現象）。

解決方法如下：

（1）為父元素設置固定高度。

（2）為父元素設置 overflow:hidden即可清除浮動，讓父元素的高度被撐開。

（3）用 clear:both樣式屬性清除元素浮動。

注意：如果只有左浮動或只有右浮動，可以單獨設置 clear:left或 clear:right，但是設置clear:both則都可以解決，所以此方法在工作中用得更多。

（4）外墻法是指在父元素外面，添加“一道墻”，設置屬性 clear:both

（5）內墻法是指在父元素內部，浮動元素的最后面，添加“一道墻”，設置屬性 clear:both

（6）偽元素是指為了少創建元素，對父元素添加afer偽元素，設置屬性 content：""；display ：block；clear:both。

注意：這里所說的少創建元素，實際上并沒有少創建，添加的偽元素也是元素，只不過沒有寫在HTML文檔中而已。

（7）使用通用類 clearfix, clearfix的實現如下：

clearfix:after {? content " "；display:block;clear:both;}

注意：推薦以上這種方式，因為 clearfix已經應用在各大CSS框架（如 Bootstrap等）中，并成為行業的默認規范。

4、position的值分別是相對于哪個位置定位的？

relative表示相對定位，相對于自己本身所在正常文檔流中的位置進行定位。absolute表示絕對定位，相對于最近一級（從直接父級元素往上數，直到根元素）定位，相對于 statIc的父元素進行定位。

fixed用于生成絕對定位，相對于瀏覽器窗口或 frame進行定位。

statIc是默認值，沒有定位，元素出現在正常的文檔流中。

sticky是生成黏性定位的元素，容器的位置根據正常文檔流計算得出。

注意：CSS3的新增屬性有點類似于 relative與 fixed的結合體。如果目標區域在屏幕中可見，表現為 relative；如果目標區域在屏幕中不可見，表現為fixed。

5、請說明 position:absolute和float屬性的異同。

共同點是對內聯元素設置float和 absolute屬性，可以讓元素脫離文檔流，并且可以設置其寬高。

不同點是float仍可占據位置，不會覆蓋在另一個BFC區域上，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止， absolute會覆蓋文檔流中的其他元素，即遮蓋現象。

6、CSS選擇器（符）有哪些？

（1）id選擇器（#myld）。

（2）類選擇器（ .my ClassName）。

（3）標簽選擇器（div,p,h1）

（4）相鄰選擇器（h1+p）

（5）子選擇器（ul>li）

（6）后代選擇器（li? a）

（7）通配符選擇器（*）

（8）屬性選擇器（ button[disabled="true"]）。

（9）偽類選擇器（ a:hover、 li:nth- child）表示一種狀態。

（10）偽元素選擇器（li:before、“：after”、“：first- letter”、“：first-line”、“；selecton”）表示文檔某個部分的表現。

注意：在CSS3規范中，為了區別偽元素和偽類，CSS3建議偽類用單冒號“："，偽元素用雙冒號"：："。

7、CSS的哪些樣式可以繼承？哪些不可以繼承？

可繼承的樣式有font- size font-family color, UL LI DL DD DT。

不可繼承的樣式有 border、 padding, margin, width、 height。

注意：為了方便辨識，與字體相關的樣式通?？梢岳^承，與尺寸相關的樣式通常不能繼承。

8、CSS優先級如何排序？

優先級如下:

！important>style（內聯）>ld（權重100）> class（權重10）>標簽（權重1）。同類別的樣式中，后面的會覆蓋前面的。

9、HTML是什么？CSS是什么？JavaScript是什么？

（1）HTML（ Hyper Text Markup Language，超文本標記語言）是做網站時使用的些文本標記標簽，比如div、span等

（2）CSS（ Cascading Style Sheet，層疊樣式表）是做網站時為美化網站而為標簽添加的樣式，比如 background（背景）、 color（字體顏色） height（高度）、widh（寬度）等。

（3） JavaScript是網站中實現前后臺交互效果、網頁動畫效果的一種開發語言，比如鼠標單擊（ click）事件、前后臺數據請求（Ajax）等。

10、為什么要初始化CSS？

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒有初始化CSS，往往會導致頁面在不同瀏覽器之間出現差異。

當然，初始化樣式有時會對SEO產生一定的影響，但魚和熊掌不可兼得，所以在力求影響最小的情況下初始化CSS。

最簡單的初始化方法就是：*{ padding：0；margin：0；}

11、如何居中div？如何居中一個浮動元素？

確定容器的寬高，例如寬400px、高200px的div.設置層的外邊距。

div { float:left； width：400px； height：200px； margin：-100px 0 0-200px； /*注意，由于左上外邊距優先級高于右下外邊距優先級，因此，還可以簡化設置 margin：-150px-250px；*/ position:relative；left：50%；top：50%； /*為方便看效果，添加一種背景色*/ background-color:pink }

12、構成CSS的基本語句是什么？

構成CSS的基本語句如下。

選擇器{屬性名稱1：屬性值1；屬性名稱2：屬性值2；}

例如

div{ margin-top：20px；border：2px solid #red；}

13、display有哪些值？說明它們的作用。

display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作用如下。

block是指塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。? ?none是指元素不會顯示，已脫離文檔流。

inline是指行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。

inline- block是指默認寬度為內容寬度，可以設置寬高，同行顯示。

list-item是指像塊類型元素一樣顯示，并添加樣式列表標記。

注意：例如，用div模擬li元素<ul>< div style=" display:list-item：">有課前端網</d></ul>。

table是指此元素會作為塊級表格顯示。

inherit是指從父元素繼承 display屬性的值。

14、簡要描述塊級元素和行內元素的區別。

塊級元素的前后都會自動換行。默認情況下，塊級元素會獨占一行。例如<p><h1-h6><div>都是塊級元素，當顯示這些元素中間的文本時，都將從新行中開始顯示，其后的內容也將在新行中顯示。

行內元素可以和其他行內元素位于同一行，在瀏覽器中顯示時不會換行。例如<a><span>等，對于行內元素，不能設置其高度和寬度。

還有一種元素是行內塊級元素，比如<img>< input>元素等。這些元素可以和其他行內元素位于同一行，同時可以設置其高度和寬度。

15、如何用DIV+CSS實現3欄布局（左右固定200pX，中間自適應）？

具體代碼如下：

html

<div?class="container"> <div?class="main"> <h2>有課前端網</h2> </div> <div?class="left">左邊內容</div> <?div?class="right" >右邊內容</div> </dv>

CSS?

.container div {height：200px；} .container{ padding：0 200px；} .main,.left,.right{position:relative；float:left；} .left.right{width：200px；} .main{ width：100%；background:yellow；} .left {background:blue：margin-left：-100%；left：-200px；} .right {background:green；margin-left：-200px；left：200px；}

16、解釋浮動及其工作原理。

浮動的元素可以向左或向右移動，直到它的外邊緣碰到包含元素（父元素）或另一個浮動元素的邊框為止。要想使元素浮動，必須為元素設置一個寬度（ width）。雖然浮動元素已不在文檔流中，但是它浮動后所處的位置依然在浮動之前的水平方向上。

因為浮動元素不在文檔流中，所以文檔流中的塊元素表現得就像浮動元素不存在一樣，下面的元素會填補原來的位置。

有些元素會在浮動元素的下方，但是這些元素的內容并不一定會被浮動的元素遮蓋。當定位內聯元素時，要考慮浮動元素的邊界，圍繞浮動元素放置內聯元素。也可以把浮動元素想象成被塊元素忽略的元素，而內聯元素會關注的元素。

17、解釋一下 CSS Sprite，以及如何在頁面或網站中使用它。

CSS Sprite其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position”的組合進行背景定位， background- position可以用數字精確地定位出背景圖片的位置。

注意：在高級瀏覽器中，可以基于圖片的bose64編碼存儲，將圖片與其他類型的文件打包。

18、在書寫高效CSS時有哪些問題需要考慮？

（1）樣式，從右向左解析一個選擇器

（2）類型選擇器的速度，ID選擇器最快， Universal（通配符*）最慢。對于常用的4種類型選擇器，解析速度由快到慢依次是ID、 class, tag和 universal。

（3）不要用標簽限制ID選擇器（如：ul#main- navigation{}，ID已經是唯一的，不需要Tag來限制，這樣做會讓選擇器變慢）。

（4）后代選擇器最糟糕（換句話說， html body ul li a{}這個選擇器是很低效的）。

（5）想清楚你的需求，再去書寫選擇器。

（6）CSS3選擇器（如nth- child）能夠漂亮地定位我們想要的元素，又能保證CSS整潔易讀。然而，這些神奇的選擇器會浪費很多的瀏覽器資源。

（7）我們知道ID選擇器的速度最快，但是如果都用ID選擇器，會降低代碼的可讀性和可維護性等。在大型項目中，相對于使用ID選擇器提升速度，代碼的可讀性和可維護性帶來的收益更大。

19、說出幾種解決IE6 ?Bug的方法。

解決方案如下：

（1）雙邊距問題，是使用fLoat引起的。

解決方法是使用 display:inline。

（2）3像素問題，是使用float引起的。

解決方法是使用 margin- right：-3px。

（3）超鏈接 hover偽類樣式，單擊后失效。

解決方法是使用以下正確的書寫順序：L→V→H→A（link, visited, hover.， active）。

（4）z- index問題。

解決方法是給父級添加 position：relative

（5）PNG圖片半透明問題。

解決方法是使用 JavaScript代碼庫，或使用IE濾鏡

注意：在使用E濾鏡解決PNG圖片透明度的時候，在1E6中，會對事件產生影響。

20、頁面重構怎樣操作？

編寫CSS，讓頁面結構更合理化，提升用戶體驗，達到良好的頁面效果并提升性能

21、display:none和 visibility:hidden的區別是什么？

display:none隱藏對應的元素，在文檔流中不再給它分配空間，它各邊的元素會合攏，即脫離文檔流。

visibility:hidden隱藏對應的元素，但是在文檔流中仍保留原來的空間。

22、內聯元素可以實現浮動嗎？

在CSS中，任何元素都可以浮動。不論浮動元素本身是何種元素，都會生成個塊級框。因此，對于內聯元素，如果設置為浮動，會產生和塊級框相同的效果。

23、簡要描述CSS中 content屬性的作用。

content屬性與：before及：after偽元素配合使用，用來插入生成的內容，可以在元素之前或之后放置生成的內容。可以插入文本、圖像、引號，并可以結合計數器，為頁面元素插入編號。比如，查看如下代碼。

body{ counter-reset:chapter； }h1:before{content："第" counter（ chapter）"章" } h1{ counter-increment:chapter： } <h1></h1> <h1></h1> <h1></h1>

使用 content屬性，并結合 :before選擇器和計數器 counter，可以在每個<h1>元素前插入新的內容。

24、如何定義高度很小的容器？

因為有一個默認的行高，所以在IE6下無法定義小高度的容器。

兩種解決方案分別是 overflow:hidden或font-size：容器高度px

25、如何在圖片下方設置幾像素的空白間隙？

定義img為 display:block，或定義父容器為font-size：0。

26、如何解決IE6雙倍 margin的Bug？

使用 display:inline

27、如何讓超出寬度的文字顯示為省略號？

輸入 overflow:hidden；width:xxx；white-space:nowrap；?

text-overflow:ellipsis。

28、如何使英文單詞發生詞內斷行？

輸入word-wrap:break-word。

29、如何實現IE6下的 position:fxed？

具體代碼如下：

html_{overflow:hidden；}body_{overflow:auto；height：100%：} .fixed{position:fixed； _position:absolute； left:0； top:0； padding：10px； background：#000； }

30、如何讓min- height兼容IE6？

具體代碼如下。

.min-height{ min-height：100px； _height：100px； background：red； }

31、已知高度的容器如何在頁面中水平垂直居中？

具體代碼如下。

<style type=text/css"> # box { width：200px； height：200px； background:red； position:absolute； left：50%； top:50%; margin：-100px 0 0-100px； /*或者 marion：-100px*/ } </style> <div id="box“></div>

32、px和em的區別是什么？

px和em都是長度單位，兩者的區別是：px的值是固定的，指定為多少就是多少，計算比較容易；em的值不是國定的，是相對于容器字體的大小，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px，所以未經調整的瀏覽器都符合lem=16px，那么12px=0.75em，10px=0.625em。

與cm對應的另一個長度單位是rem，是指相對于根元素（通常是HTML元素）字體的大小。

33、什么叫優雅降級和漸進增強？兩者有什么區別？

優雅降級 graceful degradation是指一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

漸進增強 progressive enhancement是指針對低版本瀏覽器構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進并追加功能，以達到更好的用戶體驗。

兩者的區別如下。

（1）優雅降級從復雜的現狀開始，并試圖減少用戶體驗的供給。

（2）漸進增強則從一個非?；A并且能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。

（3）降級（功能衰減）意味著往回看，而漸進增強則意味著朝前看，同時保誣其根基處于安全地帶。

34、網頁制作會用到哪些圖片格式？

用于網頁制作的主流圖像格式有JPG、PNG、GIF等。

JPG：壓縮率高，文件小，最常用。

PNG：支持無損壓縮，色彩損失小，保真度高，文件稍大。

GIF：支持動畫顯示，但只支持256色顯示，目前已經被Fash大量取代。

35、CSS的 content屬性有什么作用？有什么應用？

CSS的 content屬性專門應用在 before/after偽元素上，用于插入生成的內容最常見的應用是利用偽類清除浮動。

36、對行內元素設置 margin-top和 margin- bottom是否起作用？

不起作用（需要注意行內元素的替換元素img、 Input，它們是行內元素，但是可以設置它們的寬度和高度，并且 margin屬性也對它們起作用， margin-op和 margin- botton有著類似于 inline- block的行為）

37、div+css的布局較table布局有什么優點？

（1）改版的時候更方便，只須改動CSS文件。

（2）頁面加載速度更快、結構清晰、頁面簡潔。

（3）表現與結構分離。

（4）搜索引擎優化（SEO）更友好，排名更靠前。

38、如果設置<p>的font-sze為10rem，那么當用戶重置或拖曳瀏覽器窗口時，它的文本會不會受到影響？

不會

39、談談你對BFC規范的理解。

BFC（ Block Formatting Context）指塊級格式化上下文，即一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中，兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的 margin會發生折疊。

BFC決定元素如何對其內容進行布局，也決定與其他元素的關系和相互作用。

40、談談你對C規范的理解。

IFC（ Inline Formatting Context）指內聯格式化上下文，IFC的線框（ line box）高度由其包含行內元素中最高的實際高度計算而來（不受豎直方向的 padding/margin的影響）。IFC中的線框一般左右都貼緊整個IFC，但是會被foat元素擾亂。同一個IFC下的多個線框高度不同。

IFC中是不可能有塊級元素的，當插入塊級元素時（如在p中插入div），會產生兩個匿名塊，兩者與div分隔開，即產生兩個IFC，每個IFC對外表現為塊級元素，與div垂直排列。

41、談談你對GFC規范的理解。

GFC（ GridLayout Formatting Context）指網格布局格式化上下文，即當把一個的 display值設為grid的時候，此元素將會獲得一個獨立的渲染區域?？梢酝ㄟ^在網格容器（ grid container）上定義網格定義行（ grid definition row）和網格定義列（grid definition column），在網格項目（ grid item）上定義網格行（ grid row）和網格列（grid column）來為每一個網格項目定義位置和空間。

42、談談你對FFC規范的理解。

FFC（ Flex Formatting Context）指自適應格式化上下文，即 display值為fex或lne-flex的元素將會生成自適應容器。伸縮容器中的每一個子元素都是一個伸縮單元。伸縮單元可以是任意數量的。伸縮單元內和伸縮容器外的一切元素都不受影響。簡單地說， Flexbox定義了伸縮容器內伸縮單元的布局。

43、訪問超鏈接后 hover樣式就不出現的原因是什么？應該如何解決？

因為訪問過的超鏈接樣式覆蓋了原有的 hover和 active偽類選擇器樣式，解決方法是將CSS屬性的排列順序改為L→V→H→A（link, visited, hover, active）。

44、什么是外邊距重疊？重疊的結果是什么？

外邊距重疊就是 margin- collapse在CSS中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式稱為折疊，因此而結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規則。

（1）當兩個相鄰的外邊距都是正數時，折疊的結果是它們兩者中較大的值

（2）當兩個相鄰的外邊距都是負數時，折疊的結果是兩者中絕對值較大的值。

（3）當兩個外邊距一正一負時，折疊的結果是兩者相加的和。

45、rgba0和 opacity的透明效果有什么不同？

rgba()和 opacity都能實現透明效果，但它們最大的不同是 opacity作用于元素，并且可以設置元素內所有內容的透明度；而 rgba()只作用于元素的顏色或其背景色（設置rgba透明的元素的子元素不會繼承透明效果）。

46、CSS中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？

垂直方向的屬性是 line-height.水平方向的屬性是 letter-spacing。

47、你知道哪些關于 letter- spacing的妙用？

可以用于消除 inline- block元素間的換行符空格間隙

48、有什么方式可以對一個DOM設置它的CSS？

有以下三種方式。

• 外鏈式，即通過link標簽引入一個外部CSS文件中。

• 內嵌式，即將CSS代碼寫在 style標簽內。

• 行內式，即將CSS代碼寫在元素的 style屬性中。

49、在CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？

最基本的方式如下。

設置 display屬性為none，或者設置 visibility屬性為 hidden技巧性的方式如下。

設置寬高為0，透明度為0，設置z- index位置為-1000。

50、常用的塊屬性標簽及其特征有哪些？

常用塊標簽有div、hl、h6、ol、ul、li、d、 table、p、br、form。塊標簽的特征有獨占一行，換行顯示，可以設置寬、高，塊可以套塊和行。

51、常用的行內屬性標簽及其特征有哪些？

行標簽有span、a、img、var、em, strong、 textarea、 select、 option、 input.行標簽的特征有在行內顯示，內容撐開寬、高，不可以設置寬、高（img, input、 textarea等除外），行只能套用行標簽。

52、瀏覽器標準模式和怪異模式之間的區別是什么？

它們的區別是盒子模型的渲染模式不同。

可以使用 window. top document compatMode判斷當前模式為何種模式結果為 Back Compat，表示怪異模式結果為 CSSICompat，表示標準模式。

53、如何避免文檔流中的空白符合并現象？

空白符合并是標準文檔流的特征之一，可以通過設置 white-spac修改這一特征，屬性值如下。

pre表示不會合并空白符，渲染換行符，不會自動換行，相當于pre元素。

pre-wrap表示不會合并空白符，渲染換行符，自動換行pre-line表示合并空白符，渲染換行符，自動換行。

nowrap表示合并空白符，不會渲染換行符，不會自動換行。

normal表示默認值，按照文檔流特點渲染，合并空白符，不會渲染換行符，自動換行。

54、常見的兼容性問題有哪些？

PNG24位的圖片在IE6瀏覽器上出現背景，解決方案是改成PNG8，也可以引段腳本進行處理瀏覽器默認的 margin和 padding不同。解決方案是用一個全局的*{ margin：0 padding：0；}來統一它們。

IE6雙邊距Bug是指在塊屬性標簽float后又有橫行的 margin時，在IE6中顯示的margin比設置的大浮動IE產生的雙倍距離（IE6的雙邊距問題是指在IE6下，如果對元素設置了浮動，同時又設置了 margin-left或 margin- right, margin的值會加倍）

#box{ float:left；width：10px；margin：00 100px；}

這種情況下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入display:inline，將其轉換為行內屬性（這個符號只會被IE6識別）。

用漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙地使用“\9”這一標記，將IE瀏覽器從所有情況中分離出來。然后，再次使用“+”將IE8和I7、IE6分離開，這樣IE8就能被獨立識別。

CSS

.bb{ background-color:#f1ee18；/所有識別*/ background- color：#00deff\9；/IE6、7、8識別”/ + background- color：#a200ff；/*E6、7識別*/ background- color：#1e0bdl；/"IE6識別”/ }

怪異模式問題是指漏寫DTD聲明， Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣?，F在可以使用[hml5]

推薦的寫法是'< doctype html>'上下 margin重合的問題IE和FF中都存在，相鄰兩個div的 margIn-et和 margin- right不會重合，但是margin-top和 margin- bottom會重合。

解決方法是養成良好的代碼編寫習慣，同時采用 margin-top或者同時采用 margin- bottom。

55、透明度具有繼承性，如何取消透明度的繼承？

使用rgba給元素的背景設置透明度的方式，來替代使用opacity設置元素透明度的方式，解決子元素繼承父元素透明度的問題。

56、CSS中，自適應的單位都有哪些？

自適應的單位有以下幾個

• 百分比：%

• 相對于視口寬度的單位：ww

• 相對于視口高度的單位：vh

• 相對于視口寬度或者高度（取決于哪個小）的單位：Vm

• 相對于父元素字體大小的單位：em

• 相對于根元素字體大小的單位：rem

57、說說rem和em的區別。

它們都是相對單位

• rem表示相對于根元素的字體大小。

• em表示相對于父元素的字體大小

58、什么是FOUC？如何避免FOUC？

FOUC即無樣式內容閃爍（ Flash Of Unstyled Content），是在IE下通過 @import方式導入CSS文件引起的，如：< style type=" text/css" media="all"@ Dimporturl('demo.css）；</style>

IE會首先加載整個HTML文檔的DOM，然后再導入外部的CSS文件。因此，在頁面DOM加載完成到CSS導入完成中間，有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速和電腦速度都有關系。

解決方法是在<head>之間加入一個<link>或< script>標簽

59、說說 display:none和 visibility:hidden的區別。

display:none隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當它從來都不存在。

visibility:hidden隱藏對應的元素，但是在文檔布局中仍保留原來的空間。

本文完~

最后

• 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
  

• 歡迎關注「前端Q」,認真學前端，做個專業的技術人...

點個在看支持我吧

總結

以上是生活随笔為你收集整理的59道CSS面试题(附答案)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。