1、CSS3的盒子模型；

答案：標準盒模型（box-sizing:content-box）、怪異盒模型(box-sizing:border-box)、flex彈性伸縮盒模型、column多列布局盒模型；

2、盒子水平和垂直居中5大方案；

方法一：position 定位（適用于子盒子有寬度和高度的時候）

.parent {
    positon:relative;
}
.child {
    positiong: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

方法二：position + transform（子盒子有或沒有寬高的時候都適用）

缺點：兼容性不是很好；

方法三：flex 布局（子盒子有或沒有寬高的時候都適用）

方法四：table-cell（父元素得有固定寬高，子盒子有或沒有寬高的時候都適用）

.parent {
display: table-cell;
vertical-align:middle;
text-align:center;
}
.box {
display:inline-block;
}

方法五：（子盒子有寬高的時候都適用）

總結：position（margin、transform）、flex、table-cell、js算寬高。

3、掌握幾大經典的布局方案？

答案：圣杯布局、雙飛翼布局；
圣杯布局：一個容器里面包含左中右；

<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

雙飛翼布局：左右不分不屬于container本身，拿出來放在后面

<div id="container">
    <div id="center"></div>
</div>
<div id="left"></div>
<div id="right"></div>

常見思路：左右固定，中間自適應（實現思路：float結合margin、flex布局、position定位）；

4、移動端響應式布局開發的三大方案？

答案：media、rem、flex、vh/vw、...

• media：經常應用于PC端和移動端使用一套布局，不同的寬度使用不同的布局，針對一些不是非常復雜的項目；
• rem：PC端和移動端使用兩套完全不一樣的布局，此時移動端就使用rem，例如某寶、某商城等等項目；
• flex：用于關注視圖結構；
• vh/vw：視口分為100份，1vh為100份之一；

5、什么是標簽語義化，有哪些標簽？

答案：合理的標簽做合適的事情，標簽可分為：塊級標簽，行內標簽，行內塊標簽，區別如下：
1、塊級元素：獨占一行，對寬高的屬性值生效；如果不給寬度，塊級元素就默認為瀏覽器的寬度，即就是100%寬，如：p、div、ul、ol、li、dl、dt、dd、h1~h6、form；；
2、行內元素：可多個標簽存在一行，對寬高屬性值不生效，完全靠內容撐開寬高，如：a、span、em、strong、b、i、u、label、br；
3、行內塊元素：結合的行內和塊級的優點，不僅可以對寬高屬性值生效，還可以多個標簽存在一行顯示；

各種標簽之間的轉換
1、塊級標簽轉換為行內標簽：display:inline;
2、行內標簽轉換為塊級標簽：display:block;
3、轉換為行內塊標簽：display：inline-block;