HTML篇
1.HTML 中的语义化标签
- 是什么：语义化标签是一种写 HTML 标签的方法论/方式。
- 怎么做：实现方法是遇到标题就用 h1 到 h6，遇到段落用 p，遇到文章用 article，主要内容用 main，边栏用 aside，导航用 nav……（就是找到中文对应的英文）
- 解决了什么问题：明确了 HTML 的书写规范
- 优点是：一、适合搜索引擎检索；二、适合人类阅读，利于团队维护。
- 缺点是：没有。
- 怎么解决缺点：无需解决。
2.HTML5 有哪些新标签？
!!不要提自己不熟悉的标签。
文章相关：header main footer nav section article figure mark
多媒体相关：video audio svg canvas
表单相关：type=email type=tel
3.Canvas 和 SVG 的区别是什么？
答题思路为：先说一，再说二，再说相同点，最后说不同点。
- Canvas 主要是用笔刷来绘制 2D 图形的。
- SVG 主要是用标签来绘制不规则矢量图的。
- 相同点：都是主要用来画 2D 图形的。
- 不同点：Canvas 画的是位图，SVG 画的是矢量图。
- 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
- 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。
CSS篇
1.BFC 是什么
答题思路「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」
是什么：避免回答，直接把 BFC 翻译成中文「块级格式化上下文」即可，千万别解释。
怎么做：背诵 BFC 触发条件，虽然 MDN 的这篇文章 列举了所有触发条件，但只用背这几个就行了
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块 inline block 元素
- overflow 值不为 visible 的块元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
解决了什么问题：
- 清除浮动（为什么不用 .clearfix 呢？）
- 防止 margin 合并
- 某些古老的布局方式会用到（已过时）
2.如何实现垂直居中？
七种方式实现垂直居中
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
忠告：能不写 height 就千万别写 height。
- table自带功能。这个可能不会被面试官认可。那就用第3个。
- 100% 高度的 afrer before 加上 inline block这个方法还有一个优化版本。这个方法很难。
- div 装成 table。class=table，td,tr，然后用display:table，display:table-cell,vertical-align:middle
- margin-top -50%。绝对定位，然后距离上或下，左或右50%，然后配合负margin。适合父元素高度写死的。
- translate -50%。与上一条类似，不过有
transform:translate(-50%,-50%)代替了负margin。 - absolute margin auto
- flex 可能还有其他方法，待查。
3.CSS 选择器优先级如何确定？
可以记下这三句话：
- 选择器越具体，其优先级越高
- 相同优先级，出现在后面的，覆盖前面的
- 属性后面加 !important 的优先级最高，但是要少用
4.如何清除浮动？
方法一，给父元素加上 .clearfix
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
方法二，给父元素加上 overflow:hidden。
5.两种盒模型（box-sizing）的区别？
第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为
实际宽度 = width + padding + border
第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为
实际宽度 = width
相同点是都是用来指定宽度的，不同点是 border-box 更好用。
