天中公優就業·浙江IT培訓的小U老師為大家帶來一些前端面試中，常問到的CSS基礎面試題，希望大家可以扎實基礎，應對各種面試。

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

標準盒子模型：寬度=內容的寬度(content)+ border + padding + margin

低版本IE盒子模型：寬度=內容寬度(content+border+padding)+ margin

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

inline(默認)–內聯

none–隱藏

block–塊顯示

table–表格顯示

list-item–項目列表

inline-block

3、position的值?

static(默認)：按照正常文檔流進行排列;

relative(相對定位)：不脫離文檔流，參考自身靜態位置通過 top, bottom, left, right 定位;

absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位;

fixed(固定定位)：所固定的參照對像是可視窗口。

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

5、請解釋一下CSS3的flexbox(彈性盒布局模型),以及適用場景?

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的;而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。

試用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持。

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

第一種真正的品字：

三塊高寬是確定的;

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

下面兩塊用float或者inline-block不換行;

用margin調整位置使他們居中。

第二種全屏的品字布局:

上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

7、CSS優化、提高性能的方法有哪些?

避免過度約束

避免后代選擇符

避免鏈式選擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復

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

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

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

8、瀏覽器是怎樣解析CSS選擇器的?

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點)，而從左向右的匹配規則的性能都浪費在了失敗的查找上面。

而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時(WebKit 中的「Attachment」過程)，瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果(Style Rules)來確定生成怎樣的 Render Tree。

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

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

10、 margin和padding分別適合什么場景使用?

何時使用margin：

需要在border外側添加空白

空白處不需要背景色

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

何時使用padding：

需要在border內側添加空白

空白處需要背景顏色

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

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

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

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

12、 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)

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

當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。

chrome中，使用collapse值和使用hidden沒有區別。

firefox，opera和IE，使用collapse值和使用display：none沒有什么區別。

14、display:none與visibility：hidden的區別?

display：none 不顯示對應的元素，在文檔布局中不再分配空間(回流+重繪)

visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間(重繪)

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

display屬性規定元素應該生成的框的類型;position屬性規定元素的定位類型;float屬性是一種布局方式，定義元素在哪個方向浮動。

類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

16、對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

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

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。

浮動帶來的問題：

父元素的高度無法被撐開，影響與父元素同級的元素

與浮動元素同級的非浮動元素(內聯元素)會跟隨其后

若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

清除浮動的方式：

父級div定義height

最后一個浮動元素后加空div標簽 并添加樣式clear:both。

包含浮動元素的父標簽添加樣式overflow為hidden或auto。

父級div定義zoom

18、上下margin重合的問題

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

例子：

.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; //此時已經觸發了BFC屬性。 }

19、box-sizing屬性?

用來控制元素的盒子模型的解析模式，默認為content-box

context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬

border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

20、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 比內聯優先級高

21、CSS優先級算法如何計算?

元素選擇符： 1

class選擇符： 10

id選擇符：100

元素標簽：1000

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

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

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

22、CSS3新增偽類有那些?

p:first-of-type 選擇屬于其父元素的首個元素

p:last-of-type 選擇屬于其父元素的最后元素

p:only-of-type 選擇屬于其父元素唯一的元素

p:only-child 選擇屬于其父元素的唯一子元素

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

:enabled :disabled 表單控件的禁用狀態。

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

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

自動變成display:block

24、移動端的布局用過媒體查詢嗎?

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。

里邊

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

么是HTML

大家知道平時上網瀏覽的頁面是怎么做出來的嗎？就是通過今天要給大家介紹的語言HTML來完成的。什么是HTML？超文本標記語言（HyperText Markup Language，簡稱為HTML）

• HyperText： 是指具有交互功能的文本，如：超鏈接，可以從當前頁面跳到另外一個頁面。超文本在現在的互聯網不僅僅指的的文本文件，還可以是視頻，音樂，圖片等
• Markup Language：通過特殊的符號表示特定的內容，如標題、段落、圖片、表格、超鏈接等。

HTML是一種編程語言，編程語言都需要寫到文件中，如何創建文件？可以創建一個文本文件，并命名為：home.html，其中home是文件名，文件擴展名為.html告知瀏覽器這個文件包含HTML，這樣瀏覽器才能正確的解釋HTML并顯示出來。

HTML的發展歷程

HTML最初于1989年由GERN的Tim Berners-Lee發明，至今已經有30多年的歷史了，在這30年的過程中，HTML經歷了幾次重大的版本更新：

HTML在剛剛誕生的時候只有幾個最基礎的標簽，做好的頁面也不好看，但是已經支持了超文本。

在1995年自HTML3誕生開始，漫長殘酷的瀏覽器戰爭也隨之而來，Netscape和Microsoft兩個瀏覽器廠商都在試圖爭霸世界，這場戰爭的受害者是web開發人員，每個瀏覽器公司都在不斷的增加自己的專用擴展包來試圖保證領先，所以web開發人員通常必須要寫兩個單獨的頁面來適應兩大廠商。

1997年基于HTML4的標準誕生，瀏覽器大戰結束了，來解救我們的是萬維網聯盟W3C，它的計劃是創建一個唯一的web標準，讓世界恢復平靜，W3C計劃把HTML的結構和表現分離成兩種語言：一種語言用于實現結構（HTML），一種語言用于表現（CSS），并且要求所有的瀏覽器廠商都采用這個標準。

1999年HTML4.01閃亮登場，成為接下來十年當中HTML的必備版本，因為幾乎所有的瀏覽器都采用了這個標準，讓我們web開發人員的日子也好過了一些，但是除了IE瀏覽器，所以開發人員針對IE瀏覽器總是要做一些額外的工作。

2000年一個新興的事物引起了我們的注意就是XML，它讓HTML開始心煩意亂，他們兩個終于不情愿的結合在了一起，就有了后來的XHTML，XHTML1.0就此誕生了。XHTML的標準更嚴格，所有的標簽必須由開始標簽和結束標簽組成。所以大部分開發人員很討厭XHTML對于HTML的靈活性更擁護，導致XHTML發展到2.0版本的時候甚至慘遭淘汰，所以這場婚姻的結局并不好。

到了2009年，XHTML很快被HTML5取代，因為HTML5延用了HTML4.01的大部分特性，還提供了很多適合web新發展的新特性，而這正是開發人員一直想要的，并且完全支持XHTML風格的代碼，所以HTML5成為大家公認的標準，并于2014年HTML5正式發布，曾經對標準不屑一顧的IE瀏覽器，自IE9瀏覽器開始也加入了全面支持HTML5的陣營。

現在很清楚了，HTML5對我們來說意味著什么？跟著我一起加入這個歡樂的世界，關注我，后面會繼續給大家介紹Web前端開發所需掌握的技能。