常见浏览器内核：

- IE：（IE内核，Trident）
- 谷歌：blink
- 苹果（Safari）：Webkit
- 火狐：Gecko

盒子模型

标准盒模型：width + margin + border + padding  盒子宽度指这些相加
怪异盒模型： width+padding+border被视为content之内即设置的宽度
box-sizing：content-box //标准盒模型 
box-sizing：border-box //怪异盒模型

浏览器解析的时候，行内块之间出现空白原因？如何消除？

- 原因：浏览器会将空白字符（空格，tab，换行）解析成一个空格导致的；
- 解决办法：
    - 给父元素设font-size:0,子元素设font-size;
    - 把行内块变成块级，用display:flex；

margin-top的穿透问题：

原因：内部元素是块，给该元素设置margin-top的时候，会穿透父元素（相当于将margin-top作用到父元素身上）

解决办法（3种）：
    1.将子元素的margin-top由父元素的padding-top替代；
    2.给父元素设置边框；
    3.给父元素添加overflow：hidden；

清除浮动的方法：

- 定高法：将高度写死（适用于高度不变的地方）
- 给父元素添加overflow：hidden;溢出隐藏
- 额外标签法：给浮动元素的最后添加一个块元素，给块元素添加样式clear：both；
- 伪元素法： .clearfix:after{content:'';display:block;clear:both;visibility:hidden;height:0;}
- 双伪元素法：.clearfix:after,.clearfix:before{content:'';display:table;} .clearfix:after{clear:both;}

display:none和visibility：hidden的区别：

display:none 隐藏不占位置
visibility:hidden 隐藏占位置

水平垂直居中的几种方法：

flex布局方法

display: flex; 
justify-content: center;
align-items: center;

网格居中法

display:grid;
margin:auto;

行内块居中

display:inline-block;
line-height:xxx;
text-align:center;

块级居中

display:block;
margin:auto;

html5的优点

有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 
方便其他设备解析，如盲人阅读器根据语义渲染网页 
有利于用户阅读，开发和维护，语义化更具可读性，代码更好维护