CSS面試題

一、基礎篇

1、用純css創建一個三角形的原理是什么？

首先，需要把元素的寬高設置為0，然后設置邊框樣式。

width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #00ff00;

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

方法一：上面那塊用margin: 0 auto;居中； 下面兩塊用float或者inline-block不換行； 用margin調整位置使他們居中。
方法二：上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

3、常見的兼容性問題？

不同瀏覽器的標簽默認的margin和padding不一樣。

*{margin:0;padding:0; }

IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。
漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

{ background-color:#ff0000;/*所有識別*/ .background-color:#00ffff\9; /*IE6、7、8識別*/ +background-color:#0000ff;/*IE6、7識別*/ _background-color:#ffff00;/*IE6識別*/ }

設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。

IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。

Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

4、為什么要初始化CSS樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差

5、absolute的containing block計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)

6、CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區別？

當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。
chrome中，使用collapse值和使用hidden沒有區別。
firefox，opera和IE，使用collapse值和使用display：none沒有什么區別。

7、display:none與visibility：hidden的區別？

display：none 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）
重繪：當render-tree中的一些元素需要更新屬性，而這些屬性只影響元素的外觀、風格，而不影響布局，比如是background-color,則就稱為重繪。

回流：當頁面中的布局和幾何屬性改變時就需要回流，比如是：

<1>、添加或刪除可見的DOM元素

<2>、元素位置的改變

<3>、元素尺寸的改變（邊框、尺寸、填充、寬度、高度）

<4>、內容的改變（比如文本的改變和圖片大小的改變而引起的計算值寬度和高度的改變）

<5>、頁面渲染初始化

<6>、瀏覽器窗口尺寸的改變-resize事件發生時

回流必將引起重繪，重繪不一定會引起回流

8、position跟display、overflow、float這些特性相互疊加后會怎么樣？

display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。
類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

9、對BFC規范(塊級格式化上下文：block formatting context)的理解？

BFC規定了內部的Block Box如何布局。
定位方案：
內部的Box會在垂直方向上一個接一個放置。
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
BFC的區域不會與float box重疊。
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
計算BFC的高度時，浮動元素也會參與計算。
滿足下列條件之一就可觸發BFC
根元素，即html
float的值不為none（默認）
overflow的值不為visible（默認）
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed

10、為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：
父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。
清除浮動的方式：
父級div定義height
最后一個浮動元素后加空div標簽 并添加樣式clear:both。
包含浮動元素的父標簽添加樣式overflow為hidden或auto。
父級div定義zoom

11、有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

外層div使用position：relative；高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0

12、png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？

png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。

jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。

gif是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果.

webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

13、style標簽寫在body后與body前有什么區別？

頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

14、CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?

參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大于父元素時出現滾動條。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。

15、闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節。

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

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

17、box-sizing屬性？

用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

18、CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、偽類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color

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

優先級（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先級高

19、CSS優先級算法如何計算？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標簽：1000

!important聲明的樣式優先級最高，如果沖突再進行計算。

如果優先級相同，則選擇最后出現的樣式。

繼承得到的樣式的優先級最低。

以下是權重的規則：標簽的權重為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{ }

20、CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。

21、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

div：{border: 1px solid red;margin: 0 auto; height: 50px;width: 80px; }

浮動元素的上下左右居中：

div: {order: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px; }

絕對定位的左右居中：

div: {border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0; }

22、display有哪些值？說明他們的作用?

inline（默認）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block

23、position的值？

static（默認）：按照正常文檔流進行排列；
relative（相對定位）：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視窗口。

24、CSS3有哪些新特性？

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap（對長的不可分割單詞換行）word-wrap：break-word

文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

font-face屬性：定義自己的字體

圓角（邊框半徑）：border-radius 屬性用于創建圓角

邊框圖片：border-image: url(border.png) 30 30 round

盒陰影：box-shadow: 10px 10px 5px #888888

媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性

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

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。
試用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持。

25、上下margin重合的問題

在重合元素外包裹一層容器，并觸發該容器生成一個BFC。
eg：

<div class="aside"></div> <div class="text"><div class="main"></div> </div> <!--下面是css代碼-->.aside {margin-bottom: 100px; width: 100px;height: 150px;background: #f66;} .main {margin-top: 100px;height: 200px;background: #fcc; } .text{overflow: hidden; //此時已經觸發了BFC屬性。 }

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

自動變成display:block

27、使用 CSS 預處理器嗎？

Less sass

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

避免過度約束

避免后代選擇符

避免鏈式選擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復

最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么

避免！important，可以選擇其他選擇器

盡可能的精簡規則，你可以合并不同類里的重復規則

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

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

30、在網頁中的應該使用奇數還是偶數的字體？為什么呢？

使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。

31、margin和padding分別適合什么場景使用？

何時使用margin：

需要在border外側添加空白

空白處不需要背景色

上下相連的兩個盒子之間的空白，需要相互抵消時。

何時使用padding：

需要在border內側添加空白

空白處需要背景顏色

上下相連的兩個盒子的空白，希望為兩者之和。

兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。

32、元素豎向的百分比設定是相對于容器的高度嗎？

當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

33、全屏滾動的原理是什么？用到了CSS的哪些屬性？

原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現

overflow：hidden；transition：all 1000ms ease；

34、link和@import的區別？

（1）link屬于XHTML標簽，而@import是CSS提供的。
（2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
（3）import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。
（4）link方式的樣式權重高于@import的權重。
（5）使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。

35、常用Hack的技巧：

（1）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； （2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統一通過getAttribute()獲取自定義屬性。 （3）IE下，even對象有x,y屬性，但是沒有pageX,pageY屬性； （4）Firefox下，event對象有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件注釋，缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。 （5）Chrome 中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入 CSS屬性-webkit-text-size-adjust: none;來解決。 （6）超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序： L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

36、列出display的值，說明它們的作用。position的值里，relative和absolute定位原點是？

display的值：
block 像塊類型元素一樣顯示。
none 缺省值。像行內元素類型一樣顯示。
inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。
list-item 像塊類型元素一樣顯示，并添加樣式列表標記。
relative和absolute定位原點：
absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。
relative：生成相對定位的元素，相對于其正常位置進行定位。

37、淘寶的樣式初始化：

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; }

38、如何解決IE 6的3px問題？

_zoom:1; margin-left: value; _margin-left: value-3px;

39、Firefox下文本無法撐開容器的高度，如何解決？

清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}

40、怎么樣才能讓層顯示在Flash之上呢?

解決的辦法是給Flash設置透明屬性

<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

41、cursor:hand在FF下不顯示小手，如何解決？

cursor; pointer;

42、介紹一下 Sass 和 Less 是什么？它們有何區別？

Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，語法跟css一樣(但多了些功能)，比css好寫，而且更容易閱讀。Sass語法類似與Haml，屬于縮排語法（makeup），用意就是為了快速寫Html和Css。
Less一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。
區別：
(1))Sass是基于Ruby的，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器，也可以在開發環節使用Less，然后編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
(2)變量符不一樣，less是@，而Scss是$，而且變量的作用域也不一樣，后面會講到。
(3)輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
(4)Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。

43、請問 “resetting” 和 “normalizing” CSS 之間的區別？你會如何選擇，為什么？

Normalize.css 是一個可定制的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準；是在現代瀏覽器環境下對于CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。

normalizing：
保護有用的瀏覽器默認樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復瀏覽器自身的bug并保證各瀏覽器的一致性
優化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細的文檔來

Normalize.css 保護了有價值的默認值：
Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。

44、請解釋浮動 (Floats) 及其工作原理。

float被歸類于CSS 定位屬性（Positioning）
描述：規定框是否應該浮動。
定義和用法：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

45、描述z-index和疊加上下文是如何形成的。

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

而凡是擁有層疊上下文的元素，將離用戶最近，也就是越靠在Z軸前面。默認情況下只有根元素HTML會產生一個層疊上下文，并且元素一旦使用了一些屬性也將會產生一個層疊上下文，如我們常用的定位屬性。如兩個層疊上下文相遇時，總是后一個層疊前一個，除非使用z-index來改變。

詳情見：
http://www.cnblogs.com/pssp/p/5948356.html

46、請描述偽元素 (pseudo-elements) 及其用途。

偽元素例如：
:first-line / :first-letter / :befort / :after
詳情參見鏈接：
http://www.w3school.com.cn/css/css_pseudo_elements.asp

47、請解釋 inline 和 inline-block 的區別？

display:block
block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
block元素可以設置margin和padding屬性。
display:inline
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

48、如果設計中使用了非標準的字體，你該如何去實現？

@font-face
詳見：http://www.w3school.com.cn/css3/css3_font.asp

49、請羅列出你所知道的 display 屬性的全部值

常見的包括：
none、block、inline、inline-block、list-item、run-in、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption、inherit

50、請解釋 * { box-sizing: border-box; } 的作用, 并且說明使用它有什么好處？

大致就是說，在盒模型中，元素的高和寬包括了邊框和內邊距，詳見：
http://www.w3school.com.cn/cssref/pr_box-sizing.asp

51、其他問題

你會如何解決特定瀏覽器的樣式問題？
如何為有功能限制的瀏覽器提供網頁？
你會使用哪些技術和處理方法？
有哪些的隱藏內容的方法 (如果同時還要保證屏幕閱讀器可用呢)？
你用過柵格系統 (grid system) 嗎？如果使用過，你最喜歡哪種？
如何優化網頁的打印樣式？
請描述你曾經使用過的 CSS 預處理器的優缺點。
你在開發或生產環境中使用過哪些 CSS 框架？你覺得應該如何改善他們？
請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？
你有兼容 retina 屏幕的經歷嗎？如果有，在什么地方使用了何種技術？
請問為何要使用 translate() 而非 absolute positioning，或反之的理由？為什么？

總結

以上是生活随笔為你收集整理的css面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。