前端面試(css部分)

Tra發表於2019-02-02
前端面試CSS

1.1 如何理解html語義化？

1.1.1 為什麼需要html語義化

  html語義化是html5之後提出來的，在之前的html版本中，頁面是通過一大堆的div+css堆砌起來的。當css載入失敗後，頁面非常醜陋，而且沒有所謂的權重。比如文字強調，css載入失敗後，和一般的文字沒有任何區別，而且對於搜尋引擎也不友好，搜尋引擎無法得知頁面的具體什麼內容是重要的,等等。

1.1.2 那什麼才是html語義化

  主要是針對兩方面，內容語義化，程式碼語義化。

  主要圍繞幾個主要的標籤，比如說 p(代表段落) li(代表列表) h1-h6(標題，搜尋引擎會以這些標題對頁面進行建議的分析) strong em(強調) header footer aside article(這寫html5新增標籤，可幫助我們程式碼更加語義化)

1.13 語義化的好處？

  • 在css載入失敗，頁面可以呈現更好的內容結構(比如li strong h1等標籤的使用，可幫助更好的理解頁面結構)
  • 使用者體驗(比如title alt 用於解釋名詞和當圖片載入失敗後顯示的文字，label可幫助聚集焦點)
  • seo(搜尋引擎可以更好的抓取重要有用的資訊)
  • 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）意義的方式來渲染網頁；
  • 便於開發團隊的維護

1.2 如何理解viewport？

1.3 盒模型

1.3.1 標準模型‘

  標準模型實際盒子寬 = css盒子寬度+padding-left+padding-right+border-left-width+border-right-width

  標準模型實際盒子高 = css盒子高度+padding-top+padding-bottom+border-top-width+border-bottom-width

   說白了，盒子是在固有寬度的範圍內往外撐

1.3.2 ie模型

  ie模型真實盒子寬 = css盒子寬度-  padding-left  -   padding-right  -   border-left-width  -   border-right-width

  ie模型真實盒子高 = css盒子高度  -  padding-top  -  padding-bottom  -   border-top-width  -  border-bottom-width

說白了，盒子是在固有寬度的範圍內往內縮

1.3.3 應用場景

  一般而言，pc頁面用標準模型比較合適，移動端頁面受制於螢幕，用ie模型更加合適

  box-sizing:border-box ：將盒子模型轉化為ie模型

  box-sizing:content-box ：將盒子模型轉化為標準模型

  這兩個css屬性都在ie9以上才可支援

1.4 如何居中？

1.5 Flex和bfc

詳情可檢視我的另一篇文章

1.6 選擇器優先順序

  如果有很多css用於同一個元素上面，選擇器的優先順序就會很重要。如果存在相同的css屬性，優先順序高的會覆蓋掉之前的css屬性。

  那選擇器的優先順序如何計算呢？

  只要記住一下幾點：

  • !important : 無敵！！(不用考慮後面了)
  • 行內樣式：1000
  • id :100
  • 屬性選擇器 class : 10
  • 元素名：1

  如果存在多個css應用在同一個元素，就使用上面的規則。

  比如 #app .content p{} 它的權重:100+10 +1 = 111

1.7 vertical-align如何理解？

1.8 左邊固定寬度，右邊自適應佈局

1.8.1 flex

  如果沒有相容要求，盡情使用flex吧。習慣了flex，就會發現float什麼的都是浮雲。

// 程式碼示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
  display:flex;
}
#left{
  width:100px
}
#right{
  flex:1
}複製程式碼

  看一下flex的相容性

前端面試(css部分)

1.8.2 float+margin（左側設定固定寬並且左浮動，右側加個margin-left）

// 程式碼示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
}
#left{
  width:100px；
  float: left;
}
#right{
  margin-left: 100px
}複製程式碼

1.8.3 absolute+margin（左側設定固定寬並且絕對定位，右側加margin-left）

// 程式碼示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
  position:relative;
}
#left{
  width:100px；
  position: absolute;
}
#right{
  margin-left: 100px
}複製程式碼

1.8.4 overflow(左側設定固定寬並且左浮動，右側加overflow：hidden)

// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;

}
#left{
  width:100px；
  float:left
}
#right{
 overflow: hidden;
}複製程式碼

1.8.5.calc()計算屬性(設定固定寬並且左浮動，右側寬度為calc(100% - 寬度px)且float)

// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;

}
#left{
  width:100px；
  float:left
}
#right{
  float:left;
  width: calc(100% - 100px);
}複製程式碼

calc的相容性：

前端面試(css部分)

1.8.6 總結

   其實1.8.2 1.8.3 1.8.4 都是使用bfc特性。

1.9 css規範化



相關文章