前端面試題 ----css篇

本文轉載自查看原文 2018-02-24 11:59 7127 面試題

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

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

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大

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

3、display有哪些值？說明它們的作用。

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

4、css清除浮動的幾種方法？

1、clear清除浮動（添加空div法）

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

- 1
- 2

2、方法：給浮動元素父級設置高度

我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的，那么我們給它的設置適當的高度就可以解決這個問題了。

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

- 1
- 2
- 3
- 4

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

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

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

- 1
- 2
- 3
- 4

4、方法：父級設置成inline-block

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

- 1
- 2

5、 br 清浮動

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

- 1
- 2
- 3
- 4

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

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

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

- 1
- 2

overflow: hidden; *zoom: 1;

- 1
- 2

7、萬能清除法 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 不支持；

5、px、em、rem的區別？

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

6、CSS3新特性有哪些？

1、顏色：新增RGBA、HSLA模式
2、文字陰影(text-shadow)
3、邊框：圓角（border-radius）邊框陰影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以“，”分隔可以設置多背景，用於自適應布局
6、漸變：linear-gradient、radial-gradient
7、過渡：transition可實現動畫
8、自定義動畫
9、在CSS3中唯一引入的偽元素是::selection
10、多媒體查詢、多欄布局
11、border-image
12、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13、3D轉換

7、描述css reset的作用和用途？

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

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

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

9、為什么要使用css sprites

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

10、display:none;與visibility:hidden的區別是什么？

display:none;使用該屬性后，HTML元素（對象）的寬高，高度等各種屬性值都將“丟失”；
visibility:hidden;使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。

11、css選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？內聯和important哪個優先級高？

css選擇符：類選擇器、標簽選擇器、ID選擇器、后代選擇器（派生選擇器）、群組選擇器
可以繼承：類選擇器、標簽名選擇器、后代選擇器（派生選擇器）、群組選擇器

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

一、IE6雙倍邊距bug

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

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

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

三、IE6中奇數寬高的BUG

IE6中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。要解決此類問題，只需要盡量將外部定位的div高寬寫成偶數即可。

四、IE6中圖片鏈接的下方有間隙

IE6中圖片的下方會存在一定的間隙，尤其在圖片垂直挨着圖片的時候，即可看到這樣的間隙。要解決此類問題，需要將img標簽定義為display:block 或定義vertical-align對應的屬性。也可以為img對應的樣式寫入font-size:0

五、IE6下空元素的高度BUG

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

解決的方法有四種:

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

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

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

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

六、重復文字的BUG

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

解決方法如下：

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

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

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

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

七、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*/

13、標簽上title與alt屬性的區別是什么？

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

14、絕對定位和相對定位區別

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

　　2、絕對定位將對象從文檔流中脫離出來因此不占據空間相對位置不破壞正常的文檔流順序，無論是否進行移動元素仍占據空間

15、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的高度時，浮動元素也參與計算

16、實現布局中間自適應寬度，左右兩欄固定寬度

<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一定要放到中間。

17、背景透明文字不透明

<!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>

18、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，單選框或復選框被選中。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端面試題整理—HTML/CSS篇 2021年前端面試題-CSS篇【面試】前端面試題總結一（css） 2019前端面試系列——CSS面試題大前端面試題前端面試題 web前端面試題總結（html、css） (超詳細版)2020前端面試題————CSS 前端面試題整理—Webpack+Git篇前端面試題整理—ajax篇