前端面試CSS題目

CSS

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；

（3）區  別： IE的content部分把 border 和 padding計算了進去;

 

CSS選擇符有哪些？哪些屬性可以繼承？

1.id選擇器（ # myid）

    2.類選擇器（.myclassname）

    3.
 
標籤選擇器（div, h1, p）

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

    5.子選擇器（ul > li）

    6.後代選擇器（li a）

    7.萬用字元選擇器（ * ）

    8.屬性選擇器（a[rel = "external"]）

    9.偽類選擇器（a:hover, li:nth-child）

*   可繼承的樣式： font-size font-family color, UL LI DL DD DT;
 

*   不可繼承的樣式：border padding margin width height ;

CSS優先順序演算法如何計算？

優先順序就近原則，同權重情況下樣式定義最近者為準;

*   載入樣式以最後載入的定位為準;

優先順序為:

    同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。

    !important >  id > class > tag
 

important 比 內聯優先順序高

CSS3新增偽類有那些？

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

    p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

    p:only-child        選擇屬於其父元素的唯一子元素的每個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

    :after          在元素之前新增內容,也可以用來做清除浮動。

    :before         在元素之後新增內容

    :enabled        

    :disabled       控制表單控制元件的禁用狀態。

:checked        單選框或複選框被選中。

如何居中div？

1、水平居中：給div設定一個寬度，然後新增margin:0 auto屬性

div{

    width:200px;

    margin:0 auto;

 }

2、水平垂直居中一

確定容器的寬高 寬500 高 300 的層

設定層的外邊距

div {

    position: relative;     /* 相對定位或絕對定位均可 */

    width:500px; 

    height:300px;

    top: 50%;

    left: 50%;

    margin: -150px 0 0 -250px;      /* 外邊距為自身寬高的一半 */

    background-color: pink;     /* 方便看效果 */

 }

3、水平垂直居中二

未知容器的寬高，利用 `transform` 屬性

div {

    position: absolute;     /* 相對定位或絕對定位均可 */

    width:500px; 

    height:300px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: pink;     /* 方便看效果 */

}

4、水平垂直居中三

利用 flex 佈局

實際使用時應考慮相容性

.container {

    display: flex; 

    align-items: center;        /* 垂直居中 */

    justify-content: center;    /* 水平居中 */

}

.container div {

    width: 100px;

    height: 100px;

    background-color: pink;     /* 方便看效果 */

}  

display有哪些值？說明他們的作用。

block 塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。

 none 預設值。象行內元素型別一樣顯示。

inline 行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。

inline-block 預設寬度為內容寬度，可以設定寬高，同行顯示。

list-item 象塊型別元素一樣顯示，並新增樣式列表標記。

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

 inherit 規定應該從父元素繼承 display 屬性的值。

 

position的值relative和absolute定位原點是？

absolute

    生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。

  fixed （老IE不支援）

    生成絕對定位的元素，相對於瀏覽器視窗進行定位。

  relative

    生成相對定位的元素，相對於其正常位置進行定位。

  static

    預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。

  inherit

    規定從父元素繼承 position 屬性的值。

 

CSS3有哪些新特性？

新增各種CSS選擇器  （: not(.input)：所有 class 不是“input”的節點）

  圓角            （border-radius:8px）

  多列布局      （multi-column layout）

  陰影和反射   （Shadow\Reflect）

  文字特效      （text-shadow、）

  文字渲染      （Text-decoration）

  線性漸變      （gradient）

  旋轉            （transform）

  縮放,定位,傾斜,動畫,多背景

  例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

 

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

一個用於頁面佈局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。

 較為複雜的佈局還可以通過巢狀一個伸縮容器（flex container）來實現。

 採用Flex佈局的元素，稱為Flex容器（flex container），簡稱"容器"。

 它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱"專案"。

 常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流可以很方便的用來做局中，能對不同螢幕大小自適應。

 在佈局上有了比以前更加靈活的空間。

 

用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設為 transparent）

#demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

 

li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬於字元,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字元大小設為0，就沒有空格了。

 

 

 

為什麼要初始化CSS樣式。

- 因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

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

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

淘寶的樣式初始化程式碼：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

 

css定義的權重

以下是權重的規則：標籤的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

/*權重為1*/

div{

}

/*權重為10*/

.class1{

}

/*權重為100*/

#id1{

}

/*權重為100+1=101*/

#id1 div{

}

/*權重為10+1=11*/

.class1 div{

}

/*權重為10+10+1=21*/

.class1 .class2 div{

}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

 

 

請解釋一下為什麼需要清除浮動？清除浮動的方式

清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。

1、父級div定義height；

2、父級div 也一起浮動；

3、常規的使用一個class；

    .clearfix:before, .clearfix:after {

        content: " ";

        display: table;

    }

    .clearfix:after {

        clear: both;

    }

    .clearfix {

        *zoom: 1;

    }

4、SASS編譯的時候，浮動元素的父級div定義偽類:after

    &:after,&:before{

        content: " ";

        visibility: hidden;

        display: block;

        height: 0;

        clear: both;

    }

解析原理：

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;

4）通過 content:"."生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，例如oocss裡面就有經典的 content:".",有些版本可能content 裡面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

通過分析發現，除了clear：both用來閉合浮動的，其他程式碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什麼會有font-size：0，line-height：0。

 

移動端的佈局用過媒體查詢嗎？

假設你現在正用一臺顯示裝置來閱讀，同時你也想把它投影到螢幕上，或者打印出來， 而顯示裝置、螢幕投影和列印等這些媒介都有自己的特點，CSS就是為文件提供在不同媒介上展示的適配方法

當媒體查詢為真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。 當媒體查詢返回假， 標籤上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。

包含了一個媒體型別和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表範圍的表示式。 CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用於某些特定的裝置範圍。

@media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } }

 

什麼是BFC

   BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型佈局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。

形成BFC的條件

      1、浮動元素，float 除 none 以外的值； 
      2、定位元素，position（absolute，fixed）； 
      3、display 為以下其中之一的值 inline-block，table-cell，table-caption； 
      4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

什麼是CSS 前處理器 / 後處理器？

- 前處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css程式碼的複用性，

  還有層級、mixin、變數、迴圈、函式等，具有很方便的UI元件模組化開發能力，極大的提高工作效率。

- 後處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的

  是給CSS屬性新增瀏覽器私有字首，實現跨瀏覽器相容性的問題。

 

為什麼要使用css sprites

css 精靈圖，把一堆小的圖片整合到一張大的圖片（png）上，減輕伺服器對圖片的請求數量。

• css精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
• css sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用css的"background-image","background-position"的組合進行背景定位，這樣可以減少。
• 很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以併發，但是如果請求太多會給伺服器增加很大的壓力。

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

• display:none;使用該屬性後，HTML元素（物件）的寬高，高度等各種屬性值都將“丟失”；
• visibility:hidden;使用該屬性後，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。

 

px、em、rem的區別？

• 1、px畫素。絕對單位，畫素px是相對於顯示器螢幕解析度而言的，是一個虛擬單位。是計算機系統的數字化影象長度單位，如果px要換算成物理長度，需要指定精度DPI。
• 2、em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對瀏覽器的預設字型尺寸。它會繼承父級元素的字型大小，因此並不是一個固定的值。
• rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字型大小事，仍然是相對大小但相對的只是HTML根元素。
• 4、區別：IE無法呼叫那些使用px作為單位的字型大小，而em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器已支援rem。