2019 CSS經典面試題（史上最全，持續更新中...）

時間 2019-11-07

標籤 css 經典面試史上持續更新欄目 CSS 简体版

原文原文鏈接

這些是我本身在學習過程當中總結的一些知識點，本篇文章我將以面試題的形式分享給你們，但願對你們有所幫助，本文篇幅較長，您若認真看完，而且反覆閱讀，我相信對您的學習或者是面試，都會有必定幫助，同時但願你們批評指正！

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

盒子模型就是元素在網頁中的實際佔位，有兩種：標準盒子模型和IE盒子模型javascript

標準(W3C)盒子模型：內容content+填充padding+邊框border+邊界margincss

寬高指的是 content 的寬高html

低版本IE盒子模型：內容（content+padding+border）+ 邊界margin，前端

寬高指的是 content+padding+border 部分的寬高java

問題的拓展：

CSS 如何設置這兩種模型？

box-sizing : content-box  
box-sizing : border-box複製代碼

JS 如何設置獲取盒模型對應的寬和高？android

dom.style.width/height;//設置獲取的是內聯樣式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//適用場所：計算一個元素的絕對位置複製代碼

實例題（根據盒模型解釋邊距重疊）？ios

該例子是父子邊距重疊，還有兄弟元素的邊距重疊git

<style>        
    html *{            
        padding: 0;            
        margin: 0;        
    }        
    #sec{ 
        background: #f00; 
        overflow: hidden; //建立了一個BFC，塊級格式化上下文   
    }        
    .child{            
        height: 100px;            
        margin-top: 10px;            
        background: yellow;        
    }    
</style>
<section id="sec">        
    <article class="child"></article>    
</section>複製代碼

BFC（邊距重疊解決方案）？github

2. box-sizing屬性？

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

3. 對 BFC 規範(塊級格式化上下文：block formatting context)的理解？

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

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

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

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

更多關於 BFC 的介紹，請看個人文章 BFC 是什麼？有什麼用？

4. CSS選擇器有哪些？哪些屬性能夠繼承？CSS優先級算法如何計算？

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，dt，dd；

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

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

優先級算法計算

優先級就近原則，同權重狀況下樣式定義最近者爲準

!important>id >class>tag

important比內聯優先級高

元素選擇符的權值：元素標籤（派生選擇器）：1，class選擇符：10，id選擇符：100，內聯樣式權值最大，爲1000

!important聲明的樣式優先級最高，若是衝突再進行計算。
若是優先級相同，則選擇最後出現的樣式。
繼承獲得的樣式的優先級最低。

5. CSS3新增僞類有那些?

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

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

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

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

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

:enabled

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

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

:before在元素以前添加內容，也能夠用來作清除浮動

:after在元素以後添加內容

6. 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？如何居中一個img（position定位）

水平居中div：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;複製代碼

水平垂直居中一個浮動元素（position定位）

第一種：未知元素寬高

<div class="outer">
    <span>我想居中顯示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
</style>複製代碼

第二種：已知元素寬高的

<div class="outer">
    <span>我想居中顯示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        width:150px;
        height:50px;
        top:50%;
        left:50%;
        margin:-25px 0px 0px -75px;
    }
</style>複製代碼

如何垂直居中一個img（display : table-cell 或者 position定位）

<div class="outer">        
    <img src="nz.jpg" alt="">    
</div>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc; 
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>複製代碼

絕對定位的div水平垂直居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;複製代碼

還有更加優雅的居中方式就是用 flex佈局，點擊查看個人文章掌握flex佈局，這篇文章就夠了

更多的居中問題，點擊查看個人文章 div居中的幾種方法

7. display 有哪些值？說明他們的做用?

值	描述
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
none	此元素不會被顯示（隱藏）。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。
table	此元素會做爲塊級表格來顯示（相似table），表格先後帶有換行符

8. position 的值？

值	描述
absolute	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成固定定位的元素，相對於瀏覽器窗口進行定位。（老IE不支持）元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位，不脫離文檔流。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出如今正常的文檔流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

css 定位還有一個新增屬性，粘性定位 sticky，它主要用在對 scroll 事件的監聽上；

粘性定位能夠被認爲是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。例如：

#one { position: sticky; top: 10px; }複製代碼

在 viewport 視口滾動到元素 top 距離小於 10px 以前，元素爲相對定位。以後，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值如下。

更多關於 sticky 的介紹，請點擊查看粘性定位介紹

9. CSS3有哪些新特性？

新增各類 CSS 選擇器 :not(p) 選擇每一個非p的元素； p:empty 選擇每一個沒有任何子級的p元素（包括文本節點）

邊框（Borders）：

div{ 
    border:2px solid; 
    border-radius:25px; //用於設置圓角
    box-shadow: 10px 10px 5px #888888; //水平陰影 垂直陰影 模糊距離 陰影顏色
    border-image:url(border.png) 30 30 round;// 設置全部邊框圖像的速記屬性。
}複製代碼

背景 background-clip（規定背景圖的繪製區域），background-origin，background-size

div{ 
    background:url(img_flwr.gif); 
    background-repeat:no-repeat; 
    background-size:100% 100%; //規定背景圖的尺寸
    background-origin:content-box;//規定背景圖的定位區域
} 
多背景 
body{ 
    background-image:url(img_flwr.gif),url(img_tree.gif); 
}複製代碼

線性漸變（Linear Gradients）向下/向上/向左/向右/對角方向

background: linear-gradient(direction, color-stop1, color-stop2, ...);複製代碼

文本效果陰影text-shadow，textwrap，word-break，word-wrap；
2D 轉換 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D轉換 perspective()；transform是向元素應用 2D 或者 3D 轉換；
過渡 transition
動畫
多列布局 （multi-column layout）
盒模型
flex 佈局
多媒體查詢 定義兩套css，當瀏覽器的尺寸變化時會採用不一樣的屬性

更多 CSS3 和 HTML5的新特性，請點擊 CSS3 和 HTML5 新特性一覽

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

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

更多關於 flex 佈局，請點擊查看個人文章你真的瞭解 flex 佈局嗎？

11. 用純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 #ff0000;複製代碼

12. 一個滿屏品字佈局如何設計?

第一種真正的品字：

三塊高寬是肯定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。

第二種全屏的品字佈局:
上面的div設置成100%，下面的div分別寬50%，而後使用float或者inline使其不換行。

13. 常見的兼容性問題？

不一樣瀏覽器的標籤默認的margin和padding不同。解決辦法是加一個全局的
*{margin:0;padding:0;} 來統一；
IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大。hack：display:inline; 將其轉化爲行內屬性。漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
```
{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9; /*IE六、七、8識別*/
+background-color:#a200ff;/*IE六、7識別*/
_background-color:#1e0bd1;/*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 :
```
a:link {} 
a:visited {} 
a:hover {} 
a:active {}複製代碼
```
IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

14. 寫出幾種IE6 BUG的解決方法

1. 雙邊距BUG float引發的使用display

2. 3像素問題使用float引發的使用dislpay:inline -3px

3. 超連接hover 點擊後失效使用正確的書寫順序 link visited hover active

4. Ie z-index問題給父級添加position:relative

5. Png 透明使用js代碼改

6. Min-height 最小高度 !Important 解決’

7. select 在ie6下遮蓋使用iframe嵌套

8. 爲何沒有辦法定義1px左右的寬度容器(IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px)

9. ie 6 不支持!important

15. 爲何要初始化 CSS 樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

16. absolute 的 containing block(容器塊)計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：

若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
不然,則由這個祖先元素的 padding box 構成。

若是都找不到，則爲 initial containing block。

補充：

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

2. absolute: 向上找最近的定位爲absolute/relative的元素

3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

17. CSS裏的 visibility 屬性有個 collapse 屬性值是幹嘛用的？在不一樣瀏覽器下之後什麼區別？

當一個元素的 visibility 屬性被設置成 collapse 值後，對於通常的元素，它的表現跟 hidden 是同樣的。但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟 display: none 同樣，也就是說，它們佔用的空間也會釋放。

在谷歌瀏覽器裏，使用 collapse 值和使用 hidden 值沒有什麼區別。

在火狐瀏覽器、Opera和IE11裏，使用 collapse 值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。

18. display:none 與 visibility:hidden 的區別是什麼？

display : none 隱藏對應的元素，在文檔佈局中再也不分配空間（迴流+重繪）

visibility:hideen 隱藏對應的元素，在文檔佈局中仍保留原來的空間（重繪）

使用 CSS display:none 屬性後，HTML 元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用 visibility:hidden 屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

19. position 跟 display、overflow、float 這些特性相互疊加後會怎麼樣？

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

20. 爲何會出現浮動? 何時須要清除浮動？清除浮動有哪些方式？優缺點是什麼？你認爲最好的是哪種？爲何？

出現浮動的緣由：

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。在CSS規範中，浮動定位不屬於正常的頁面流，而是獨立定位的，因此文檔流的塊框表現得就像浮動框不存在同樣。浮動元素會漂浮在文檔流的塊框上。

關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框能夠左右移動，直到它的外邊緣遇到包含框或者另外一個浮動框的邊緣，因此才說浮動定位不屬於正常的頁面流。文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。因此，只含有浮動元素的父容器在顯示時不須要考慮子元素的位置，就形成顯示父容器像空容器同樣。

浮動帶來的問題：

父元素的高度沒法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。

清除浮動的方式：

父級div定義height
最後一個浮動元素後加空 div 標籤並添加樣式 clear:both。（理論上能清除任何標籤，增長無心義的標籤）
包含浮動元素的父標籤添加樣式 overflow 爲 hidden 或 auto。
父級 div 定義 zoom（空標籤元素清除浮動而不得不增長無心義代碼的弊端，使用zoom:1用於兼容IE）
用after僞元素清除浮動（用於非IE瀏覽器）

1、父級div定義height

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題

優勢：簡單，代碼少，容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題

建議：不推薦使用，只建議高度固定的佈局時使用

2、結尾處加空 div 標籤 clear:both

原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度

優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很不爽

建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法

3、父級 div 定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優勢：簡單，代碼少，瀏覽器支持好

缺點：不能和position配合使用，由於超出的尺寸的會被隱藏

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

4、父級div定義僞類 :after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多，很多初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持

建議：推薦使用，建議定義公共類，以減小CSS代碼

(1) 在子元素後添加一個空div div{clear:both;}

(2) 在父元素中{overflow:hidden|auto;zoom:1}

(3) :after僞選擇符，在父容器的尾部自動建立一個子元素

.clearfix:after {
    content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
    zoom: 1;
}複製代碼

"clearfix"是父容器的class名稱，"content:"020";"是在父容器的結尾處放一個空白符，

"height: 0;"是讓這個這個空白字符不顯示出來，"display: block; clear: both;"是確保這個空白字符是非浮動的獨立區塊。:after選擇符IE 6不支持,添加一條IE 6的獨有命令"zoom:1;"就好了.

21. 上下 margin 重合的問題

在重合元素外包裹一層容器，並觸發該容器生成一個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;  //此時已經觸發了BFC屬性。
        }
複製代碼

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

自動變成display:block

23. 移動端的佈局用過媒體查詢嗎？

經過媒體查詢能夠爲不一樣大小和尺寸的媒體定義不一樣的css，適應相應的設備的顯示。

<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 預處理器 / 後處理器？你們爲何要使用他們？

預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

CSS 預處理器爲 CSS 增長一些編程的特性，無需考慮瀏覽器的兼容性問題」，例如你能夠在 CSS 中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

其它 CSS 預處理器語言：

Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

爲何要使用它們？

結構清晰，便於擴展。

能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

能夠輕鬆實現多重繼承。

徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

25. CSS優化、提升性能的方法有哪些？

避免過分約束
避免後代選擇符
避免鏈式選擇符
使用緊湊的語法
避免沒必要要的命名空間
避免沒必要要的重複
最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
避免！important，能夠選擇其餘選擇器
儘量的精簡規則，你能夠合併不一樣類裏的重複規則
修復解析錯誤
避免使用多類選擇符
移除空的css規則
正確使用display的屬性：因爲display的做用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。
display:inline後不該該再使用width、height、margin、padding以及float。
display:inline-block後不該該再使用float。
display:block後不該該再使用vertical-align。
display:table-*後不該該再使用margin或者float。
不濫用浮動：雖然浮動不可避免，但不能否認不少css bug是因爲浮動而引發。
不濫用web字體
對於中文網站來講Web Fonts可能很陌生，國外卻很流行。web fonts一般體積龐大，並且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
不聲明過多的font-size：這是設計層面的問題，設計精良的頁面不會有過多的font-size聲明。
不在選擇符中使用ID標識符，主要考慮到樣式重用性以及與頁面的耦合性。
不給h1~h6元素定義過多的樣式
全站統必定義一遍heading元素便可，若需額外定製樣式，可以使用其餘選擇符做爲代替。
不重複定義h1~h6元素
值爲0時不須要任何單位
標準化各類瀏覽器前綴：一般將瀏覽器前綴置於前面，將標準樣式屬性置於最後，相似：.foo{
```
-moz-border-radius: 5px;
    border-radius: 5px; 
}複製代碼
```
使用CSS漸變等高級特性，需指定全部瀏覽器的前綴
避免讓選擇符看起來像正則表達式
CSS3添加了一些相似~=等複雜屬性，也不是全部瀏覽器都支持，需謹慎使用。
遵照盒模型規則（Beware of broken box models）

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

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

27. 在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

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

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

◆什麼時候應當使用margin

須要在border外側添加空白時。

空白處不須要背景（色）時。

上下相連的兩個盒子之間的空白，須要相互抵消時。如15px+20px的margin，將獲得20px的空白。

◆什麼時候應當時用padding

須要在border內測添加空白時。

空白處須要背景（色）時。

上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px+20px的padding，將獲得35px的空白。

◆瀏覽器兼容性問題

在IE5.x、IE6中，爲float的盒子指定margin時，左側margin可能會變成兩倍的寬度。經過改用padding或指定盒子爲display:inline能夠解決。

29. 元素豎向的百分比設定是相對於容器的高度嗎？

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

30. 全屏滾動的原理是什麼？用到了CSS的哪些屬性？

原理：有點相似於輪播，總體的元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度是500%，只是展現100%，剩下的能夠經過transform進行y軸定位，也能夠經過margin-top實現
overflow：hidden；transition：all 1000ms ease；

31. 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

響應式網站設計(Responsive Web design)是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。

基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理。

頁面頭部必須有meta聲明的viewport。

<meta name=’viewport’ content=」width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no」>
複製代碼

32. 視差滾動效果？

視差滾動（Parallax Scrolling）經過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來建立出使人驚歎的3D效果。

CSS3實現
優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
jQuery實現
經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。
優勢：能兼容到各個版本的，效果可控性好
缺點：開發起來對製做者要求高
插件實現方式
例如：parallax-scrolling，兼容性十分好

33. ::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
::before就是以一個子元素的存在，定義在元素主體內容以前的一個僞元素。並不存在於dom之中，只存在在頁面之中。

:before 和 :after 這兩個僞元素，是在CSS2.1裏新出現的。起初，僞元素的前綴使用的是單冒號語法，但隨着Web的進化，在CSS3的規範裏，僞元素的語法被修改爲使用雙冒號，成爲::before ::after

注意:對於IE6/7/8僅支持單冒號表示法，而現代瀏覽器同時支持這兩種表示法。另外，在CSS3中單冒號和雙冒號的區域主要是用來區分僞類和僞元素的。

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

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度做用的是height和line-height，沒有定義height屬性，最終其表現做用必定是line-height。
單行文本垂直居中：把line-height值設置爲height同樣大小的值能夠實現單行文字的垂直居中，其實也能夠把height刪除。
多行文本垂直居中：須要設置display屬性爲inline-block。

35. 怎麼讓Chrome支持小於12px 的文字？

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

36. 讓頁面裏的字體變清晰，變細用CSS怎麼作？

-webkit-font-smoothing 在 window 系統下沒有起做用，可是在 IOS 設備上起做用 -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. 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

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

39. li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。
解決方法：

能夠將<li>代碼所有寫在一排
浮動li中float：left
在ul中用font-size：0（谷歌不支持）；
能夠將 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

40. display:inline-block 何時會顯示間隙？

有空格時候會有間隙解決：s除空格
margin正值的時候解決：margin使用負值
使用font-size時候解決：font-size:0、letter-spacing、word-spacing

41. 有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度

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

42. png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優勢是：壓縮比高，色彩好。大多數地方均可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性很差，目前谷歌和opera支持。

43. style 標籤寫在 body 後與 body前有什麼區別？

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

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

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

45. CSS Sprites是什麼？它的優點和劣勢？

CSS Sprites小圖片背景共享技術。它把一堆小的圖片整合到一張大的圖片上。而後利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能；CSS Sprites能減小圖片的字節。

優點：

1.很好的減小網頁的請求，大大提升頁面的性能；

2.減小圖片的字節；

3.解決了網頁設計師在圖片命名上的困擾；

4.更換風格方便，維護方便。

劣勢：

1.圖片合併時需預留好足夠空間，寬屏、高分辨率的屏幕下易出現背景斷裂；

2.開發較麻煩，測量繁瑣；（可以使用樣式生成器）

3.維護麻煩，背景少量改動有可能影響整張圖片，使得字節增長還要改動css。

46. CSS 僞類和僞元素的區別？

第一種回答：

僞類： :focus、:hover、:active

僞元素：:before、:after

僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；

僞元素本質上是建立了一個有內容的虛擬容器；

CSS3中僞類和僞元素的語法不一樣；

能夠同時使用多個僞類，而只能同時使用一個僞元素；

第二種回答：

僞類：僞類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具備的特性，而不是元素的id、class、屬性等靜態的標誌。因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它是基於文檔以外的抽象，因此叫僞類。

:first-child :link: :visitive :hover :active :focus :lang

僞元素：與僞類針對特殊狀態的元素不一樣的是，僞元素是對元素中的特定內容進行操做，它所操做的層次比僞類更深了一層，也所以它的動態性比僞類要低得多。實際上，設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器沒法完成的工做。它控制的內容實際上和元素是相同的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此叫僞元素。

:first-line 
:first-letter 
:before 
:after複製代碼

47.有哪項方式能夠對一個 DOM 設置它的CSS樣式？　　

外部樣式表，引入一個外部css文件

內部樣式表，將css代碼放在 <head> 標籤內部

內聯樣式，將css樣式直接定義在 HTML 元素內部

48. CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？　　

最基本的：設置 display 屬性爲 none，或者設置 visibility 屬性爲 hidden

技巧性：設置寬高爲 0，設置透明度爲 0，設置 z-index 位置在 -1000

49. 什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？

答案：解決各瀏覽器對 CSS 解釋不一樣所採起的，區別不一樣瀏覽器製做不一樣CSS樣式的設置就叫做 CSS Hack。

50. 行內元素和塊級元素的具體區別是什麼？行內元素的 padding 和 margin 可設置嗎？

塊級元素( block )特性：

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示；

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制；

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的）。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

答案：<input> 、<img> 、<button> 、<textarea>。

相關文章爲什麼img、input等內聯元素能夠設置寬高

51. 什麼是外邊距重疊？重疊的結果是什麼？

　　外邊距重疊就是 margin-collapse。

　　在CSS當中，相鄰的兩個盒子的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

　　摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是二者的相加的和。

52. rgba() 和 opacity 的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

53. css 中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

　　垂直方向：line-height

　　水平方向：letter-spacing (letter-spacing 屬性增長或減小字符間的空白)

　　那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

　　答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

54. px 和 em 的區別。

px和em都是長度單位，區別是：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

　　瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

55. 描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？　

不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是不處理，在不一樣的瀏覽器下會存在必要的風險。

　　你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

56. 問:translate()方法能移動一個元素在z軸上的位置？

不能。它只能移動x,y軸的位置。translate3d能夠。

57. CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器多背景 rgba

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

58. xhtml 和 html 有什麼區別

功能上的差異：HTML是一種基本的WEB網頁設計語言；XHTML是一個基於XML的置標語言，XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁。

書寫習慣上：

(1) XHTML 所在標籤都必須小寫

(2) XHTML 標籤必須成雙成對

(3) XHTML 標籤順序必須正確

(4) XHTML 全部屬性都必須使用雙引號

(5) 不XHTML 容許使用target=」_blank」

(6) XHTML 文檔必須擁有根元素。

(7) XHTML 元素必須被正確地嵌套。

59. 前端頁面有哪三層構成，分別是什麼?

結構層 Html 表示層 CSS 行爲層 js

60. css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

61. 與 HTML4 比較，HTML5 廢棄了哪些元素？

廢棄的元素包括：

· frame

· frameset

· noframe

· applet

· big

· center

· basefront

62. CSS引入的方式有哪些？使用Link和@import有什麼區別？

答：內聯，內嵌，外鏈，導入

（1）link 屬於 XHTML 標籤，除了加載 CSS 外，還能用於定義RSS，定義 rel 鏈接屬性等做用，無兼容性，支持使用javascript改變樣式；而@import是CSS提供的，只能用於加載CSS，不支持使用 javascript 改變樣式；

（2）頁面被加載的時，link 會被同時加載，而@import 引用的CSS會等到頁面加載完再加載；

（3）import是CSS2.1 提出的，CSS2.1如下瀏覽器不支持，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。

63. 介紹一下你對瀏覽器內核的理解

主要分紅兩部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

（1）渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶以及其餘它所須要編輯、顯示網絡的應用程序都須要內核。

（2）JS引擎則：解析和執行JavaScript 來實現網頁的動態效果；

最開始渲染引擎和 JS 並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只渲染引擎。

64. 常見的瀏覽器內核有哪計算些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。

Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink;]

Webkit內核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]

EdgeHTML內核：Microsoft Edge。[此內核實際上是從MSHTML fork而來，刪掉了幾乎全部的IE私有特性]

65. 對WEB標準以及W3C的理解與認識

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性;

66. 爲何HTML5裏面咱們不須要DTD（Document Type Definition文檔類型定義）？

HTML5沒有使用SGML或者XHTML，他是一個全新的東西，所以你不須要參考DTD，對於HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔

67. 若是我不放入，HTML5還會工做麼？

不會，瀏覽器將不能識別他是HTML文檔，同時HTML5的標籤將不能正常工做

68. HTML5 中的 datalist 是什麼？

HTML5中的Datalist元素有助於提供文本框自動完成特性，以下圖所示：

69. CSS中使用列布局是什麼？

CSS列布局幫助你分割文本變爲列，例如考慮下面的雜誌新聞在一個大的文本中，可是咱們須要在他們之間使用邊界劃分爲3列，這裏HTML5的列布局就有所幫助了

70. 如何水平而且垂直居中一張背景圖

設置 background-position:center;

71. font-style屬性可讓它賦值爲「oblique」是什麼意思

讓一種字體標識爲斜體(oblique)，若是沒有這種格式，就使用italic字體

72. 如何理解 CSS 的繼承和重用？

繼承：在一個屬性應用於一個特定標籤以後，該標籤的子標籤也應該應用該屬性。這一行爲稱爲繼承。但並非全部的屬性都會被繼承。如文字樣式通常都繼承，盒圖的寬高通常不繼承，總之該繼承的都會繼承，不應繼承的都不繼承。

重用：一個樣式文件，能夠多個頁面使用，這對於一些公共樣式的重構是頗有用的。

73. 製做一個訪問量很高的大型網站，你會如何來管理全部CSS文件,js 與圖片？

答案：涉及到人手、分工、同步

（1）先期團隊必須肯定好全局樣式，編碼模式等

（2）編寫習慣必須一致

（3）標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）

（4）頁面進行標註

（5） Css與html分文件夾並行存放，命名都要統一

（6） Js分文件夾存放，命名以該JS功能爲準英文翻譯

（7）圖片採用整合的.png格式文件使用，儘可能整合在一塊兒，方便未來的管理。

74. 強制換行的css是什麼？

Word-break:break-all;

(HTML和CSS)測試題：

1. 簡述的做用。

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。

它不是一個 HTML 標籤，它是用來告知（聲明） Web 瀏覽器頁面使用了哪一種 HTML 版本

2. 行內元素和塊級元素的區別是是什麼。

行內元素：

（1）行內元素不換行

（2）行內元素不能夠設置大小

（3）行內元素大小由內容決定

塊元素：

（1）塊元素獨立成行

（2）塊元素能夠設置大小

（3）塊元素若是不設置寬度，寬度會自適應其父級的寬度

3. 列舉經常使用行內元素和塊元素，並解釋其做用

行元素：

span、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下劃線）、button（默認display：inline-block）

從瀏覽器的顯示結果能夠看出，相鄰的行內元素不換行，寬度即爲內容的寬度、padding的4個方向都有效（從span標籤能夠看出，對於行內非替換元素，不會影響其行高，不會撐開父元素；而對於替換元素，則會撐開父元素）、margin只有水平方向有效（其中垂直方向的margin對行內替換元素（好比img元素）有效，對行內非替換元素無效）、不能夠設置width和height屬性。行內塊元素表現其實和行內元素同樣，只是其能夠設置width和height屬性。

塊元素：

div、p、h1~h六、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

從瀏覽器的顯示結果能夠看出，塊級元素新開啓一行（即便是設置了width屬性也是獨佔一行）、儘量撐滿父級元素的寬度，能夠設置width和height屬性；table元素瀏覽器默認的display屬性爲table。

4. 讓行內元素水平居中的兩種方法

(1) 找到對應其標籤的父級，給其父級設置 text-align : center；

(2) 將元素轉化成塊元素，設置margin : 0 auto，（必須是塊元素，並且有寬度）

5. 如何實現一個標題文字居中？text-align : center

6. 使塊元素在一行顯示。float : left

7. 文字加粗，以及文字字體傾斜

加粗：

CSS：font-weight : bold

HTML : ，

斜體：

CSS : font-style : italic | oblique，font-style : normal（正常的字體）

HTML : ，

✳8. 解決 img 圖片自帶邊距的問題

谷歌中這樣是解釋的：

圖片底部的空隙實際上涉及行內元素的佈局模型，圖片默認的垂直對齊方式是基線，而基線的位置是與字體相關的。因此在某些時候，圖片底部的空隙多是 2px，而有時多是 4px 或更多。不一樣的 font-size 應該也會影響到這個空隙的大小。

解決辦法：

最優的解決辦是定義vertical-align，注：定義vertical-align爲middle時在IE6中大概還有一像素的頂邊距，最好爲top或bottom。固然還有種極端解決辦法你們能夠試試就是將 父容器的字體大小爲零，font-size:0

（1）轉化成（行級）塊元素

display : block複製代碼

（2）浮動，浮動後的元素默承認以轉化爲塊元素（能夠隨意設置寬高屬性）

float ： left；複製代碼

（3）給 img 定義 vertical-align（消除底部邊距）

img{    
    border: 0;    
    vertical-align: bottom;
}複製代碼

（4）將其父容器的font-size 設爲 0；

（5）給父標籤設置與圖片相同的高度

9. 若是使用了 float 的元素，沒有實現並排效果，可能出現的問題？

父級的寬度不夠，致使元素沒法並排顯示；

10. 設置css方式有哪些？

行內樣式、內部樣式（寫一個style）、外部樣式

11. CSS 內邊距和外邊界用什麼屬性表示？

padding margin複製代碼

12. 清除全部的默認邊距。

padding : 0;
margin : 0;複製代碼

13. 單詞間距與字母間距屬性，中文應用哪種？

word-spacing : 單詞

letter-spacing : 字母、中文

14. 文字如何加下劃線，上劃線，刪除線

text-decoration : underline | overline | line-through

15. 清除列表符號，背景改爲圖片

list-style:none;
background-image:url()複製代碼

16. 邊框（boder）得基本屬性都有哪些？

寬度（width）

顏色（color）

線形（solid，dashed，dotted，）實線，虛線，點畫線

17. 行元素如何轉化爲塊元素，或者行級塊元素，行級塊元素有什麼特色

diaplay：block | inline-block

18. 標籤上 title 屬性與 alt 屬性的區別是什麼？

title ：鼠標放入時提示的文字，

alt : 圖片路徑出錯時，提示文字

19. 如何防止出現亂碼？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

2019 CSS經典面試題（史上最全，持續更新中...）

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

2. box-sizing屬性？

3. 對 BFC 規範(塊級格式化上下文：block formatting context)的理解？

4. CSS選擇器有哪些？哪些屬性能夠繼承？CSS優先級算法如何計算？

5. CSS3新增僞類有那些?

6. 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？如何居中一個img（position定位）

7. display 有哪些值？說明他們的做用?

8. position 的值？

9. CSS3有哪些新特性？

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

11. 用純CSS建立一個三角形的原理是什麼？

12. 一個滿屏 品 字佈局如何設計?

13. 常見的兼容性問題？

14. 寫出幾種IE6 BUG的解決方法

15. 爲何要初始化 CSS 樣式

16. absolute 的 containing block(容器塊)計算方式跟正常流有什麼不一樣？

17. CSS裏的 visibility 屬性有個 collapse 屬性值是幹嘛用的？在不一樣瀏覽器下之後什麼區別？

18. display:none 與 visibility:hidden 的區別是什麼？

19. position 跟 display、overflow、float 這些特性相互疊加後會怎麼樣？

20. 爲何會出現浮動? 何時須要清除浮動？清除浮動有哪些方式？優缺點是什麼？你認爲最好的是哪種？爲何？

21. 上下 margin 重合的問題

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

23. 移動端的佈局用過媒體查詢嗎？

24. 什麼是CSS 預處理器 / 後處理器？你們爲何要使用他們？

25. CSS優化、提升性能的方法有哪些？

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

27. 在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

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

29. 元素豎向的百分比設定是相對於容器的高度嗎？

30. 全屏滾動的原理是什麼？用到了CSS的哪些屬性？

31. 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

32. 視差滾動效果？

33. ::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用

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

35. 怎麼讓Chrome支持小於12px 的文字？

36. 讓頁面裏的字體變清晰，變細用CSS怎麼作？

37. position:fixed; 在 android 下無效怎麼處理 ？

38. 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

39. li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

40. display:inline-block 何時會顯示間隙？

41. 有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度

42. png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

43. style 標籤寫在 body 後與 body前有什麼區別？

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

45. CSS Sprites是什麼？它的優點和劣勢？

46. CSS 僞類和僞元素的區別？

47.有哪項方式能夠對一個 DOM 設置它的CSS樣式？

48. CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？

49. 什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？

50. 行內元素和塊級元素的具體區別是什麼？行內元素的 padding 和 margin 可設置嗎？

51. 什麼是外邊距重疊？重疊的結果是什麼？

52. rgba() 和 opacity 的透明效果有什麼不一樣？

53. css 中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

54. px 和 em 的區別。

55. 描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

56. 問:translate()方法能移動一個元素在z軸上的位置？

57. CSS3有哪些新特性？

58. xhtml 和 html 有什麼區別

59. 前端頁面有哪三層構成，分別是什麼?

60. css的基本語句構成是?

61. 與 HTML4 比較，HTML5 廢棄了哪些元素？

62. CSS引入的方式有哪些？使用Link和@import有什麼區別？

63. 介紹一下你對瀏覽器內核的理解

64. 常見的瀏覽器內核有哪計算些？

65. 對WEB標準以及W3C的理解與認識

66. 爲何HTML5裏面咱們不須要DTD（Document Type Definition文檔類型定義）？

67. 若是我不放入，HTML5還會工做麼？

68. HTML5 中的 datalist 是什麼？

69. CSS中使用列布局是什麼？

70. 如何水平而且垂直居中一張背景圖

71. font-style屬性可讓它賦值爲「oblique」是什麼意思

72. 如何理解 CSS 的繼承和重用？

73. 製做一個訪問量很高的大型網站，你會如何來管理全部CSS文件,js 與圖片？

74. 強制換行的css是什麼？

(HTML和CSS)測試題：

1. 簡述的做用。

2. 行內元素和塊級元素的區別是是什麼。

3. 列舉經常使用行內元素和塊元素，並解釋其做用

4. 讓行內元素水平居中的兩種方法

12. 一個滿屏品字佈局如何設計?

37. position:fixed; 在 android 下無效怎麼處理？

47.有哪項方式能夠對一個 DOM 設置它的CSS樣式？　　

48. CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？　　

55. 描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？　

2. 行內元素和塊級元素的區別是是什麼。

17. 行元素如何轉化爲塊元素，或者行級塊元素，行級塊元素有什麼特色