前端面試 css部分

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

主要是針對兩方面，內容語義化，**語義化。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

只要記住一下幾點：

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

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

// **示意
// html
"left"><?div>
"right">
// css
width:100%;
display:flex;
}#left
#right複製**

看一下flex的相容性

// **示意
// html
"left"><?div>
"right">
// css
width:100%;
}#left
#right複製**

// **示意
// html
"left"><?div>
"right">
// css
width:100%;
position:relative;
}#left
#right複製**

// html
"left"><?div>
"right">
// css
width:100%;
}#left
#right複製**

// html
"left"><?div>
"right">
// css
width:100%;
}#left
#right複製**

calc的相容性：

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