CSS面試題整理

時間 2019-11-14

標籤 css 面試整理欄目 CSS 简体版

原文原文鏈接

Css篇：

1.有哪項方式能夠對一個DOM設置它的CSS樣式？　　css

外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標籤內部
內聯樣式，將css樣式直接定義在 HTML 元素內部

2.CSS都有哪些選擇器？前端

派生選擇器（用HTML標籤申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）

還有一些擴展選擇器。css3

後代選擇器（利用空格間隔，好比div .a{ }）
羣組選擇器（利用逗號間隔，好比p,div,#a{ }）

CSS選擇器的優先級是怎麼樣定義的？git

用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
- div.test1 .span var 優先級 1+10 +10 +1
- span#xxx .songs li 優先級1+100 + 10 + 1
- #xxx li 優先級 100 +1

3.CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？　　github

　　最基本的：web

　　設置display屬性爲none，或者設置visibility屬性爲hiddenchrome

　　技巧性：瀏覽器

　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000less

4.超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？函數

答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

5.什麼是Css Hack？ie6,7,8的hack分別是什麼？

答案：針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

#test{   
        width:300px;   
        height:300px; 
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

6.請用Css寫一個簡單的幻燈片效果頁面

答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。

/**HTML**/
        div.ani
 
        /**css**/
        .ani{
          width:480px;
          height:320px;
          margin:50px auto;
          overflow: hidden;
          box-shadow:0 0 5px rgba(0,0,0,1);
          background-size: cover;
          background-position: center;
          -webkit-animation-name: "loops";
          -webkit-animation-duration: 20s;
          -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes "loops" {
            0% {
                background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
            }
            25% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
            }
            50% {
                background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
            }
            75% {
                background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
            }
            100% {
                background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
            }
        }

7.行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

塊級元素(block)特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

8.什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

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

9.rgba()和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

10.css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

答案：

垂直方向：line-height

水平方向：letter-spacing

那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

.space {
    letter-spacing: -6px;
}
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
    letter-spacing: 0;
}

<div class="space">
    <a href="##">惆悵</a>
    <a href="##">淡定</a>
    <a href="##">熱血</a>
</div>

最終效果

能夠完美的解決除了Opera瀏覽器以外的全部瀏覽器兼容(word-spacing 效果應該相仿，Opera下未測)。

11.如何垂直居中一個浮動元素？

// 方法一：已知元素的高寬
 
#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;
 
    position: absolute;        //父元素須要相對定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }
 
//方法二:未知元素的高寬
 
  #div1{
    width: 200px;
    height: 200px;
    background-color: #6699FF;
 
    margin:auto;
    position: absolute;        //父元素須要相對定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）

#container     //<img>的容器設置以下
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

12.px和em的區別。

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

13.描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置CSS文件並知道如何使用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

14.Sass、LESS是什麼？你們爲何要使用他們？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

爲何要使用它們？

結構清晰，便於擴展。
能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。
能夠輕鬆實現多重繼承。
徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

15.display:none與visibility:hidden的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。