什么是“渐进增强”和“优雅降级”？
-
渐进增强
答案
先针对低版本浏览器构建页面，保证最基本的功能，然后再针对高版本浏览器进行功能的追加，交互的改进等，以达到更好的用户体验。
-
优雅降级
答案
先针对高版本的浏览器构建完整的页面，然后再针对低版本的浏览器兼容处理。
HTML顶部的<!DOCTYPE>的作用是什么？
-
作用
答案
它位于HTML文档中的第一行，用于告知浏览器应该用什么文档标准来解析这个文档。在HTML5中，我们只需要这样写就可以了：
<!DOCTYPE>
说一说HTML语义化？
-
语义化
答案
HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer
- HTML语义化可以提高代码的可读性，便于开发调试和后期维护。
- 搜索引擎通过HTML标签来识别页面的结构，HTML语义化可以更好地实现搜索引擎优化（即SEO）
加分项：HTML5语义化标签并没有广泛使用，例如淘宝、京东。原因可能为HTML5语义化标签的兼容性，为了确保网站在各种浏览器上正常显示，开发者可能更倾向于使用传统的div和span等标签；可能为许多现有的网站和应用程序使用传统的标签结构，将它们迁移到HTML5语义化标签可能需要大量的工作和修改。
块级元素有哪些？行内元素有哪些？空元素有哪些？
-
概念
答案
其中，空元素就是我们所说的自闭合元素。
- 块级元素：div、p、ul、ol、h1~h6等
- 行内元素：strong、em、span、a等
- 空元素：meta、link、hr、br、img、input等
label元素的作用是什么？具体是怎么使用的？
-
概念
答案
label 元素用于将某个表单元素和某段说明文字关联起来，它主要有两个方面的作用。
- 从语义上绑定了label元素和表单元素。
- 增强了鼠标可用性，使得我们单击label中的文本时，其所关联的表单元素也会获得焦点。
说一下h1与title、strong与b、em与i，3组标签之间的区别
-
h1与title
答案
title定义的是地址栏的标题，h1表示的是文章的标题。
-
strong与b
答案
strong是一个有语义的标签，用来加粗文本，带有强调的语义，搜索引擎会赋予一定的权重。
b是一个无语义的标签，仅仅用来加粗文本。
为了HTML语义化，我们应该使用strong，而不是b。
-
em与i
答案
em是一个有语义的标签，使得文本变成斜体，带有强调的语义，搜索引擎会赋予一定的权重。
i是一个无语义的标签，仅仅使得文本变成斜体。
为了HTML语义化，我们应该使用em，而不是i。
img标签中的alt和title这两个属性有什么区别？
-
概念
答案
- alt属性用于描述图片，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
- title属性也是用于描述图片的，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，图片会显示title中的文字。
页面导入样式时，使用 link 和使用 @import 有什么区别呢？
-
概念
答案
- 页面代码是从上到下进行渲染的，如果使用link方式，会先加载 CSS 后加载 HTML 。
- 如果使用 @import 方式，会先加载 HTML 后加载 CSS 。
- 如果 HTML 在 CSS 之前加载，页面用户体验就会非常差，因此一般情况下，我们只会用 link 方式，而不是 @import 方式。
哪些 CSS 属性可以继承，哪些可以不继承？请列举几个。
-
概念
答案
- 可以继承的属性：font-family、font-size、font-weight、color等。
- 不可继承的属性：width、height、padding、margin、border等。
为什么要初始化 CSS 样式？
-
原因
答案
- 不同的浏览器中，有些标签的默认样式是不一样的。如果没有对 CSS 进行初始化，往往会出现浏览器之间的页面显示差异。
- 初始化 CSS 样式，可以让 HTML 元素具有相同的初始样式，然后再对元素进行统一定义，这样就可以让页面在不同的浏览器中产生相同的结果。
简述一下 src 和 href 的区别
-
区别
答案
- src 是 source 的缩写，表示来源地址，在img、script、iframe等元素上使用。src引入的内容，会插入到当前元素的位置，它是页面必不可少的内容。
- href 是 Hypertext Reference 的缩写，表示超文本引用，在a、link 等元素上使用。href 引入的内容，并不会插入到当前元素的位置，仅仅表示在当前文档和引用资源之间建立联系。
请详细说一下 inline 元素和 inline-block 元素的区别。（不需要说相同点）
-
区别
答案
- inline 元素无法定义宽度和高度，但是 inline-block 元素可以。
- inline 元素（img，input）只能定义 margin-left 和 margin-right，不能定义 margin-top 和 margin-bottom，而 inline-block 元素可以定义4个方向的 margin。
display:none 和 visibility:hidden 二者有什么区别？
-
区别
答案
- display:none 的元素被隐藏之后，不占据原来的位置。visibility:hidden 的元素被隐藏之后，还会占据原来的位置。
- 从搜索引擎优化的角度来看，display:none 隐藏的内容是不会纳入权重的考虑范围内的。
inline-block 元素之间产生空隙的原因是什么？怎么去除空隙？
-
原因
答案
- 产生原因：HTML 代码中的换行、空格、Tab 等空白符，在字体大小不为0的情况下，会占据一定宽度，因此使用 inline-block 会产生一定的空隙。
- 解决方法：为父元素定义 font-size: 0
使用纯 CSS 来实现一个三角形的原理是什么？
-
原理
答案
- 元素的宽度和高度都定义为0
- border 设置得足够大
- 使用 transparent 值把 3 个方向的边框隐藏掉。
div { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: red transparent transparent transparent }
清除浮动都有哪些方式？每个方式都有哪些优缺点？
-
方式
答案
常见的清除浮动的方式有3种：clear:both、overflow:hidden、::after 伪元素
-
clear:both
这种方式需要多增加一个无意义的标签。
-
overflow:hidden
这种方式虽然不会增加多余的标签，但是会隐藏超出父元素的内容部分。
-
::after 伪元素
这种方式不会增加无意义的标签，也不会隐藏超出父元素的内容部分。
.clearfix::after { clear:both; content:''; display:block; height:0; visibility:hidden; }
-
如何实现块元素的水平居中和垂直居中？如何实现行内元素的水平居中和垂直居中？
详见：CSS水平垂直居中详解 | QT-7274 (qblog.top)
如何实现两栏布局？
详见：CSS中的布局汇总 | QT-7274 (qblog.top)
如何实现三栏布局？(至少说三种)
详见：CSS中的布局汇总 | QT-7274 (qblog.top)
如何创建一个新的BFC
-
概念
答案
如果一个元素具备以下任何条件，则该元素都会创建一个新的BFC。
- float 的值不为 none。
- position 的值不是 static 和 relative。
- overflow 的值不是 visible。
- display 的值为inline-block、table-cell、table-caption 中的任意一个。
BFC 都有什么特点？简单说一下。
-
特点
答案
BFC 有以下6个方面的特点（尽量多回答）。
- 在一个BFC内部，盒子会在垂直方向上一个接一个排列。
- 在一个BFC内部，相邻的 margin-top 和 margin-bottom 会叠加。
- 在一个BFC内部，每一个元素的左外边界会紧贴着包含盒子的容器的左边，即使是浮动元素也是如此。
- 在一个BFC内部，如果存在内容元素是一个新的 BFC ，并且存在内部元素是浮动元素，则该 BFC 的区域不会与 float 元素的区域重叠。
- BFC 就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响外面的元素。
- 计算一个 BFC 的高度时，其内部浮动元素的高度也会参与计算。
为什么一般推荐将 CSS 中的link放置在 head 之间，而将 JavaScript 中的script放置在body之前？你知道有哪些例外吗？
-
原因
