HTML

讲讲 HTML 中的语义化标签

• 语义化标签是一种写 HTML 标签的方法论，语义指的是一段代码的含义。
• 实现方法是就遇到标题就用 h1 到 h6，遇到段落用 p，遇到文章用 article，主要内容用 main，边栏用 aside，导航用 nav……
• 它明确了 HTML 的书写规范
• 优点是：一、适合搜索引擎检索；二、适合人类阅读，利于团队维护。

HTML 5 有哪些新标签？

• 文章相关：header footer nav section article figure
• 多媒体相关：video audio svg canvas
• 表单相关：type=email type=tel

Canvas 和 SVG 的区别是什么？

• Canvas 主要是用笔刷来绘制 2D 图形的。
• SVG 主要是用标签来绘制不规则矢量图的。
• 相同点：都是主要用来画 2D 图形的。
• 不同点：Canvas 画的是位图，SVG 画的是矢量图。
• 不同点：SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂。
• 不同点：SVG 支持分层和事件，Canvas 不支持，但是可以用库实现。

CSS

BFC 是什么？

块级格式化上下文

如何实现：

• 浮动元素，float 除 none 以外的值
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• display 为以下其中之一的值 inline-block，table-cell，table-caption
• overflow 除了 visible 以外的值（hidden，auto，scroll）
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• HTML 根元素

解决了什么问题：

• 清除浮动（.clearfix 更好用）
• 防止 margin 合并
• 某些古老的布局方式会用到（已过时）

有副作用，解决方法是使用最新的 display: flow-root 来触发 BFC。

CSS 实现水平垂直居中方法

// flex 方案

.parentElement {
  display: flex;
  justify-content: center;
  align-items: center;
}

// grid 方案

.parentElement {
  display: grid;
}
 
.childElement {
  align-self: center;
  justify-self: center;
}

// transform 方案

.childElement {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

选择器优先级如何确定？

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

!important > 行内样式 > ID 选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性

• 选择器越具体，其优先级越高
• 相同优先级，出现在后面的，覆盖前面的
• 属性后面加 !important 的优先级最高，但是要少用

如何清除浮动？

// after 伪类清浮动

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
 .clearfix{
    zoom:1}

两种盒模型（box-sizing）的区别？

第一种盒模型是标准盒模型 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为：实际宽度 = width + padding + border

第二种盒模型是IE盒模型 border-box，即 width 指定的是左右边框外侧的距离，公式为：实际宽度 = width

相同点是都是用来指定宽度的，不同点是 border-box 更好用。