前端面試(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的兼容性

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的兼容性：

1.8.6 總結

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

1.9 css規範化