前端面試題 ----css篇

時間 2019-12-09

標籤端面試題 css 欄目 CSS 简体版

原文原文鏈接

一、css盒模型有哪些及區別content-box border-box padding-boxcss

IE盒子模型box-sizing:border-box;（怪異模式）
W3C標準盒子模型 box-sizing:content-box;（標準模式）默認模式html

Q2
content-box:這是默認樣式指定CSS標準。測量width和height屬性只包括的內容，但不是border, margin, 或者 padding。
padding-box:width和height屬性包括padding的大小，不包括border和margin
border-box:width和height屬性包括padding和border，但不是margin。這是盒模型的文檔時，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。因此若是你設置的大小是同樣的，content-box看起來，會比border-box大css3

二、頁面導入樣式時，使用link和@import有什麼區別？面試

三、display有哪些值？說明它們的做用。算法

block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 缺省值。像行內元素類型同樣顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。
list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
table 此元素會做爲塊級表格來顯示。
inherit 規定應該從父元素繼承display屬性的值。

四、css清除浮動的幾種方法？瀏覽器

一、clear清除浮動（添加空div法）服務器

在浮動元素下方添加空div,並給該元素寫css樣式：   {clear:both;height:0;overflow:hidden;}

- 1
- 2

二、方法：給浮動元素父級設置高度併發

咱們知道了高度塌陷是應爲給浮動元素的父級高度是自適應致使的，那麼咱們給它的設置適當的高度就能夠解決這個問題了。

缺點：在浮動元素高度不肯定的時候不適用

- 1
- 2
- 3
- 4

三、方法：以浮制浮（父級同時浮動）app

何謂「以浮制浮」呢？就是**讓浮動元素的父級也浮動**。

缺點：須要給每一個浮動元素父級添加浮動，浮動多了容易出現問題。

- 1
- 2
- 3
- 4

四、方法：父級設置成inline-block佈局

缺點：父級的margin左右auto失效，沒法使用margin: 0 auto;居中了

- 1
- 2

五、 br 清浮動

<div class="box"> <div class="top"></div> <br clear="both" /> </div>

- 1
- 2
- 3
- 4

br 標籤自帶clear屬性，將它設置成both其實和添加空div原理是同樣的。
問題：不符合工做中：結構、樣式、行爲，三者分離的要求。

六、給父級添加overflow:hidden 清浮動方法；

問題：須要配合 寬度 或者 zoom 兼容IE6 IE7；

- 1
- 2

overflow: hidden; *zoom: 1;

- 1
- 2

七、萬能清除法 after僞類清浮動（如今主流方法，推薦使用）

選擇符:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }

同時爲了兼容 IE6，7 一樣須要配合zoom使用例如：

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}

- 1
- 2
- 3

須要注意的東西：

after僞類： 元素內部末尾添加內容；
    :after{content"添加的內容";} IE6，7下不兼容

zoom 縮放 
    a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。
    b、FF 不支持；

五、px、em、rem的區別？

一、px像素。絕對單位，像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI。
二、em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以並非一個固定的值。
rem是CSS3新增的一個相對單位(root em,根em),使用rem爲元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素。
四、區別：IE沒法調用那些使用px做爲單位的字體大小，而em和rem能夠縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器已支持rem。

六、CSS3新特性有哪些？

一、顏色：新增RGBA、HSLA模式
二、文字陰影(text-shadow)
三、邊框：圓角（border-radius）邊框陰影：box-shadow
四、盒子模型：box-sizing
五、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以「，」分隔能夠設置多背景，用於自適應佈局
六、漸變：linear-gradient、radial-gradient
七、過渡：transition可實現動畫
八、自定義動畫
九、在CSS3中惟一引入的僞元素是::selection
十、多媒體查詢、多欄佈局
十一、border-image
十二、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
1三、3D轉換

七、描述css reset的做用和用途？

　　Reset重置瀏覽器的css默認屬性，瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一。

八、解釋css sprites,如何使用？

　　css 精靈圖，把一堆小的圖片整合到一張大的圖片（png）上，減輕服務器對圖片的請求數量。

九、爲何要使用css sprites

css精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量
css sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用css的"background-image","background-position"的組合進行背景定位，這樣能夠減小。
不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是若是請求太多會給服務器增長很大的壓力。

十、display:none;與visibility:hidden的區別是什麼？

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

十一、css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

css選擇符：類選擇器、標籤選擇器、ID選擇器、後代選擇器（派生選擇器）、羣組選擇器
能夠繼承：類選擇器、標籤名選擇器、後代選擇器（派生選擇器）、羣組選擇器

十二、寫出幾種IE6 BUG的解決方法

1、IE6雙倍邊距bug

當頁面上的元素使用float浮動時，無論是向左仍是向右浮動；只要該元素帶有margin像素都會使該值乘以2，例如「margin-left:10px」在IE6中，該值就會被解析爲20px。想要解決這個BUG就須要在該元素中加入display:inline 或 display:block 明確其元素類型便可解決雙倍邊距的BUG

2、IE6中3像素問題及解決辦法

當元素使用float浮動後，元素與相鄰的元素之間會產生3px的間隙。詭異的是若是右側的容器沒設置高度時3px的間隙在相鄰容器的內部，當設定高度後又跑到容器的相反側了。要解決這類BUG的話，須要使佈局在同一行的元素都加上float浮動。

3、IE6中奇數寬高的BUG

IE6中奇數的高寬顯示大小與偶數高寬顯示大小存在必定的不一樣。其中要問題是出在奇數高寬上。要解決此類問題，只須要儘可能將外部定位的div高寬寫成偶數便可。

4、IE6中圖片連接的下方有間隙

IE6中圖片的下方會存在必定的間隙，尤爲在圖片垂直挨着圖片的時候，便可看到這樣的間隙。要解決此類問題，須要將img標籤訂義爲display:block 或定義vertical-align對應的屬性。也能夠爲img對應的樣式寫入font-size:0

5、IE6下空元素的高度BUG

若是一個元素中沒有任何內容，當在樣式中爲這個元素設置了0-19px之間的高度時。此元素的高度始終爲19px。

解決的方法有四種:

1.在元素的css中加入：overflow:hidden

2.在元素中插入html註釋：<!– >

3.在元素中插入html的空白符： 

4.在元素的css中加入：font-size:0

6、重複文字的BUG

在某些比較複雜的排版中，有時候浮動元素的最後一些字符會出如今clear清除元素的下面。

解決方法以下：

1.確保元素都帶有display:inline

2.在最後一個元素上使用「margin-right:-3px

3.爲浮動元素的最後一個條目加上條件註釋，<!–[if !IE]>xxx<![endif]–>

4.在容器的最後元素使用一個空白的div，爲這個div指定不超過容器的寬度。

7、IE6中 z-index失效

具體BUG爲，元素的父級元素設置的z-index爲1，那麼其子級元素再設置z-index時會失效，其層級會繼承父級元素的設置，形成某些層級調整上的BUG。詳細解釋能夠閱讀IE6中部分狀況下z-index無效的緣由，以及解決辦法

結語：實際上IE6中，不少BUG的解決方法均可以使用display:inline、font-size:0、float解決。所以咱們在書寫代碼時要記住，一旦使用了float浮動，就爲元素增長一個display:inline樣式，能夠有效的避免浮動形成的樣式錯亂問題。使用空DIV時，爲了不其高度影響佈局美觀，也能夠爲其加上font-size:0 這樣就很容易避免一些兼容上的問題。

兼容
1li列表的bug
/*A當父元素li有float子元素a沒有設置浮動時會出現垂直bug
hank：給父元素li和子元素都設置浮動*/
/*B當li中的a轉成block而且有height並有float的li中設置浮動會出現階梯顯示
 hank：給li加float*/
2marginBUG
/*A：描述：當前元素與父元素沒有設置浮動狀況下設置margin-top會出現錯誤的加在父元素上
hank：給父元素和子元素加overflow：hidden
hank：給父元素和子元素加浮動*/
/*B：描述：當上下排列的元素上元素有margin-bottom：30px下元素有margin-top：20px他們
中間的間距不會疊加而是會設置較大的值
hank：把margin值加在一個元素上
hank：給上或下元素套一個div給div加overflow：hidden*/
3按鈕元素默認大小不一
/*各個瀏覽器中按鈕元素大小不一
hank1：統一大小（用a標籤模擬）
hank2：input外面套一個標籤在這個標籤裏直接寫按鈕的樣式把input邊框去掉
hank3：若是這個按鈕是一個圖片直接把圖片做爲按鈕背景便可*/
4.百分比的bug
/*百分比bug在ie6及更低版本瀏覽器解析百分比時會按照四捨五入致使50%+50%》100%
hank：給右邊的浮動元素添加聲明clear：right*/
5.表單元素行高對齊不一致
/*form裏的input select表單元素的行高對齊方式不一致
 hank：給表單元素加float：left*/
6.高度自適應出現高度塌陷
 hank1：給父級元素添加聲明overflow:hidden
 hank2:在浮動元素下方添加空的div病添加聲明div{clear:both;height:0;overflow:hidden}
hank3:萬能清除法ie6不支持div:after{content:".";clear:both;display:block;
height:0;overflow:hidden;visibility:hidden;}
7.塊級元素默認高度
/*描述：在ie6及如下版本中部分塊元素擁有默認高度（小於20px在16px左右）
hank：給元素添加聲明：font-size：0
hank：給元素添加聲明：overflow：hidden*/
8.鼠標指針
/*描述：cursor屬性的hand值只有在ie9以上識別其餘瀏覽器不支持cursor的pointer屬性只有
在ie6以上版本及其餘內核瀏覽器都支持
hank：統一鼠標元素鼠標指針形狀爲手型cursor：pointer*/
9.雙倍邊距
/*當ie6及更低版本瀏覽器解析浮動元素時會錯誤把浮向邊邊界margin加倍顯示
hank：給浮動元素添加聲明display：inline*/
10透明度的兼容
div{opacity:0.5;filter:alpha(opacity=50)}
11.圖片的間隙
    img{display: block;} 
       /*在div中的圖片間隙*/  
       /*在div中的圖片會在div下方撐大3px 
        hank1：div和img寫在一行上
         hank2：img轉成塊元素給img添加display：block
       圖片水平居中不起做用加margin：0 auto*/
       /*dt li 中的圖片間隙*/
     /*img添加display：block*/ 
12圖片有邊框
img{border:0;}
/*當圖片加在a標籤上時會出現邊框
 hank：給圖片加border：0或border：none*/
13.最小高度自適應的兼容
/*min-height屬性ie瀏覽器不識別
hank1：min-height：100px；_height：100px
hank2：min-height：100px；height：auto！important；height：100px*/

1三、標籤上title與alt屬性的區別是什麼？

Alt當圖片不顯示時，用文字表明
Title爲該屬性提供信息

1四、絕對定位和相對定位區別

　　一、參照物不一樣絕對定位的參照物是包含塊（父級）相對定位的參照物是元素本身自己默認位置

　　二、絕對定位將對象從文檔流中脫離出來所以不佔據空間相對位置不破壞正常的文檔流順序，不管是否進行移動元素仍佔據空間

1五、bfc

　 BFC 定義

　　BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，

　　而且與這個區域外部絕不相干。

　　BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

1六、實現佈局中間自適應寬度，左右兩欄固定寬度

<style>
        .box{
            display:flex;
        }
        .left{
            width: 200px;
            height: 600px;
            background:red;
        }
        .right{
            width: 200px;
            height: 600px;
            background:red;
        }
        .center{
            width: 100%;
            height:600px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="box" >
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

1).絕對定位法

絕對定位法原理是將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們上面，而後使用margin屬性，留出左右元素的寬度，既可使中間元素自適應屏幕寬度。

代碼以下：

文檔代碼：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout_box</title>
<link rel="stylesheet" type="text/css" href="../css/layout_box.css">
</head>
<body>
<h3>實現三列寬度自適應佈局</h3>
<div id = "left">我是左邊</div>
<div id = "right">我是右邊</div>
<div id = "center">我是中間</div>
</body>
</html>

css代碼：

[css] view plain copy

html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }

該法佈局的好處，三個div順序能夠任意改變。不足是由於絕對定位，因此若是頁面上還有其餘內容，top的值須要當心處理，最好可以對css樣式進行一個初始化，就像在上面例子中加了一個標題，若是不對樣式進行初始化，則兩邊和中間的值會對不齊。另外，隨着瀏覽器窗口縮小，小於200px的時候，會發生壓縮。

結果如圖，能夠看到中間欄寬度隨着屏幕大小伸縮。

2).使用自身浮動法

自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。

HTML代碼：

[html] view plain copy

<h3>使用自身浮動法定位</h3>
<div id = "left_self">我是左邊</div>
<div id = "right_self">我是右邊</div>
<div id = "center_self">我是中間</div>

css代碼：

[css] view plain copy

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

該佈局法的好處是受外界影響小，可是不足是三個元素的順序，center必定要放在最後，這是和絕對定位不同的地方，center佔據文檔流位置，因此必定要放在最後，左右兩個元素位置沒有關係。當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。

3). 聖盃佈局

聖盃佈局的原理是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div，包含div須要設置float屬性使其造成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值進行配合，具體原理參考這裏。這裏對聖盃佈局解釋特別詳細。

實現代碼：HTML文檔：

[html] view plain copy

<h3>使用margin負值法進行佈局</h3>
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>

CSS代碼：

[css] view plain copy

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}

該方法在網站佈局中很是常見，也是面試常考點，優勢是三欄相互關聯，有必定的抗性。須要注意的是，佈局中間部分必定要放在前面，左右順序不限制。對於left快的margin負值必定要等於wrap的寬度。

三種方法實現三欄網頁寬度自適應佈局方法見下圖。

css3新特性

在外圍包裹一層div，設置爲display：flex；中間設置flex：1；可是盒模型默認牢牢挨着，可使用margin控制外邊距。

代碼：

[html] view plain copy

<div id = "box">
<div id = "left_box"></div>
<div id = "center_box"></div>
<div id = "right_box"></div>
</div>

css樣式：

[css] view plain copy

#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

注意： center必定要放到中間。

1七、背景透明文字不透明

<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <meta charset="utf-8"><style> 
div.background
{
  width:500px; 
  height:250px; 
  background:red; 
  border:2px solid black; 
}
div.transbox
{
  width:400px; 
  height:180px; 
  margin:30px 50px; 
  background-color:#ffffff; 
  border:1px solid black; 
  opacity:0.6; 
  filter:alpha(opacity=60); /* IE8 及更早版本 */ 
}
div.transbox p 
{
  margin:30px 40px; 
  font-weight:bold; 
  color:#000000; 
}
</style>
</head>
 
<body>
 
<div class="background"> 
<div class="transbox"> 
<p>這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。
這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。這些文本在透明框裏。
</p>
</div>
</div>
 
</body>
    </body>
</html>

1八、CSS3新增僞類有那些？

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

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

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

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

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

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

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