前端面試題（css篇）

04-27

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

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

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

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

2、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;

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

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

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

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

優先順序為:

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

!important > id > class > tag

important 比內聯優先順序高

4、CSS3新增偽類有那些？

舉例：

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

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

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

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

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

:before 在元素之後添加內容

:enabled

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

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

5、如何居中div？

水平居中：給div設置一個寬度，然後添加margin:0 auto屬性

div{ width:200px; margin:0 auto; }

讓絕對定位的div居中

div { position: absolute; width: 300px; height: 300px; margin: auto; top:0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */}

水平垂直居中一

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

設置層的外邊距

div { position: relative; /* 相對定位或絕對定位均可*/ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /*外邊距為自身寬高的一半 */ background-color: pink; /* 方便看效果 */ }

水平垂直居中二

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

div { position: absolute; /* 相對定位或絕對定位均可*/ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */ }

水平垂直居中三

利用 flex 布局

實際使用時應考慮兼容性

.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */}

.container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */}

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

block 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。

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

inline 行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。

inline-block 默認寬度為內容寬度，可以設置寬高，同行顯示。

list-item 象塊類型元素一樣顯示，並添加樣式列表標記。

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

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

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

absolute

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

fixed （老IE不支持）

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

relative

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

static

默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

inherit

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

8、CSS3有哪些新特性？

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

圓角（border-radius:8px）

多列布局（multi-column layout）

陰影和反射（ShadowReflect）

文字特效（text-shadow、）

文字渲染（Text-decoration）

線性漸變（gradient）

旋轉（transform）

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

例如:

transform:scale(0.85,0.90)

translate(0px,-30px)

skew(-9deg,0deg)Animation:

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

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

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

採用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。

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

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

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

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

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

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

11、一個滿屏品字布局如何設計?

簡單的方式：

上面的div寬100%，

下面的兩個div分別寬50%，

然後用float或者inline使其不換行即可

12、css多列等高如何實現？

利用padding-bottom|margin-bottom正負值相抵；

設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，

當它裡面的任一列高度增加了，則父容器的高度被撐到裡面最高那列的高度，

其他比這列矮的列會用它們的padding-bottom補償這部分高度差。

13、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離 #box{float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用「9」這一標記，將IE遊覽器從所有情況中分離出來。

接著，再次使用「+」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{ background-color:red;/*所有識別*/ background-color:#00deff9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ }

* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,

也可以使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性。

解決方法:統一通過getAttribute()獲取自定義屬性。

* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。

* 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

可通過加入 CSS 屬性-webkit-text-size-adjust: none; 解決。

超鏈接訪問過後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

L-V-H-A :

a:link {} a:visited {} a:hover {} a:active {}

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

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

15、為什麼要初始化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, 5b8b4f53; }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; }

16、absolute的containingblock(容器塊)計算方式跟正常流有什麼不同？

無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷：

（1）若此元素為 inline 元素，則containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；

（2）否則,則由這個祖先元素的padding box 構成。

如果都找不到，則為 initial containing block。

補充：

（1）static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）

（2） absolute: 向上找最近的定位為absolute/relative的元素

（3） fixed: 它的containing block一律為根元素(html/body)，根元素也是initialcontaining block

17、對BFC規範(塊級格式化上下文：blockformatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）

一個頁面是由很多個 Box組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。

不同類型的 Box,會參與不同的Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響

18、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{}

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

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

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

（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.0content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IEhasLayout。

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

20、什麼是外邊距合併？

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

21、zoom:1的清除浮動原理?

清除浮動，觸發hasLayout；

Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。

譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。

來龍去脈大概如下：

當設置了zoom的值之後，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裡一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。

Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規範草案中。

目前非ie由於不支持這個屬性，它們又是通過什麼屬性來實現元素的縮放呢？

可以通過css3裡面的動畫屬性scale進行縮放。

22、移動端的布局用過媒體查詢嗎？

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

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

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

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

23、使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)

24、CSS優化、提高性能的方法有哪些？

關鍵選擇器（key selector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）；

如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；

提取項目的通用公有樣式，增強可復用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性;

使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；

25、瀏覽器是怎樣解析CSS選擇器的？

樣式系統從關鍵選擇器開始匹配，然後左移查找規則選擇器的祖先元素。

只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該規則。

26、-margin和padding分別適合什麼場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。

margin用於布局分開元素使元素與元素互不相干；

padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段

27、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用。

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）

雙冒號是在當前規範中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，

比如:first-line、:first-letter、:before、:after等，

而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；

在代碼順序上，::after生成的內容也比::before生成的內容靠後。

如果按堆棧視角，::after生成的內容會在::before生成的內容之上

28、如何修改chrome記住密碼後自動填充表單的黃色背景？

input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill {

background-color: rgb(250, 255, 189); /* #FAFFBD; */

background-image: none;

color: rgb(0, 0, 0);

}

29、設置元素浮動後，該元素的display值是多少？

自動變成了 display:block

30、怎麼讓Chrome支持小於12px 的文字？

（1）用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。

（2）使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不兼容等事宜。

（3）繼續使用小於12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。

（4）使用12px以上字體：為了兼容、為了代碼更簡單從新考慮權重下兼容性。

31、讓頁面里的字體變清晰，變細用CSS怎麼做？

-webkit-font-smoothing: antialiased;

32、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？

傾斜的字體樣式

33、position:fixed;在android下無效怎麼處理？

fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，

原來的網頁還好好的在那，fixed的內容也沒有變過位置，

所以說並不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。

34、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

35、display:inline-block什麼時候會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

36、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）

如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，

所以不如隔離開。

因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，

這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，

提高了webserver的http請求的解析速度。

37、什麼是CSS 預處理器 / 後處理器？

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

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

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

是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。