2. 程式人生 > >前端面試題 ----css篇

前端面試題 ----css篇

阿新 • • 發佈：2018-02-24
設定 nbu radi tab 根據 pointer position net 放置

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的空白符：&nbsp;

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布局規則：

  1. 內部的Box會在垂直方向，一個接一個地放置。
  2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
  4. BFC的區域不會與float box重疊。
  5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
  6. 計算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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>layout_box</title>
  6. <link rel="stylesheet" type="text/css" href="../css/layout_box.css">
  7. </head>
  8. <body>
  9. <h3>實現三列寬度自適應布局</h3>
  10. <div id = "left">我是左邊</div>
  11. <div id = "right">我是右邊</div>
  12. <div id = "center">我是中間</div>
  13. </body>
  14. </html>
css代碼：
[css] view plain copy
  1. html,body{ margin: 0px;width: 100%; }
  2. h3{height: 100px;margin:20px 0 0;}
  3. #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
  4. #left{left:0px;}
  5. #right{right: 0px;}
  6. #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
  1. <h3>使用自身浮動法定位</h3>
  2. <div id = "left_self">我是左邊</div>
  3. <div id = "right_self">我是右邊</div>
  4. <div id = "center_self">我是中間</div>
css代碼： [css] view plain copy
  1. #left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
  2. #left_self {float: left;}
  3. #right_self{float: right;}
  4. #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
  1. <h3>使用margin負值法進行布局</h3>
  2. <div id = "wrap">
  3. <div id = "center"></div>
  4. </div>
  5. <div id = "left_margin"></div>
  6. <div id = "right_margin"></div>
CSS代碼： [css] view plain copy
  1. #wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
  2. #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
  3. #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
  4. #left_margin {margin-left: -100%; background-color: lightpink}
  5. #right_margin{margin-left: -200px;}
該方法在網站布局中非常常見，也是面試常考點，優點是三欄相互關聯，有一定的抗性。需要註意的是，布局中間部分一定要放在前面，左右順序不限制。對於left快的margin負值一定要等於wrap的寬度。 三種方法實現三欄網頁寬度自適應布局方法見下圖。

css3新特性

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

代碼：

[html] view plain copy
  1. <div id = "box">
  2. <div id = "left_box"></div>
  3. <div id = "center_box"></div>
  4. <div id = "right_box"></div>
  5. </div>
css樣式： [css] view plain copy
  1. #box{width:100%;display: flex; height: 100px;margin: 10px;}
  2. #left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
  3. #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>

　　

前端面試題 ----css篇

相關推薦

前端面試題 ----css篇

設定 nbu radi tab 根據 pointer position net 放置 1、css盒模型有哪些及區別content-box border-box padding-box IE盒子模型box-sizing:border-box;（怪異模式） W3C標準盒子模

前端面試題-CSS選擇器

一、CSS選擇器作用CSS 選擇器用於定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對 CSS 的選擇器也是支援的，比如 document.document.querySelectorAll。二、選擇器型別基本選擇器組合選擇器屬性選擇器

前端面試題—css盒子模型

面試官：請說說你對與css盒子模型的理解。 我們回答的時候應該分為以下三點來說 盒子模型的概念 盒子模型的組成 盒子模型的分類 盒模型的概念 盒子模型（box model）。網頁中，每一個元素都佔有一定的空間，無論是div、h1~h6、還是p，都可以看成是盒子。

2017前端面試題之Css篇（1）

margin 沒有 width ati clas 經驗 visible import tom 1 . CSS 屬性是否區分大小寫？ 答：不區分。 HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

前端面試題彙總-CSS篇

1、CSS 中類 (classes) 和 ID 的區別 // 對於CSS而言，id和class都是選擇器，唯一不同的地方在於權重不同。 對於html而言，id和class都是dom元素的屬性值。不同的地方在於id屬性的值是唯一的，而class屬性值可以重複。 id還一個老特性是錨點功能，當瀏覽器位址

web前端面試題及答案 css篇

1.CSS3有哪些新特性？ CSS3實現圓角（border-radius）， 陰影（box-shadow）， 對文字加特效（text-shadow、）， 線性漸變（gradient）， 旋轉（tran

最近面試前端面試題整理（css部分）

type list 定位 text -c padding 面試 lang vertical 對最近面試的面試題坐下總結： 一，css部分 1，html元素的垂直居中 答案： <div id="box"> <div> 測

2017前端面試題之Html篇（1）

utf doctype clas 停止 要求 驅動 抓取 -c 顯示錯誤 1 . doctype(文檔類型) 的作用是什麽？ 對文檔進行有效性驗證: 它告訴用戶代理和校驗器這個文檔是按照什麽DTD 寫的。這個動作是被動的， 每次頁面加載時，瀏覽器並不會下載DTD

2017前端面試題之Js篇（1）

load urn lis property eat hub bind tlist 方法的參數 1 . 請解釋事件代理 (event delegation) 當需要對很多元素添加事件的時，可以通過將事件添加到它們的父節點通過委托來觸發處理函數。其中利用到了瀏覽器的事件冒

web前端面試題整理（HTML篇）

pad 關閉 選擇 words vid onunload adding per end 1. h5的改進: 新元素畫布canvas: HTML5 <canvas>元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成音頻audio視頻vid

2010年騰訊前端面試題學習（jquery,html,css部分）

man 文章 利用 沒有 網頁 但是 lan opp 原因 看了牛人寫的回憶文章，裏面有2010年騰訊的前端面試題，裏面涉及到不少基礎性的問題，js部分已學習，這是jquery，html和css部分，學習一下：） 原文地址：https://segmentfault.com/

前端面試題彙總-HTML篇

1.DOCTYPE（文件型別）的作用是什麼？ // DOCTYPE是docunment type（文件定義）的簡寫，用來說明web設計中所用的html或xhtml的型別，指出瀏覽器或者其他閱讀程式按照什麼樣的規則集去解釋文件中的標記. 2.瀏覽器標準模式 (standards mode) 、幾

前端面試題（一）JS篇

內建型別 JS 中分為七種內建型別，七種內建型別又分為兩大型別：基本型別和物件（Object）。 基本型別有六種： null，undefined，boolean，number，string，symbol。 其中 JS 的數字型別是浮點型別的，沒有整型。並且浮點型別基於 IEEE 754標準實現，在使用中

前端面試題之html篇

引文： 本篇文章總結了前端面試過程中常見的HTML問題，如有遺漏，歡迎補充。 同時也歡迎各位關注我們的微信公眾號：前端指南。每天早上6點整準時推送前端資訊，包括但不限於技術文章，面試經驗，校招資訊。 微信掃二維碼關注 Doctype 作用？標準模式與相

web前端面試題及答案 html篇 上

1.說說你對語義化的理解？ 1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構 2，有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重； 3，方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝

前端面試題答案整理之CSS

介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？ css盒子模型由4部分構成，margin、border、padding、content。標準盒子模型和IE盒子模型的主要區別是在於width的計算，標準盒子模型中，width = cont

前端面試題總結--1 JS篇

妹子就要找工作了，所以時候要研究一下面試題，總結一下，查缺補漏。 所以要開始搜刮各種的面試題做練習啦~~ 1.JS中DOM節點操作，新增，刪除，插入，查詢，建立，複製節點 //1.建立節點 document.create

前端面試題整理——HTML篇

一、HTML部分 1.什麼是DOCTYPE？ DOCTYPE是Document Type的簡寫，在頁面中，用來指定頁面所用的HTML或者XHTML的版本。想要製作符合標註的頁面，DOCTYPE宣告是必不可少的組成部分。只有確定一個正確的DOCTYPE，XHT

web前端面試題（HTML&CSS）下 答案詳解

總結了一下遇到的面試上的問題，希望能幫助到大家【歪脖樹】  1.Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義? （1）<!DOCTYPE> 宣告位於文件中的最前面，處於 &

給老鐵們一些前端面試題，關於HTML+CSS的

1、你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼? 2、每個 HTML 檔案裡開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？ 3、Quirks 模式是什麼？它和 Standards 模式有什麼區別 4、div+css 的佈局較 table 佈局有什