unknow 前端開發面試題收集(css部分)

unknow 前端開發面試題收集(css部分) http://davidshariff.com/quiz/ 做了下這裡面前端開發面試的題，發現有些不會，是以在此做個整理以供自己學習，參考，總結。 1.問: CSS屬性是否區分大小寫？ ul { MaRGin: 10px; } 答：不區分。（HTML, CSS都不區分，但為了更好的可讀性和團隊協作，一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。） 2.問：對行内元素設定margin-top 和margin-bottom是否起作用 答：不起作用。（需要注意行内元素的替換元素img、input，他們是行内元素，但是可以為其設定寬高，并且margin屬性也是對其起作用的，有着類似于Inline-block的行為）。看具體效果： 複制代碼 div { width: 500px; height: 500px; margin-top: 100px; margin-left: 100px; background: lightblue; } span { margin: 100px; } img { margin: 100px; } 我是行内元素，設定margin看是否對我起作用

複制代碼 3.問：對内聯元素設定padding-top和padding-bottom是否會增加它的高度 答：不會。同上題，要注意行内元素的替換元素，img設定padding-top/bottom是會起作用的。 4.問：如果設定

的font-size: 10rem;那麼當使用者重置或拖拽浏覽器視窗時，它的文本會不會受到影響？ 答：不會。 rem是css3新增的一個相對機關（root em，根em），這個機關引起了廣泛關注。這個機關與em有什麼差別呢？差別在于使用rem為元素設定字型大小時，仍然是相對大小，但相對的隻是HTML根元素。 5.問: 僞類選擇器:checked将作用與input類型為radio或者checkbox, 不會作用于option？ 答：不對。 可以作用于option，試了下感覺并沒有什麼用，雖然能選中，但是這個不能改變其中的屬性。 複制代碼 option:checked { color: red; } input:checked { background: red; }

Volvo Saab Mercedes Audi

Male

Female

複制代碼

6.問: 在HTML文本中，僞類:root總是指向html元素？

答：是。

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

答：不能。它隻能移動x,y軸的位置。translate3d可以。

8-14.這六個題都是在考css選擇器的優先級，看下14題：

問：如下代碼中文本“Sausage”的顔色是?

• Milk
• Sausage

#awesome .favorite:not(#awesome) .highlight {

　　color: red;

}

#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {

　　color: blue;

}

答：red

:nth-of-type(n) 選擇器比對屬于父元素的特定類型的第 n 個子元素的每個元素.

:nth-last-of-type(n) 選擇器比對屬于父元素的特定類型的第 n 個子元素的每個元素，從最後一個子元素開始計數。

15.

html:

Hello

css:

#example { margin-bottom: -5px; } 問：#example的位置會發什麼什麼？ 答：所有帶id為example的元素的位置都會向上移動5px.(一般id不取重複，如果真的這樣設定了就和class效果一樣） 16.省略。。。 17-21.公用一個例子：

17.問：#i-am-useless 會被浏覽器加載嗎？

i-am-useless {background-image: url(‘mypic.jpg’);}

答：不會。

18.問：mypic.jpg 會被浏覽器加載嗎？

test2 {

background-image: url('mypic.jpg');
display: none;
           

}

答：會。

19.問：mypic.jpg 會被浏覽器加載嗎？

test2 {

background-image: url('mypic.jpg');
visibility: hidden;
           

}

答：會。

20.問：mypic.jpg 會被浏覽器加載嗎？

複制代碼

test1 {

display: none;
           

}

test2 {

background-image: url('mypic.jpg');
visibility: hidden;
           

}

複制代碼

答：不會。

21.問：mypic.jpg 會被浏覽器加載嗎？

複制代碼

test1 {

visibility: hidden;
           

}

test2 {

background-image: url('mypic.jpg');
display: none;
           

}

複制代碼

答：會.

22-23.

css:

@media only screen and (max-width: 1024px) {

margin: 0;

}

22.問：only選擇器的作用是？

答：停止舊版本浏覽器解析選擇器的其餘部分。

only 用來定某種特定的媒體類型，可以用來排除不支援媒體查詢的浏覽器。其實only很多時候是用來對那些不支援Media Query 但卻支援Media Type 的裝置隐藏樣式表的。其主要有：支援媒體特性（Media Queries）的裝置，正常調用樣式，此時就當only 不存在；對于不支援媒體特性(Media Queries)但又支援媒體類型(Media Type)的裝置，這樣就會不讀了樣式，因為其先讀only 而不是screen；另外不支援Media Qqueries 的浏覽器，不論是否支援only，樣式都不會被采用。

23.問：screen關鍵詞是指裝置的實體螢幕大小還是指浏覽器的視窗。

答：浏覽器的視窗。

24.問:overfloa:hidden 是否形成新的塊級格式化上下文？

答：會。

會觸發BFC的條件有：

float的值不為none。

overflow的值不為visible。

display的值為table-cell, table-caption, inline-block 中的任何一個。

position的值不為relative 和static。

根元素。

總結：

一.css選擇器，優先級知識點考的挺多。如何計算優先級，參考http://www.cnblogs.com/wangfupeng1988/p/4285251.html 這篇文章引入的一個概念：特指度。特指度表示一個css選擇器表達式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要。

這個計算叫做“I-C-E”計算公式，

I——Id；

C——Class；

E——Element；

即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。

舉例：

CSS選擇器表達式

特指度計算結果

p

1

p.large

11

P#large

101

div p#large

102

div p#large ul.list

113

div p#large ul.list li

114

注意：!important優先級最高，高于上面一切。* 選擇器最低，低于一切。

浏覽器CSS比對順序：

浏覽器CSS比對不是從左到右進行查找，而是從右到左進行查找。比如#divBox p span.red{color:red;}，浏覽器的查找順序如下：先查找html中所有class=’red’的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則比對上。浏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。

二：display:none 和visibilty:hidden的差別。

兩者都是将某個元素隐藏起來，差別是：display:none會使對象徹底消失，不占據空間；但是visibility:hidden所占的空間還在，留了一塊空白區域。（不過上述例子，關于img加載的，還有些不是很懂 第18問，為什麼display:none還是要加載圖檔，第20問，卻沒有加載圖檔）

三：浏覽器渲染，這個自己要着重學習下：

浏覽器的渲染原理簡介

專題：浏覽器:渲染重繪、重排兩三事

浏覽器加載和渲染HTML的順序以及Gzip的問題

從FE的角度上再看輸入url後都發生了什麼

四：BFC 塊級格式化上下文

深入了解BFC和Margin Collapse

CSS布局中一個簡單的應用BFC的例子

了解BFC(Block Formatting Context)

我對BFC的了解

參考：

前端試題css部分

作者：wj704 出處：http://www.cnblogs.com/wj204/