css 面試題匯總

css參考手冊
css參考手冊
50道CSS基礎(chǔ)面試題（附答案）2018-02-22
前端開發(fā)面試題之 CSS
前端開發(fā)面試題總結(jié)之——CSS3 2017-03-02
CSS 面試題解答 2017-02-25
BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇

CSS規(guī)范規(guī)定驰坊，每個元素都有display屬性提前，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”浮梢，是“行內(nèi)”元素黍氮。

（1）行內(nèi)元素有：a( 錨點) ,b(粗體(不推薦)) ,span(常用內(nèi)聯(lián)容器唐含，定義文本內(nèi)區(qū)塊) img(圖片) input(輸入框) select(項目選擇) strong(粗體強(qiáng)調(diào)) label(表格標(biāo)簽) cite (引用)code(計算機(jī)代碼)
（2）塊級元素有：div ul(無序列表) ol(有序列表) dl(定義列表) table(表格)form(表單) h1 (一級標(biāo)題))p(段落)pre(預(yù)格式化)
（3）常見的空元素：

1 CSS的盒子模型

1）標(biāo)準(zhǔn)盒模型，怪異盒模型

標(biāo)準(zhǔn)盒子模型：寬度 = 內(nèi)容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度 = 內(nèi)容寬度（content+padding+border）+ margin

2）盒模型轉(zhuǎn)換：
box-sizing: border-box;
  (IE傳統(tǒng)盒子模型,設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬)
box-sizing: content-box;
  (W3C的標(biāo)準(zhǔn)盒子模型,設(shè)置元素的 height/width 屬性指的是content部分的高/寬)

2 CSS選擇器

1）CSS選擇符有哪些

  通配符選擇器（*）
  id選擇器（#classId）
  類選擇器（.className）
  標(biāo)簽選擇器（div沫浆，h1捷枯，p，span专执，table）
  相鄰選擇器（h1 + p）
  子選擇器（ul > li）
  后代選擇器（li a）
  屬性選擇器（a[rel = "external"]）
  偽類選擇器（a:hover淮捆，li:nth-child）

2）繼承

  可繼承：font-size，font-family，color
  不可繼承：border争剿，padding已艰，margin，width蚕苇，height

3）優(yōu)先級權(quán)重計算
  
  important的權(quán)重為     1,0,0,0
  ID的權(quán)重為            0,1,0,0
  類的權(quán)重為             0,0,1,0
  偽類的權(quán)重為           0,0,1,0
  屬性的權(quán)重為           0,0,1,0
  標(biāo)簽的權(quán)重為           0,0,0,1
  偽對象的權(quán)重為         0,0,0,1
  通配符的權(quán)重為         0,0,0,0

  就近原則哩掺，同權(quán)重情況下以樣式定義最近者為準(zhǔn)；
  載入樣式以最后載入的定位為準(zhǔn)涩笤；
  優(yōu)先級：
      //!important > id > class > tag
      //important 比 內(nèi)聯(lián)優(yōu)先級高
      important > 內(nèi)聯(lián)樣式 > ID > 類 | 偽類 | 屬性選擇 > 標(biāo)簽 | 偽元素 > 繼承 > 通配符

4）CSS3新增偽類
  p:first-of-type 選擇屬于其父元素的首個元素
  p:last-of-type 選擇屬于其父元素的最后元素
  p:only-of-type 選擇屬于其父元素唯一的元素
  p:only-child 選擇屬于其父元素的唯一子元素
  p:nth-child(2) 選擇屬于其父元素的第二個子元素
  :enabled :disabled 表單控件的禁用狀態(tài)嚼吞。
  :checked 單選框或復(fù)選框被選中
5) CSS 偽對象選擇符

CSS 偽對象選擇符

3 如何居中div

1) 文本流中（水平居中）
<div style="margin: 0 auto;...">...</div>

2）浮動元素（水平&垂直居中）
  //父級以上元素不能設(shè)置transform屬性
  border: 1px solid red;
  float: left;
  position: absolute;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -100px;

3）絕對定位（水平居中）
  border: 1px solid black;
  position: absolute;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;

4）flex布局（水平&垂直居中）
  display: flex;
  justify-content: center;
  align-items: center;

4 flex, grid, columns

flex
緊跟在 -webkit-, -ms- 或 -moz- 后的數(shù)字為支持該前綴屬性的第一個版本渤闷。

columns
columns：[ column-width ] || [ column-count ]
!columns

1) CSS3 flexbox（彈性盒布局模型）,以及適用場景
  該布局模型的目的是提供一種更加高效的方式來對容器中的條目進(jìn)行布局疾瓮、對齊和分配空間。
  在傳統(tǒng)的布局方式中飒箭，block 布局是把塊在垂直方向從上到下依次排列的狼电；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制弦蹂，可以由開發(fā)人員自由操作肩碟。
  試用場景：彈性布局適合于移動前端開發(fā)，在Android和ios上也完美支持凸椿。

2) CSS3 Grid布局
  是一個基于網(wǎng)格的二維布局系統(tǒng)腾务，目的是用來優(yōu)化用戶界面設(shè)計

3) CSS3 columns(多列布局)
  CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。
  這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示削饵。我們知道，當(dāng)一行文字太長時未巫，
  讀者讀起來就比較費勁窿撬，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端叙凡、
  然后換到下一行的行首劈伴，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去跛璧。
  所以严里，為了最大效率的使用大屏幕顯示器，頁面設(shè)計中需要限制文本的寬度追城，讓文本按多列呈現(xiàn)刹碾，
  就像報紙上的新聞排版一樣。

CSS：Grid 布局
CSS3多列布局(columns)的用法
Flex 布局

5 display

  inline（默認(rèn)）   --內(nèi)聯(lián)
  none            --隱藏
  block           --塊顯示
  table           --表格顯示
  list-item       --項目列表
  inline-block    --內(nèi)聯(lián)塊

6 position

  absolute: 生成絕對定位的元素座柱，相對于 static 定位以外的第一個父元素進(jìn)行定位迷帜。
  fixed （老IE不支持）: 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位色洞。
  relative: 生成相對定位的元素戏锹，相對于其正常位置進(jìn)行定位。
  static: 默認(rèn)值火诸。沒有定位锦针，元素出現(xiàn)在正常的流中 忽略 top, bottom, left, right z-index 聲明）。
  inherit: 規(guī)定從父元素繼承 position 屬性的值置蜀。

7 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 屬性用于創(chuàng)建圓角
  邊框圖片：border-image: url(border.png) 30 30 round
  盒陰影：box-shadow: 10px 10px 5px #888888
  媒體查詢：定義兩套css媚污，當(dāng)瀏覽器的尺寸變化時會采用不同的屬性
  CSS3新增偽類選擇器

8 用純CSS創(chuàng)建一個三角形的原理是什么

采用的是均分原理
非常有意思的是盒子都是一個矩形或正方形，從形狀的中心廷雅，向4個角上下左右劃分4個部

代碼的實現(xiàn)

  第一步 保證元素是塊級元素
  第二步 設(shè)置元素的邊框
  第三步 不需要顯示的邊框使用透明色

  .square{  
       width:0;  
       height:0;  
       margin:0 auto;  
       border:6px solid transparent;  
       border-top: 6px solid red;  
   }  
  第二種寫法：
  .square{  
       width:0;  
       height:0;  
       margin:0 auto;  
       border-width:6px;
       border-color:red transparent transparent transparent;
       border-style:solid dashed dashed dashed;//為了兼容IE6耗美，把沒有的邊框都設(shè)置為虛線
   }

9 一個滿屏品字布局如何設(shè)計

第一種真正的品字：
  三塊高寬是確定的；
  上面那塊用margin: 0 auto;居中航缀；
  下面兩塊用float或者inline-block不換行商架；
  用margin調(diào)整位置使他們居中。

第二種全屏的品字布局:
  上面的div設(shè)置成100%芥玉，下面的div分別寬50%蛇摸，然后使用float或者inline使其不換行。

10 常見的兼容性問題

//postcss

不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣灿巧。
*{margin:0;padding:0;}

IE6雙邊距bug：塊屬性標(biāo)簽float后赶袄，又有橫行的margin情況下，
在IE6顯示margin比設(shè)置的大抠藕。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性饿肺。
漸進(jìn)識別的方式，從總體中逐漸排除局部盾似。首先敬辣，巧妙的使用“9”這一標(biāo)記，
將IE瀏覽器從所有情況中分離出來。接著溉跃，再次使用“+”將IE8和IE7村刨、IE6分離開來，這樣IE8已經(jīng)獨立識別撰茎。

{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6嵌牺、7、8識別*/
+background-color:#a200ff;/*IE6乾吻、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
設(shè)置較小高度標(biāo)簽（一般小于10px）髓梅，在IE6，IE7中高度超出自己設(shè)置高度绎签。
hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度枯饿。
IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性诡必；
Firefox下奢方，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性爸舒。
Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決蟋字。
超鏈接訪問過后hover樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不再具有hover和active了扭勉。
解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

11 link和@import的區(qū)別鹊奖？

（1）link屬于XHTML標(biāo)簽，而@import是CSS提供的涂炎。
（2）頁面被加載時忠聚，link會同時被加載，
     而@import引用的CSS會等到頁面被加載完再加載唱捣。
（3）import只在IE 5以上才能識別两蟀，而link是XHTML標(biāo)簽，無兼容問題震缭。
（4）link方式的樣式權(quán)重高于@import的權(quán)重赂毯。
（5）使用dom控制樣式時的差別。當(dāng)使用javascript控制dom去改變樣式的時候拣宰，
     只能使用link標(biāo)簽党涕，因為@import不是dom可以控制的。

12 什么是CSS reset

http://meyerweb.com/eric/tools/css/reset/reset200802.css

在不同瀏覽器之間巡社，默認(rèn)樣式有著諸多差異和問題遣鼓，而為了在不同瀏覽器之間具備相同的視覺效果，開發(fā)人員往往會在樣式表文件中引入一段CSS代碼重贺，如http://meyerweb.com/eric/tools/css/reset/reset200802.css，我們把這個過程叫做CSS reset。

當(dāng)然气笙，好處就和他的作用一樣次企。但是我們應(yīng)該認(rèn)識其缺點，很多如排版標(biāo)簽潜圃，列表標(biāo)簽等這樣的語義元素就失去了他的意義缸棵，在沒有為其設(shè)置其他樣式時，視覺上和其他內(nèi)容也沒了區(qū)別谭期；如果頁面內(nèi)有第三方內(nèi)容嵌入堵第，則會影響第三方內(nèi)容的視覺效果；而很多開發(fā)人員更是直接百度一段代碼隧出，復(fù)制到自己的項目中踏志，我認(rèn)為這樣的開發(fā)是不負(fù)責(zé)任的。

個人認(rèn)為在項目中可根據(jù)需求對一些全局樣式進(jìn)行設(shè)置胀瞪，如字體针余，字號等，而對于元素的樣式設(shè)置應(yīng)該通過選擇器精確的設(shè)置凄诞。在項目中圆雁，本人一般都會建立一個基礎(chǔ)的樣式文件，里面編寫通用的類選擇器帆谍，在需要的元素上添加類名達(dá)到重置的效果伪朽。如


.no-padding {padding: 0;}
.only-content {padding: 0;margin: 0;border: 0}

<body class="only-content user-difined-className"></body>

14 為什么要初始化CSS樣式

  因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的汛蝙，
  如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異烈涮。

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

無論屬于哪種患雇，都要先找到其祖先元素中最近的 position 值不為 static 的元素跃脊，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 
inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形苛吱；
否則,則由這個祖先元素的 padding box 構(gòu)成酪术。
如果都找不到，則為 initial containing block翠储。

補(bǔ)充：

static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)

16 CSS里的visibility屬性有個collapse屬性值绘雁？在不同瀏覽器下以后什么區(qū)別？

當(dāng)一個元素的visibility屬性被設(shè)置成collapse值后援所，對于一般的元素庐舟，它的表現(xiàn)跟hidden是一樣的。

chrome中住拭，使用collapse值和使用hidden沒有區(qū)別挪略。
firefox历帚，opera和IE，使用collapse值和使用display：none沒有什么區(qū)別杠娱。

17 display:none與visibility：hidden的區(qū)別挽牢？

display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應(yīng)元素摊求，在文檔布局中仍保留原來的空間（重繪）

18 position跟display禽拔、overflow、float這些特性相互疊加后會怎么樣室叉？

display屬性規(guī)定元素應(yīng)該生成的框的類型睹栖；position屬性規(guī)定元素的定位類型；
float屬性是一種布局方式茧痕，定義元素在哪個方向浮動野来。
類似于優(yōu)先級機(jī)制：position：absolute/fixed優(yōu)先級最高，有他們在時凿渊，
float不起作用梁只，display值需要調(diào)整。float 或者absolute定位的元素埃脏，只能是塊元素或表格搪锣。

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

BFC規(guī)定了內(nèi)部的Block Box如何布局彩掐。
定位方案：

內(nèi)部的Box會在垂直方向上一個接一個放置构舟。
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊堵幽。
每個元素的margin box 的左邊狗超，與包含塊border box的左邊相接觸。
BFC的區(qū)域不會與float box重疊朴下。
BFC是頁面上的一個隔離的獨立容器努咐，容器里面的子元素不會影響到外面的元素。
計算BFC的高度時殴胧，浮動元素也會參與計算渗稍。
滿足下列條件之一就可觸發(fā)BFC

根元素，即html
float的值不為none（默認(rèn)）
overflow的值不為visible（默認(rèn)）
display的值為inline-block团滥、table-cell竿屹、table-caption
position的值為absolute或fixed

20 為什么會出現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式灸姊？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留拱燃。由于浮動元素不在文檔流中，
所以文檔流的塊框表現(xiàn)得就像浮動框不存在一樣力惯。浮動元素會漂浮在文檔流的塊框上碗誉。
浮動帶來的問題：

父元素的高度無法被撐開召嘶，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動哮缺，否則會影響頁面顯示的結(jié)構(gòu)苍蔬。
清除浮動的方式：

父級div定義height
最后一個浮動元素后加空div標(biāo)簽 并添加樣式clear:both。
包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto蝴蜓。
父級div定義zoom

21 上下margin重合的問題

在重合元素外包裹一層容器，并觸發(fā)該容器生成一個BFC俺猿。
例子：

<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{
            /*盒子main的外面包一個div茎匠，通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC，以此來阻止margin重疊*/
            overflow: hidden;  //此時已經(jīng)觸發(fā)了BFC屬性押袍。
        }

22設(shè)置元素浮動后诵冒，該元素的display值是多少？

自動變成display:block

23 移動端的布局用過媒體查詢嗎谊惭？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css汽馋，適應(yīng)相應(yīng)的設(shè)備的顯示。

<head>里邊
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">

CSS : @media only screen and (max-device-width:480px) {/css樣式/}

24 使用 CSS 預(yù)處理器嗎圈盔？

Less sass

25 CSS優(yōu)化豹芯、提高性能的方法有哪些？

避免過度約束
避免后代選擇符
避免鏈?zhǔn)竭x擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重復(fù)
最好使用表示語義的名字驱敲。一個好的類名應(yīng)該是描述他是什么而不是像什么
避免铁蹈！important，可以選擇其他選擇器
盡可能的精簡規(guī)則众眨，你可以合并不同類里的重復(fù)規(guī)則

26 瀏覽器是怎樣解析CSS選擇器的握牧？

CSS選擇器的解析是從右向左解析的。若從左向右的匹配娩梨，發(fā)現(xiàn)不符合規(guī)則沿腰，
需要進(jìn)行回溯，會損失很多性能狈定。若從右向左匹配颂龙，先找到所有的最右節(jié)點，
對于每一個節(jié)點掸冤，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則厘托，
則結(jié)束這個分支的遍歷。兩種匹配規(guī)則的性能差別很大稿湿，
是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點）铅匹，
而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后饺藤，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree包斑，
最終用來進(jìn)行繪圖流礁。在建立 Render Tree 時（WebKit 中的「Attachment」過程），
瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree罗丰。

27 在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體神帅？為什么呢？

使用偶數(shù)字體萌抵。偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系找御。
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14绍填、16 px 這三個大小的點陣霎桅，
而 13、15讨永、17 px時用的是小一號的點滔驶。（即每個字占的空間大了 1 px，但點陣沒變）卿闹，
于是略顯稀疏揭糕。

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

何時使用margin：

需要在border外側(cè)添加空白
空白處不需要背景色
上下相連的兩個盒子之間的空白锻霎，需要相互抵消時著角。
何時使用padding：

需要在border內(nèi)側(cè)添加空白
空白處需要背景顏色
上下相連的兩個盒子的空白，希望為兩者之和量窘。
兼容性的問題：在IE5 IE6中雇寇，為float的盒子指定margin時，
左側(cè)的margin可能會變成兩倍的寬度蚌铜。通過改變padding或者指定盒子的display：inline解決锨侯。

29 元素豎向的百分比設(shè)定是相對于容器的高度嗎？

當(dāng)按百分比設(shè)定一個元素的寬度時冬殃，它是相對于父容器的寬度計算的囚痴，
但是，對于一些表示豎向距離的屬性审葬，例如 padding-top , padding-bottom ,
 margin-top , margin-bottom 等深滚，當(dāng)按百分比設(shè)定它們時，依據(jù)的也是父容器的寬度涣觉，而不是高度痴荐。

30 全屏滾動的原理是什么？用到了CSS的哪些屬性官册？

原理：有點類似于輪播生兆，整體的元素一直排列下去，假設(shè)有5個需要展示的全屏頁面膝宁，
那么高度是500%鸦难，只是展示100%根吁，剩下的可以通過transform進(jìn)行y軸定位，也可以通過margin-top實現(xiàn)
overflow：hidden合蔽；transition：all 1000ms ease击敌；

31 什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么拴事？如何兼容低版本的IE沃斤？

響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，
而不是為每一個終端做一個特定的版本刃宵。
基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理轰枝。
頁面頭部必須有meta聲明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. 
maximum-scale=1,user-scalable=no”>

32 視差滾動效果组去？

視差滾動（Parallax Scrolling）通過在網(wǎng)頁向下滾動的時候，
控制背景的移動速度比前景的移動速度慢來創(chuàng)建出令人驚嘆的3D效果步淹。

CSS3實現(xiàn)
優(yōu)點：開發(fā)時間短从隆、性能和開發(fā)效率比較好，缺點是不能兼容到低版本的瀏覽器
jQuery實現(xiàn)
通過控制不同層滾動速度缭裆，計算每一層的時間键闺，控制滾動效果。
優(yōu)點：能兼容到各個版本的澈驼，效果可控性好
缺點：開發(fā)起來對制作者要求高
插件實現(xiàn)方式
例如：parallax-scrolling辛燥，兼容性十分好

33 ::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用

單冒號(:)用于CSS3偽類缝其，雙冒號(::)用于CSS3偽元素挎塌。
::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素内边。并不存在于dom之中榴都，只存在在頁面之中。
:before 和 :after 這兩個偽元素漠其，是在CSS2.1里新出現(xiàn)的嘴高。
起初，偽元素的前綴使用的是單冒號語法和屎，但隨著Web的進(jìn)化拴驮，
在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號柴信，
成為::before ::after

34 你對line-height是如何理解的套啤？

行高是指一行文字的高度，具體說是兩行文字間基線的距離颠印。
CSS中起高度作用的是height和line-height纲岭，沒有定義height屬性抹竹，
最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中止潮，
其實也可以把height刪除窃判。
多行文本垂直居中：需要設(shè)置display屬性為inline-block。

35 怎么讓Chrome支持小于12px 的文字喇闸？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36 讓頁面里的字體變清晰袄琳，變細(xì)用CSS怎么做？

-webkit-font-smoothing在window系統(tǒng)下沒有起作用燃乍，
但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的唆樊，灰度平滑。

37 position:fixed;在android下無效怎么處理刻蟹？

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38 如果需要手動寫動畫逗旁，你認(rèn)為最小時間間隔是多久错邦，為什么例诀？

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次激况，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms英古。

39 li與li之間有看不見的空白間隔是什么原因引起的淀衣？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響召调，因為空格也屬于字符,
這些空白也會被應(yīng)用樣式膨桥，占據(jù)空間，所以會有間隔唠叛，把字符大小設(shè)為0只嚣，就沒有空格了。
解決方法：

可以將<li>代碼全部寫在一排
浮動li中float：left
在ul中用font-size：0（谷歌不支持）艺沼；可以使用letter-space：-3px

40 display:inline-block 什么時候會顯示間隙介牙？

有空格時候會有間隙 解決：移除空格
margin正值的時候 解決：margin使用負(fù)值
使用font-size時候 解決：font-size:0、letter-spacing澳厢、word-spacing

41 有一個高度自適應(yīng)的div环础，里面有兩個div，一個高度100px剩拢，希望另一個填滿剩下的高度

外層div使用position：relative线得；
高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

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

png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）
是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點是：壓縮比高角雷，色彩好祸穷。 
大多數(shù)地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法勺三，是一種破壞性的壓縮雷滚，
在色調(diào)及顏色平滑變化做的不錯。在www上吗坚，被用來儲存和傳輸照片的格式祈远。
gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像商源〕捣荩可以實現(xiàn)動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3牡彻，
大小比png小了45%扫沼。缺點是壓縮的時間更久了，兼容性不好庄吼，目前谷歌和opera支持充甚。

43 style標(biāo)簽寫在body后與body前有什么區(qū)別？

頁面加載自上而下 當(dāng)然是先加載樣式霸褒。
寫在body標(biāo)簽后由于瀏覽器以逐行方式對HTML文檔進(jìn)行解析，
當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會導(dǎo)致瀏覽器停止之前的渲染盈蛮，
等待加載且解析樣式表完成之后重新渲染废菱，在windows的IE下可能會出現(xiàn)FOUC現(xiàn)象
（即樣式失效導(dǎo)致的頁面閃爍問題）

44 CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理?

參數(shù)是scroll時候，必會出現(xiàn)滾動條抖誉。
參數(shù)是auto時候殊轴，子元素內(nèi)容大于父元素時出現(xiàn)滾動條。
參數(shù)是visible時候袒炉，溢出的內(nèi)容出現(xiàn)在父元素之外旁理。
參數(shù)是hidden時候，溢出隱藏我磁。

45 闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去孽文，然后利用CSS的 
background-image，background- repeat夺艰，background-position 
的組合進(jìn)行背景定位芋哭。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，
從而大大的提高頁面的性能郁副；CSS Sprites能減少圖片的字節(jié)减牺。

HTML

每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎拔疚？
div+css的布局較table布局有什么優(yōu)點肥隆？
strong與em的異同？
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎?
為什么利用多個域名來存儲網(wǎng)站資源會更有效稚失？
請描述一下cookies栋艳，sessionStorage和localStorage的區(qū)別？
簡述一下src與href的區(qū)別墩虹。
你如何理解HTML結(jié)構(gòu)的語義化嘱巾？

CSS

有哪項方式可以對一個DOM設(shè)置它的CSS樣式？
CSS都有哪些選擇器诫钓？
CSS選擇器的優(yōu)先級是怎么樣定義的旬昭？
CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內(nèi)菌湃？
超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么问拘？如何解決？
行內(nèi)元素和塊級元素的具體區(qū)別是什么惧所？行內(nèi)元素的padding和margin可設(shè)置嗎骤坐？
css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
px和em的區(qū)別下愈。
描述一個”reset”的CSS文件并如何使用它纽绍。知道normalize.css嗎？你了解他們的不同之處势似？