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

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

2沸久、 box-sizing屬性？

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

3威酒、 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

優(yōu)先級（就近原則）：!important > [ id > class > tag ] !important 比內(nèi)聯(lián)優(yōu)先級高

4葵孤、 CSS優(yōu)先級算法如何計算担钮？

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

• !important聲明的樣式優(yōu)先級最高，如果沖突再進行計算尤仍。

• 如果優(yōu)先級相同箫津，則選擇最后出現(xiàn)的樣式。

• 繼承得到的樣式的優(yōu)先級最低宰啦。

• 5 苏遥、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ù)選框被選中

6、如何居中div赡模？如何居中一個浮動元素田炭？如何讓絕對定位的div居中？

div

border: 1px solid red;margin: 0 auto; 
height: 50px;width: 80px;

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

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

絕對定位的左右居中：

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

7 漓柑、display有哪些值教硫？說明他們的作用?

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

8、 position的值欺缘？

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

9嫩絮、 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蜂怎，當瀏覽器的尺寸變化時會采用不同的屬性

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

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局杠步、對齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的幽歼；

而 inline 布局則是在水平方向來排列朵锣。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作甸私。
試用場景：彈性布局適合于移動前端開發(fā)诚些，在Android和ios上也完美支持。

11 皇型、用純CSS創(chuàng)建一個三角形的原理是什么诬烹？

首先，需要把元素的寬度弃鸦、高度設(shè)為0绞吁。
然后設(shè)置邊框樣式。

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

12 寡键、一個滿屏品字布局如何設(shè)計?

第一種真正的品字：

• 三塊高寬是確定的掀泳；

• 上面那塊用margin: 0 auto;居中；

• 下面兩塊用float或者inline-block不換行西轩；

• 用margin調(diào)整位置使他們居中。

第二種全屏的品字布局:

上面的div設(shè)置成100%脑沿，下面的div分別寬50%藕畔，然后使用float或者inline使其不換行。

13庄拇、 常見的兼容性問題注服？

• 不同瀏覽器的標簽?zāi)J的margin和padding不一樣。

*{margin:0;padding:0;}

• IE6雙邊距bug：塊屬性標簽float后措近，又有橫行的margin情況下溶弟，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性瞭郑。

• 漸進識別的方式辜御，從總體中逐漸排除局部。首先屈张，巧妙的使用“9”這一標記擒权，將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è)置較小高度標簽（一般小于10px）璧尸，在IE6劝贸，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度逗宁。

• IE下映九，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下瞎颗，只能使用getAttribute()獲取自定義屬性件甥。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

• Chrome 中文界面下默認會將小于 12px 的文本強制按照 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 {}

14倦逐、 為什么要初始化CSS樣式

因為瀏覽器的兼容問題譬正，不同瀏覽器對有些標簽的默認值是不同的，如果沒對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。

補充：

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

• absolute: 向上找最近的定位為absolute/relative的元素

• fixed: 它的containing block一律為根元素(html/body)

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

當一個元素的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)先級機制：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（默認）

• overflow的值不為visible（默認）

• 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標簽 并添加樣式clear:both抡谐。

• 包含浮動元素的父標簽添加樣式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è)備的顯示莉撇。

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

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

24 呢蛤、使用 CSS 預(yù)處理器嗎？

Less sass

25棍郎、 CSS優(yōu)化其障、提高性能的方法有哪些？

• 避免過度約束

• 避免后代選擇符

• 避免鏈式選擇符

• 使用緊湊的語法

• 避免不必要的命名空間

• 避免不必要的重復(fù)

• 最好使用表示語義的名字涂佃。一個好的類名應(yīng)該是描述他是什么而不是像什么

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

• 盡可能的精簡規(guī)則辜荠，你可以合并不同類里的重復(fù)規(guī)則

26 汽抚、瀏覽器是怎樣解析CSS選擇器的？

CSS選擇器的解析是從右向左解析的伯病。若從左向右的匹配造烁，發(fā)現(xiàn)不符合規(guī)則，需要進行回溯午笛，會損失很多性能惭蟋。

若從右向左匹配，先找到所有的最右節(jié)點药磺，對于每一個節(jié)點告组，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個分支的遍歷与涡。

兩種匹配規(guī)則的性能差別很大惹谐，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點）持偏，而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面。

而在 CSS 解析完畢后氨肌，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進行分析建立一棵 Render Tree鸿秆，最終用來進行繪圖。

在建立 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è)定是相對于容器的高度嗎寞秃？

當按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的偶惠，但是春寿，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等忽孽，當按百分比設(shè)定它們時绑改，依據(jù)的也是父容器的寬度谢床，而不是高度。

30厘线、 全屏滾動的原理是什么识腿？用到了CSS的哪些屬性？

• 原理：有點類似于輪播造壮，整體的元素一直排列下去渡讼，假設(shè)有5個需要展示的全屏頁面，那么高度是500%耳璧，只是展示100%成箫，剩下的可以通過transform進行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的進化，在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、讓頁面里的字體變清晰沽翔，變細用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窗轩、如果需要手動寫動畫，你認為最小時間間隔是多久座咆，為什么痢艺？

多數(shù)顯示器默認頻率是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使用負值

• 使用font-size時候 解決：font-size:0、letter-spacing赏酥、word-spacing

41喳整、 有一個高度自適應(yīng)的div，里面有兩個div裸扶，一個高度100px框都，希望另一個填滿剩下的高度,應(yīng)該怎么做？

外層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標簽寫在body后與body前有什么區(qū)別昙啄？

頁面加載自上而下 當然是先加載樣式穆役。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標簽）會導(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 的組合進行背景定位刊橘。利用CSS Sprites能很好地減少網(wǎng)頁的http請求鄙才，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)促绵。

原文鏈接