​CSS面試26題

大家好，這一期呢，我們看一下css的面試題。

第1題，css有哪些版本？

css1，css 2, css 2.1, css3, css 4.

第2題, 有多少種把css集成到網頁裡的辦法?

有三種辦法, inline, external, internal。

第3題，什麼是css？

Css是針對html元素的網絡設計語言。它的出現大大的簡化了設計流程和增強了網頁的展示性。

第4題，External css的優點和缺點是什麼?

優點有:

一個網站可以管理多個樣式文件。

多個網頁可以共享一個或者多個樣式文件。

可以應對樣式文件特別複雜的情況。

缺點有:

樣式文件作為單獨的文件，需要單獨的下載。

樣式文件作為單獨文件需要被加載才能使用。

當樣式比較小的時候，創建一個文件顯得有點矯枉過正。

第5題，討論一下嵌入式樣式的好處和壞處?

好處有:

樣式跟元素合用一個文件。

可以使用selector和group methods.

不需要單獨下載。

壞處有:

其他的元素文件無法分享這些樣式。

第6題, 什麼是css Box model, 它有哪些元素?

Box定義了樣式的設計和佈局。它有如下元素:

Margin

Border

Padding

Content。

第7題, z-index的目的是什麼？如何使用?

z-index用來指定stack的順序。實際環境中多個元素會疊加在一起，這個順序決定了這些元素是如何顯示的。

Z-index可以有如下的值:

auto, 跟父級元素相同。

Number

Initial, 確認值為0。

Inherit, 跟父級元素相同。

第8題, css sprites的好處是什麼?

Css sprites的好處就是把很多個小的圖片文件，合成一個大的圖片文件，在網絡傳輸中，把多個請求變成一個請求，從而加快加載的速度。

第9題, 有哪些media types?

all, aural, braille, embossed, print, projection, handheld, tv, screen.

第10題，什麼是pseudo元素？

結合selector使用，用於對選中的元素的某一部分進行樣式變化。

比如，它可以對第1個字母, 第1行，或者第1個元素進行一些樣式變化。還可以添加一些內容。

第11題， Class selector的用處是什麼?

在樣式定義中，class前面會有一個點，它的名字可以包含減號, 下劃線, 大小寫字母和數字。在使用的時候，在元素中用class屬性。

第12題, 列舉一下fonts的屬性。

Fonts的屬性包括font style, font variant , fomt weight, font size, line height, font family, caption, icon.

第13題, Css是大小寫敏感的嗎？

在有xhtml DOCtype的情況下, Css是大小寫敏感的。

在Html 4.01中, css不是大小寫敏感的，除了class names，Font families， Image urls 等等。

第14題, Logical tags和physical tags的區別是什麼?

Physical tag是為了指定特定的字符是如何格式化的。Logical tag是為了強化某些文字。

Physical tag, 被認為是展示型的標記。Logical tag不會被顯示。

physical tag更新。Logical tag是老古董。

第14題， 區分一下style sheet跟html。

Html是定義了數據部分的結構。Style sheet是定義這些數據如何展示出來.

第15題, 什麼是rule set?

Rule set就是對一個元素進行樣式定義的集合。它有兩個部分，一個是selector, 一個是樣式集合。

第16題, Css的優勢有哪些?

提供了樣式變換的靈活性。

容易維護。

允許數據和樣式的分離。

加載網頁更快了。

多種設備的兼容性很強。

提高了瀏覽器的適應性。

Tag

Class.

ID.

第18題, 說幾個pseudo元素。

First line, first letter, selection, after, before.

第19題, 說幾個pseudo class。

hover, active, first child, last child, nth child.

第20題, 什麼是屬性？如何使用它們?

你可以使用方括號來指定屬性值。input[type="radio"] {

}

第21題, !Important是做什麼用的?

這個標記是用來重寫已經存在的樣式。用的時候一定要小心.

第22題, Flex box, grid box的區別是什麼?

這兩個都是非常好的佈局設計工具。

Flex box相對來說更簡單，它可以對橫向和縱向的內容進行排列。

Grid box, 傾向於對雙向也就是橫向和縱向內容同時進行兼顧。

第23題, 變量是做什麼用的?

變量可以用來定義類似顏色，字體，字體大小，一些座標等可以重用的數值。

第24題， 什麼是functions或者mixins?

Mixins提供了一種動態機制，可以根據輸入的參數來設定不同的樣式。

第25題， 什麼是universal selector?

Universal selector匹配的是任何一個元素類型。

第26題, Display hidden 和 display none有什麼區別?

Display hidden是把元素隱藏起來，但是仍然佔據空間，仍然會影響整個文檔的佈局。

Display none, 隱藏, 不佔空間。