简单的概念，想精准地表达出来也是需要技巧的。暂且梳理一下最最高频的html和css面试题吧。
什么是HTML的语义化标签？
- 是什么？是一种书写html的方法，明确了html书写规范。
- 怎么做？根据具体内容选择对应的标签，如标题选择h1到h6，段落选择p，文章选择article等。
- 优点是？第一，seo友好。第二，适合人类阅读，方便维护。
HTML5有哪些新标签？
- 文章相关：header / main / footer / nav / section / article / figure / mark
- 多媒体相关： video / audio / svg / canvas
- 表单相关：type=email / type=tel
这一题推荐只说自己熟悉使用的标签，因为很可能会遇到追问。
Canvas和SVG的区别是什么？
Canvas是用笔刷来绘制2d图形，画的是位图。
SVG主要是用标签来绘制不规则矢量图的。
SVG节点过多时渲染慢，Canvas性能好一些但写起来复杂。
SVG支持分层和事件，Canvas不支持（但可以通过库实现）。
BFC是什么？
Block Formatting Context即块级格式化上下文。最好通过举例的方式来侧面回答。
触发条件有很多，如：
- 浮动元素（float不为none）
- 绝对定位元素（position为absolute或fixed）
- inline-block元素
- overflow的值不为visible
- 弹性元素（display位flex或inline-flex的直接子元素）
解决了什么问题：
- 清除浮动
- 防止垂直方向的margin合并
- （一些古老过时的布局方式）
如何实现垂直居中？
- flex
- absolute配合margin: auto
- transition: -50%
- margin-top: -50%
- table-cell自带功能（但table布局不灵活，不推荐）
- 把div包装成table（在table-cell加上vertical-align: middle）
- display: inline-block配合vertical-align: middle
如何清除浮动？
方法一：给父元素加上.clearfix
.clearfix:after {
content: '';
display: block; // or table
clear: both;
}
方法二：使用bfc。给父元素加上overflow: hidden
两种盒模型的区别
content-box，指width指定区域为content的宽度，实际宽度=width+padding+border。 border-box，指width指定区域位包括border在内的左右边距，实际宽度=width
