前端面試之Css篇

時間 2019-12-05

標籤前端面試 css 欄目快樂工作简体版

原文原文鏈接

1 . CSS 屬性是否區分大小寫？javascript

答：不區分。 HTML，CSS都對大小寫不敏感，但爲了更好的可讀性和團隊協做通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。css

2 . 行內(inline)元素設置margin-top和margin-bottom 是否起做用？padding-top和padding-bottom是否會增長它的高度？html

答：行內元素又分爲替換元素（replaced element）和非替換元素（non-replaced element）。java

替換元素: 是指用做爲其餘內容佔位符的一個元素。如： img、input 等起做用;瀏覽器
非替換元素:是指內容包含在文檔中的元素如：span等不起做用；優化

3 . 設置p的font-size:10rem，當用戶重置或拖曳瀏覽器窗口時，文本大小是否會也隨着變化？spa

答：rem是以html根元素中font-size的大小爲基準的相對度量單位，文本的大小不會隨着窗口的大小改變而改變。插件

4 . translate()方法能移動一個元素在z軸上的位置？code

答：不能。translate()方法只能改變x軸，y軸上的位移。orm

5 . only 選擇器的做用是？ @media only screen and (max-width: 1024px) {margin: 0;}

答：中止舊版本瀏覽器解析選擇器的其他部分。
only 用來定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。
其實only不少時候是用來對那些不支持Media Query 但卻支持Media Type 的設備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only 不存在；
對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，由於其先讀only 而不是screen；
另外不支持Media Qqueries 的瀏覽器，不管是否支持only，樣式都不會被採用。

6 . 瀏覽器CSS匹配順序

答：瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。

好比#divBox p span.red{color:red;}，瀏覽器的查找順序以下：先查找html中全部class='red'的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id爲divBox的div元素，
若是都存在則匹配上。瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。

7 . display:none 和visibilty:hidden的區別：

答：display:none和visibility:hidden都是把網頁上某個元素隱藏起來的功能，但二者有所區別: visibility:hidden屬性會使對象不可見，但該對象在網頁所佔的空間沒有改變（看不見但摸獲得），等於留出了一塊空白區域，而display:none`屬性會使這個對象完全消失（看不見也摸不到）

8 . 請描述 BFC(Block Formatting Context) 及其如何工做。：

答：浮動元素和絕對定位元素，非塊級盒子的塊級容器

（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，
都會爲他們的內容建立新的BFC（塊級格式上下文）

會觸發BFC的條件有：

float的值不爲none。
overflow的值不爲visible。
display的值爲table-cell, table-caption, inline-block 中的任何一個。
position的值不爲relative 和static。

摺疊的結果：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是二者的相加的和。

9 . 談談樣式的優先級

優先級逐級增長

0.元素(類型)選擇器（h1）和僞元素選擇器（:before）
1.類選擇器（.demo）屬性選擇器（[type="radio"]）
2.ID選擇器（#demo）
內聯樣式

當在一個樣式聲明上使用 !important規則時，該樣式聲明會覆蓋CSS中任何其餘的聲明。

Never 永遠不要在全站範圍的 css 上使用 !important
Only 只在須要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
Never 永遠不要在你的插件中使用 !important
Always 要優化考慮使用樣式規則的優先級來解決問題而不是 !important

10 . 趕上過FOUC嗎？如何解決FOUC

答：Flash of Unstyled Content (FOUC) 文檔樣式短暫失效
只須要在文檔的head元素中添加一個link元素或者添加script元素就能夠防止FOUC的發生.

link元素解決方案

<head>
    <title>My Page</title>
    <link rel=」stylesheet」 type=」text/css」 media=」print」 href=」print.css」 mce_href=」print.css」>
    <style type=」text/css」 media=」screen」>@import 「style.css」;</style>
</head>

script元素解決方案

<head>
        <title>My Page</title>
        <script type=」text/javascript」> </script>
        <style type=」text/css」 media=」screen」>@import 「style.css」;</style>
    </head>