1.語義化標(biāo)簽

我們平時使用DIV+CSS的布局，但是通過DIV+CSS布局的頁面HTML文檔不夠清晰，不利于瀏覽器對頁面的讀取。語義化標(biāo)簽的主要目的就是發(fā)揮標(biāo)簽和屬性的用途及作用，通過標(biāo)簽本身的意義合作來優(yōu)化HTML文檔結(jié)構(gòu)。
好處：
1.方便布局，如果我們使用DIV+CSS的方式來寫頁面布局，一般需要加類名。
2.便于特殊化設(shè)備讀取，比如盲人閱讀器會完全根據(jù)你的標(biāo)簽來“讀”你的網(wǎng)頁。
3.利于SEO優(yōu)化，語義化標(biāo)簽?zāi)芎退阉饕娼⒘己脺贤ā?br> 常見的語義化標(biāo)簽：

  結(jié)構(gòu)類
    header 頭部
    footer 尾部
    aside 與主體內(nèi)容不那么相關(guān)的部分
    section 塊，里面的標(biāo)題等呈現(xiàn)為文章的 下一級結(jié)構(gòu)
    nav 導(dǎo)航
    article 文章
  語義類
    em b q s u mark figure cite del alt title name

2.盒子模型

當(dāng)對一個文檔進行布局（layout）的時候，瀏覽器的渲染引擎會根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box）

一個盒子由四個部分組成：content、padding、border、margin

image.png

從上圖可以看到：
盒子總寬度 = width + padding + border + margin;
盒子總高度 = height + padding + border + margin
也就是，width/height 只是內(nèi)容高度，不包含 padding 和 border 值

所以上面問題中，設(shè)置width為200px，但由于存在padding，但實際上盒子的寬度有240px

怪異盒子模型

從上圖可以看到：
盒子總寬度 = width + margin;
盒子總高度 = height + margin;

也就是，width/height 包含了 padding 和 border 值

CSS 中的box-sizing 屬性定義了引擎應(yīng)該如何計算一個元素的總寬度和總高度
content-box 默認值，元素的 width/height 不包含padding，border，與標(biāo)準(zhǔn)盒子模型表現(xiàn)一致
border-box 元素的 width/height 包含 padding，border，與怪異盒子模型表現(xiàn)一致
inherit 指定 box-sizing 屬性的值，應(yīng)該從父元素繼承

• 核心點：
  盒模型：當(dāng)對一個文檔進行布局時，瀏覽器渲染引擎會根據(jù)CSS 基礎(chǔ)盒模型（CSS basic box model）標(biāo)準(zhǔn)，將所有元素表示為一個個矩形的盒子。一個盒子由四部分組成
  margin
  border
  padding
  content：實際內(nèi)容，文本或者圖片等
  盒模型分類

標(biāo)準(zhǔn)盒模型：height和width不會把padding和margin一起計算
盒子總高 = height + padding + border + margin
盒子總寬 = width + padding + border + margin
IE怪異盒模型：height和width會把padding和margin一起計算
盒子總高 = height + margin
盒子總寬 = width + margin

通過box-sizing屬性，默認content-box為標(biāo)準(zhǔn)盒模型，border-box為怪異盒模型
https://github.com/febobo/web-interview