前端面試題：css相關面試題

時間 2019-12-08

標籤端面試題 css 相關面試欄目 CSS 简体版

原文原文鏈接

CSS 選擇器中，元素選擇器和類選擇器的區別是什麼？css

元素選擇器是最多見的 CSS 選擇器，即，文檔的元素就是最基本的選擇器。選擇器一般是某個 HTML 元素，好比 <p>、<h1>、<em>、<a>等，甚至能夠是 <html> 元素自己。html

類選擇器用於將樣式規則與附帶 class 屬性的元素匹配，其中該 class 屬性的值爲類選擇器中指定的值。使用類選擇器時，首先須要定義樣式類，其語法爲：瀏覽器

.className { }佈局

全部可以附帶 class 屬性的元素均可以使用此樣式聲明。只須要將 class 屬性的值設置爲「className」，則能夠將類選擇器的樣式與元素關聯。網站

在實際使用時，若是須要爲某種元素定義樣式，則每每使用元素選擇器；若是要應用樣式而不考慮具體設計的元素，最經常使用的方法就是使用類選擇器。google

簡要描述 CSS 中的定位機制。spa

CSS 中，除了默認的流定位方式之外，還有以下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。設計

浮動定位是指將元素排除在普通流以外，而且將它放置在包含框的左邊或者右邊，可是依舊位於包含框以內。htm

1、首先，按照普通流和非普通流來分類：對象

　　①普通流：就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。

　　②非普通流：顧名思義就是脫離普通流的，在普通流上面是不佔據位置的。css有position的樣式，position包括：static，relative，absolute，fixed四種值。其中static是屬於普通流；relative也是屬於特殊的普通流，詳細下面有介紹；absolute和fixed以及float就是屬於非普通流的，加載的時候，也會順序加載，可是會脫離普通流的位置。

2、分別介紹static,relative,absolute,fixed和float（經過top,left,right,bottom來設置相對定位）

　　①static：就是默認的普通流，不手動設置position樣式的話，默認就是static；

　　②relative：叫相對定位，指的是相對他本身原來的位置的相對位置，而且原來的位置仍是佔着的（因此說屬於特殊的普通流），其餘的元素不會填上去，可是設置好相對位置以後，他新的位置是不會擠壓其餘元素的，就像把該元素從原來的位置上摳出來，放在單獨一層來佈局。

　　③absolute:叫絕對定位，指的是①相對其父元素位置的絕對定位，可是他屬於非普通流，②原來的位置是不會佔着的，是單獨的一層，脫離了普通流。除了以上兩點，其餘的和relative差很少。

　　④fixed：叫固定定位，指的是元素相對於瀏覽器窗口的定位（好比一些網站兩邊的廣告），拉動滾動條，他也不會跟着動，也是屬於非普通流，其餘的跟relative差很少。

　　⑤float：叫浮動，是css單獨的樣式，有top，right，bottom，left四種經常使用值，以上四個是屬於position的一種；float也是屬於普通流，單會改變普通流。他只能和普通流在同一層，可是能夠改變元素的位置，一樣是佔着位置的（和relative有點像），不會單獨一層（而relative，absolute，fixed會單獨一層，能夠設置z-index屬性來改變其先後位置）。使用float以後，元素則會脫離普通流，該元素則在普通流上再也不佔用位置，普通流的元素則會填補上去，這樣若是不去設置的話則會出現重疊覆蓋的狀況；若是想使用了float的元素也佔着普通流上的位置，該如何辦呢？這時候，能夠把應用了float樣式的元素緊接着的元素應用clear樣式，clear樣式包括：both，right，left三個值。both表示right和left的float都清除掉，另外兩個同理。這樣子則能夠清除在此以前的非普通流，讓他們也佔着普通流上的位置，可是這只是佔着位置，其實該元素是不存在於該位置的，該位置不存在任何元素（詳細本身google理解），可是這樣子的話，緊接着的那個元素想設置margin等，是會出現問題的，由於應用了float樣式的元素霸佔的那個位置實際上是什麼東西也沒有的，不存在邊界，因此應用margin則不會以那個元素（應用了float的那個）爲邊界的，會跳過那個邊界來計算，固然你也能夠把margin設大點（也就是加上float元素的長度或者寬度）也能夠達到效果。其實，能夠在float後面的元素以前，單獨加個 <div style="clear:both"> 清楚元素來專門用於清除浮動便可，接下來的元素應用margin則能夠正常起效（補充：其實通常來講，能夠在樣式表裏面單獨設置 .clear{clear：both;} 這樣的樣式來專門用於清除浮動，避免重複，代碼會規優雅規範不少）。

display 屬性和 visibility 屬性的區別？

可使用 display 屬性定義創建佈局時元素生成的顯示框類型。

1.若是將 display 屬性設置爲 block，可讓行內元素（好比 <a> 元素）表現得像塊級元素同樣；

2.若是將 display 屬性設置爲 inline，可讓塊級元素（好比 <p> 元素）表現得像內聯元素同樣；

3.能夠經過把 display 屬性設置爲 none，讓生成的元素根本沒有框。這樣的話，該框及其全部內容就再也不顯示，不佔用文檔中的空間。

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