1、簡述 <!doctype> 的作用？

​ 決定瀏覽器渲染方式

<!DOCTYPE>：告知 瀏覽器當前的 HTML 或 XML 文件是哪一個版本. Doctype 是一條 宣告, 而不是一個標籤; 也可以把它叫做 “文件型別宣告”, 或 簡稱為 “DTD”.

：用HTML5的doctype宣告檔案包含HTML5標記

2、常見的瀏覽器及其核心？

​ 瀏覽器：IE，Chrome，FireFox，Safari，Opera。

​ 核心：Trident，Gecko，Blink，Webkit。

​ 1，使用Trident的是internet explorer，國產的絕大部分瀏覽器。

​ 2，使用Gecko的是Mozilla Firefox

​ 3，使用Blink的是Chrome和Opera

​ 4，使用WebKit的有蘋果的safari，谷歌的chrome，還有國產的大部分雙核瀏覽器其中一核就是WebKit

3、b 和 strong（i 和 em）標籤的區別？

​ b標籤是一個實體標籤，它所包圍的字元被設為bold（粗體)，而strong標籤是一個語義標籤，作用是加強字元的語義

em標籤告訴瀏覽器把其中的文字表示為強調的內容。對於所有瀏覽器來說，這意味著要把這段文字用斜體來顯示。i標籤僅僅將 文字規定為斜體，並無特殊語義。

• 4、談談對語義化的理解？

  概念：運用合適的標籤和特定的屬性去格式化文件（合適標籤和屬性要用在合適的場合）

• 優點：

  • 易於開發和維護
  • 使用者體驗比較好
  • 易於seo,易於爬蟲抓取關鍵字，能和搜尋引擎建立良好的溝通。
  • 即使在沒有css樣式的情況下，也能呈現良好的效果

5、CSS 引入方式有哪些？

（1）內嵌式

通過來書寫CSS程式碼。

只能應用於當前網頁，不能被其它網頁共享。

注意：

（2）外聯式

通過標記來引入外部的CSS檔案(.css)。

可以被其它網頁共享。

格式：

注意：標記只能放在中

（3）行內樣式

通過style的屬性來書寫CSS程式碼。

舉例：

6、CSS 基本選擇器有哪些？

• 萬用字元選擇器

  • 格式：

    ​ * {

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 。

    ​ 。

    ​ }

    ​ * 代表所有標籤

• 標籤選擇器

  • 格式：

    ​ 關鍵字 {

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 。

    ​ 。

    ​ }

• 類選擇器

  • 格式：

    ​ .類名 {

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 。

    ​ 。

    ​ }

• id選擇器

  • 格式

    ​ #id名 {

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 屬性名:屬性值;

    ​ 。

    ​ 。

    ​ }

• 優先順序

  • id選擇器>類選擇器>標籤選擇器>萬用字元選擇器

7、如何合併表格單元格？

• 行合併
  • rowspan
  • 兩行合併為一行，上下合併
• 列合併
  • colspan
  • 兩列合併為一列，左右合併

8、thead、tbody、tfoot 有什麼用？

• thead: 表格的頭部，通常寫表格每一列的標題
• tbody: 表格的主體，寫表格的資料
• tfoot: 表格的底部，寫表格的腳註
• th: 表格標題的單元格。預設居中
• caption: 表格的標題

9、常見表單元素有哪些？

• input標籤

  • text

    • 文字輸入型別

    • <input type="text" name="username">
      

  • password

    • 密碼型別

    • <input type="password" name="password">
      

  • radio

    • 單選按鈕

    • <input type="radio" name="sex" value="boy">男
      <input type="radio" name="sex" value="girl">女
      

  • checkbox

    • 複選框

    • <input type="checkbox" name="course" value="HTML">HTML
      <input type="checkbox" name="course" value="CSS">CSS
      

  • button

    • 普通按鈕

    • <input type="button" value="點我">
      

  • submit

    • 提交按鈕

    • <input type="submit" value="提交">
      

  • reset

    • 重置按鈕

    • <input type="reset" value="清空">
      

  • file

    • 檔案上傳

    • <input type="file" name="file">
      

  • image

    • 影象形式的提交按鈕

    • <input type="image" src="submit.jpg" alt="submit">
      

  • hidden

    • 隱藏域

• select

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS">js</option>
        <option value="CSS">css</option>
    </select>
    

• textarea

  • 文字域

• label

  • <!-- label的for屬性要對應相應表單的id -->
            <input type="radio" name="shenfenzheng" value="zg" id="zg"><label for="zg">中國居民身份證</label>
            <input type="radio" name="shenfenzheng" value="ga" id="ga"><label for="ga">港澳臺居民身份證</label>
    

action

• action屬性定義提交表單時執行的動作。通常表單會提交到web伺服器網頁，如果省略會被提交到當前頁面

method

• get

  • 從伺服器獲取資料, 資料量小， 不安全的
  • get是預設方法

• post

  • 向伺服器傳遞資料，相對安全
  • 資料量大

• checked

  • 應用到單選框，複選框

  • <input type="checkbox" checked>
    

• selected

  • 下拉框

  • <select name="area">
        <option value="HTML">html</option>
        <option value="JS" selected>js</option>
        <option value="CSS">css</option>
    </select>
    

• value

  • <input type="text" name="name" value="web前端">
    

• readonly

  • <input type="text" name="name" value="web前端" readonly>
    

• disabled

  • <input type="text" name="name" value="web前端" disabled>
    

• maxlength

  • <input type="text" name="name" maxlength="6">
    

• size 運用多選框

  • <select name="name" size="3">
    

• style="resize: none;"

  • <!-- resize: none 設定為不能改變尺寸 -->
    <textarea name="" cols="30" rows="10" style="resize: none;"></textarea>
    

10、請簡述一下盒模型的組成？

​ 盒模型的概念

• 概念：css盒模型本質是一個盒子，封裝周圍的html標籤，它包括：外邊距，邊框，填充（內邊距）和實際內容
• 內容 content :
  • width: 設定寬度
  • height: 設定高度
• 內邊距（填充區域）padding ：
  • 單邊內邊距：padding-top padding-bottom padding-left padding-right
  • 簡寫 :
    • 一個值：表示四個方向的內邊距值。
    • 兩個值：分別表示上下，左右的內邊距值
    • 三個值：分別表示上，左右，下的內邊距值
    • 四個值：分別表示上，右，下，左的內邊距值
• 邊框 border :
  • border-width
  • border-style :
    • none 定義無邊框
    • dotted 定義點狀邊框
    • dashed 定義虛線邊框
    • solid 定義實現邊框
    • double 定義雙線。雙線的高度等於border-width的值
  • border-color
• border: 1px solid red;
• 外邊距 margin :
  • 單邊外邊距 ： margin-top margin-bottom margin-left margin-right
  • 簡寫：
    • 一個值：表示四個方向的外邊距值。
    • 兩個值：分別表示上下，左右的外邊距值
    • 三個值：分別表示上，左右，下的外邊距值
    • 四個值：分別表示上，右，下，左的外邊距值
• 外邊距傳遞和塌陷
  • 給父級設定邊框或內邊距
  • 給父級設定溢位隱藏 overflow:hidden,實際上是觸發BFC

11、CSS 複合選擇器有哪些？

• 群組選擇器

  • /* 
                群組選擇器
                    多個選擇器組合到一起用逗號分隔
             */
            .box,h3,p,span {
                color: gold;
            }
    

    
  - 
  

• 交集選擇器

  • /* 
                交集選擇器
                    用兩個或者兩個以上條件尋找
                    即有div又有.box1類名
             */
            div.box1 {
                color: deeppink;
            }
    

• 子代選擇器

  • /* 
                子代選擇器
             */
            .wrap>.box {
                color: blue;
            }
    

    
  - 
  

• 後代選擇器

  • /* 後代選擇器 */
            .wrap .box {
                color: gold;
            }
    

• 偽類連結選擇器

  • :link 未訪問狀態
  • :visited 已訪問狀態
  • :hover 滑鼠懸停狀態
  • :active 滑鼠點選那一刻

12、塊級標籤和行內標籤的區別？

Html中常見行級標籤：span、a、em、strong、b …

特點：在一行內顯示（在一行中可以並列多個行級標籤），不能設定寬高屬性，水平方向的padding和margin可以設定，垂直方向的無效。

Html中常見塊級標籤：div、p、ul、li、dl、td、dd、h1~h6 …

特點：獨佔一行，能設定width，height，margin和padding等屬性

13、浮動產生的問題？清除浮動的方案？

浮動元素引起的問題：

浮動元素脫離文件流之後在文件流中不佔位，父元素的高度無法被撐開，影響與父元素同級的元素

清楚浮動的方法：

（1）給父級元素加高度（不推薦使用，它只適合高度固定的佈局，一般父盒子都是為由內容撐起來）

（2）在結尾處新增空div標籤clear:both。具體做法：新增一個div標籤並定義一個cl的類名，給cl類名新增樣式clear:both，將該div標籤放到父元素內容結束前的位置（缺點：會多加CSS和HTML標籤）。

（3）給父級元素定義 overflow:hidden（推薦使用，缺點：不能和position配合使用，因為超出的尺寸的會被隱藏）

（4）給父級div定義偽類：after和zoom（推薦使用）

/清除浮動程式碼/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}

然後父級元素新增clearfloat類名即可

（5）給父級元素新增浮動（缺點：會產生新的浮動問題）

14、偽元素如何建立 ?

偽元素clearfix：after{

​ content：‘’；

​ clear：both；

​ display：block；}

15、如何實現盒子水平垂直居中？

居中技巧

• 1、方案 1 margin 負間距 （1）必需知道該 div 的寬度和高度； （2）然後設定位置為絕對位置； （3）距離頁面視窗左邊框和上邊框的距離設定為 50%，這個 50% 就是指盒子左上角頂點距離頁面左、上邊 界的 50%； （4）最後將該 div 分別左移和上移，使整個盒子居中，左移和上移的大小就是該 DIV( 包括 border 和 padding) 寬度和高度的一半

• <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          * {
              padding: 0;
              margin: 0;
          }
          .box {
              width: 300px;
              height: 200px;
              background-color: red;
              position: fixed;
              left: 50%;
              margin-left: -150px;
              top: 50%;
              margin-top: -100px;
          }
      </style>
  </head>
  <body>
      <div class="box"></div>
  </body>
  </html>
  

  
- 2、方案 2 margin:auto 實現絕對定位元素的居中（該方法相容 ie8 以上瀏覽器）。 此方案程式碼關鍵點： （1）上下左右均 0 位置定位； （2）margin: auto。

- ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          * {
              padding: 0;
              margin: 0;
          }
          .box {
              width: 300px;
              height: 200px;
              background-color: gold;
              margin: auto;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
          }
      </style>
  </head>
  <body>
      <div class="box"></div>
  </body>
  </html>

16、圖片下方空白間隙如何解決？

• • 去除圖片下間隙的辦法有很多，常用的有 3 種：

    • 設定父盒子字號為 0

      • .wrap{
           font-size: 0;  
        }
        

    • 改變圖片的 display

      • img{
           display: block;  
        }
        
        

    • 給圖片設定垂直對齊方式

      • img{
           vertical-align: middle;// 設定為任意不為 baseline 的值都可以 
         }
        

17、請簡述 等高佈局、聖盃佈局、雙飛翼佈局的實現原理。

聖盃佈局實現：
	1.一個大盒子，裡面有三個小盒子，左右固定，中間自適應100%，中間部分一定要先解析
	2.三個盒子加浮動，左側部分設定margin-left:-100%;右側部分設定margin-left:-自己本身寬度
	3.大盒子加左右padding,左右部分用定位定位到相應的位置
	缺點：當縮小到中間部分小於左側寬度時，佈局混亂

雙飛翼佈局實現：
	1.一個大盒子，裡面有三個小盒子，左右固定，中間自適應100%，中間部分一定要先解析
	2.三個盒子加浮動，左側部分設定margin-left:-100%;右側部分設定margin-left:-自己本身寬度
	3.中間部分內部巢狀一個標籤，加左右的外邊距
	缺點：相對於聖盃佈局，增加一層結構程式碼

假等高佈局：

​ 內外邊距相消法：內邊距設定特別大，外邊距設定特別小,父標籤加溢位隱藏，overflow:hidden;

真等高佈局：

	1先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。
	1先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。

2先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 3先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。

18、簡述 CSS 精靈圖原理，及優缺點？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的"background-image",“background-repeat”,"background-position"的組合進行背景定位，background-position可以用數字精確地定位出背景圖片的位置。

優點：

①減少網頁的http請求，從而加快了網頁載入速度，提高使用者體驗。

②減少圖片的體積，因為每個圖片都有一個頭部資訊，把多個圖片放到一個圖片裡，就會共用同一個頭資訊，從而減少了位元組數。

③解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名。

④更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。

缺點：

①在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂。

②CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置。

③在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片。

④精靈圖不能隨意改變大小和顏色。改變大小會失真模糊，降低使用者體驗，Css3新屬性可以改變精靈圖顏色，但是比較麻煩，並且新屬性有相容問題，現在一般用字型圖示代替精靈圖。

19、簡述 BFC 規則及解決的問題？

• 什麼是bfc？

  • Formatting Context：指頁面中的一個渣染區域，並且擁有一套渣染規則，他決定了 其子標籤如何定位，以及與其他標籤的相互關係和作用。

    BFC塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與， 該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

• 怎樣生成BFC

  • 根標籤
  • float的值不為none
  • overflow 的值不為 visible
  • display 的值為 inline-block
  • position 的值為 absolute 或 fixed

• BFC的特性

  • 內部的標籤預設會在垂直方向上一個接一個的放置。
  • 垂直方向上的距離由margin決定，屬於同一個BFC的兩個相鄰標籤的margin會發 生重疊。
  • 每個標籤的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動標籤也是如此。
  • BFC 的區域不會與 float 的標籤區域重疊。
  • 計算BFC的髙度時，浮動子標籤也參與計算。
  • BFC就是頁面上的一個隔離的獨立容器，容器裡面的子標籤不會影響到外面標籤， 反之亦然。

• BFC解決的問題

  • 外邊距塌陷
  • 清浮動
  • 兩欄或者三欄自適應佈局

20、文字溢位顯示省略號如何實現？

• 單行文字溢位顯示省略號

  • white-space

    • normal 預設。空白會被瀏覽器忽略。
    • pre 空白會被瀏覽器保留。
    • nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 br 標籤為止。
    • pre-wrap 保留空白符序列，但是正常地進行換行。
    • pre-line 合併空白符序列，但是保留換行符。

  • text-overflow

    • clip 修剪文字。
    • ellipsis 顯示省略符號來代表被修剪的文字。
    • [string] 使用給定的字串來代表被修剪的文字。 目前只在Firefox下有效。

  • p {
        width:200px;	/*限定盒子的寬度*/
        overflow:hidden;	/*給元素設定溢位隱藏屬性*/
        text-overflow: ellipsis;	/*文字溢位顯示省略號*/
        white-space:nowrap; /* 文字不換行 */
    }
    

• 多行文字溢位顯示省略號

  • 利用WebKit的CSS擴充套件屬性（只有-webkit-核心才有作用）

    • p{
          width:200px;	/*限定盒子的寬度*/
          overflow: hidden; /*給元素設定溢位隱藏屬性*/
          text-overflow: ellipsis; /*文字溢位顯示省略號*/
          display: -webkit-box; /*將物件作為彈性伸縮盒子模型顯示*/
          -webkit-line-clamp: 2;/*用來限制在一個塊元素顯示的文字的行數，這是一個不規範的屬性，它沒有出現在CSS規範草案中。*/
          -webkit-box-orient: vertical;/*設定或檢索伸縮盒物件的子元素的排列方式*/
      }
      

21、為什麼要初始化 CSS 樣式？哪些樣式需要初始化？

​ 保證瀏覽器的統一性，去掉標籤自帶的樣式

22、display:none 和 visibility：hidden 的區別？

盒子隱藏：

• display:none：隱藏該元素並且該元素所佔的空間也不存在了。
• visibility:hidden ：隱藏該元素但是該元素所佔的記憶體空間還存在，即“隱身效果”。

23、你能想出幾種方法讓元素在頁面中消失？

盒子隱藏：

• display:none：隱藏該元素並且該元素所佔的空間也不存在了。
• visibility:hidden ：隱藏該元素但是該元素所佔的記憶體空間還存在，即“隱身效果”。

24、標籤應該如何合理巢狀？

• 標籤的巢狀規則
  • h標籤和p標籤只能巢狀其他行內標籤或者文字
  • h標籤和p標籤不能巢狀其他塊級標籤
  • a標籤屬於行內標籤，但是比較特殊，可以巢狀任何標籤，除了a標籤
  • 其他行內標籤只能巢狀文字，或者行內標籤
  • ul和ol子標籤必須是li
• 塊級標籤
  • div h1-h6 p ul li ol li dl dt dd
  • 總是從新行開始
  • 高度、行高、外邊距以及內邊距都可以控制
  • 寬度預設是容器的100%
  • 可以容納內聯標籤和其他塊級標籤
• 行內標籤
  • strong b em i ins u del s span
  • 和相鄰行內標籤在一行上
  • 高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效
  • 預設寬度就是它本身內容的寬度
  • 行內標籤只能容納文字或者其他行內標籤
• 行內塊標籤
  • img input td
  • 和相鄰的行內標籤在一行，但之間會有白色縫隙
  • 預設寬度就是它本身內容的寬度
  • 高度、行高、外邊距以及內邊距都可以控制
• 標籤顯示模式轉換 display
  • 塊轉行內：display : inline;
  • 行內轉塊 ： display : block;
  • 塊、行內轉行內塊 ： display : inline-block;

25、簡述網頁中常見圖片格式及特點？

格式	優點	缺點	使用場景
jpg	色彩豐富，檔案小	有失真壓縮，反覆儲存圖片質量下降明顯	色彩豐富的圖片/漸變影象
gif	檔案小，支援動畫、透明，相容性比較好	只支援256種顏色	色彩簡單的logo/icon/動圖
png	無失真壓縮，支援透明，簡單圖片尺寸小	不支援動畫，色彩豐富的圖片尺寸大	logo/icon/透明圖
webp	檔案小，支援有損和無失真壓縮，支援動畫、透明	瀏覽器相容性不好	支援webp格式的app和webview

26、說說你瞭解的瀏覽器相容問題有哪些？

• 相容問題

  • ie中圖片邊框問題

    • 圖片放在a標籤中

    • img {
          border:none
      }
      

  • ie8以下瀏覽器中背景複合屬性的寫法問題

    • .bg {
          background:url("./images/bg.jpg")no-repeat center
      }
      

    • //解決方案：在url和no-repeat 直接加上空格
      .bg {
          background:url("./images/bg.jpg") no-repeat center
      }
      

  • 其他ie低版本相容問題

    • 在IE6及更早瀏覽器中定義小高度的容器

      • #test {
        	overflow:hidden;
            height:1px;
            font-size:0;
            line-height:0;
        }
        

    • IE6及更早瀏覽器浮動時產生雙倍邊距的BUG

      • 解決方案：針對ie6設定該標籤的display屬性為inline即可

      • #test {
        	float:left;
            _display:inline;
        }
        

    • IE7及更早瀏覽器下子標籤相對定位時父標籤overflow屬性的auto|hidden失效的問題

      • 解決方案：給父標籤也設定相對定位position:relative;

    • 塊轉行內塊 ie7 不在一行顯示

      • 解決方案：

      • div {
            display:inline-block;
            *display:inline;
            *zoom:1;
        }
        

    • ie7 及以下瀏覽器 清浮動問題

      • /* : 單冒號相容性更好，不推薦用雙冒號 :: */
              .clearfix:after {
                  content: '';
                  display: block;
                  clear: both;
              }
        
              /* 相容 ie7 及以下瀏覽器 清浮動問題 */
              .clearfix {
                  *zoom: 1;
              }
        

27、什麼是 CSSHack 技術？

CSS Hack

• 條件Hack

  • 大於：gt

  • 大於或等於：gte

  • 小於：lt

  • 小於或等於：lte

  • <!--[if IE]>
           <p>只在IE中能看到這個段落</p> 
       <![endif]-->
       //只有IE6以上，才能看到應用了test類的標籤是紅色文字
     <!--[if gt IE 6]>
           <style>
             .test {
                   color:red;
             }
           </style>
     <![endif]-->
    

  • IE10以上已經將條件註釋移除，使用時要注意

  • 屬性級Hack

    • _ 下劃線：選擇IE6及以下

    • *：選擇IE7及以下

    • \0：選擇ie8以上

  • color:red;//所有瀏覽器可識別
    _color:red;//僅IE6識別
    *color:red;//IE6、IE7識別
    color:red\0;//IE8、IE9識別
    

  • 選擇符級Hack

    • * html .box {
          background:red;
      }//只有在IE6顯示紅色
      

    • * + html .box {
          background:red;
      }//只有在IE7顯示紅色
      

28、在專案中你是如何做圖片優化的？

• 使用背景圖
  • 對於頁面中與頁面內容無關，起修飾作用的圖片，使用背景圖 background-image（如頁面中小圖示尤其多次重複出現的，紋理性的背景），與頁面內容相關展示性的圖片如（廣告圖、產品圖）使用 img 標籤。
• 圖片品質
  • 注意圖片優化：在保證視覺效果的情況下，選擇最小的圖片格式與圖片質量，以減少載入時間。
  • 注：通常顏色豐富線條複雜的圖片選擇 .jpg，顏色單一的小圖片使用 .gif，需要更好的顯示細節或需要支援半透明的圖片使用 .png 等。
• 使用精靈圖
  • 運用 CSS sprites 技術集中小的背景圖或圖示，減少頁面 http 請求。