其他类型的常见面试题：

• 常见 HTML 和 CSS 面试题
• 常见 JS 面试题
• 常见 Vue 面试题
• 常见性能相关面试题
• 常见大前端相关面试题

1. 行内元素有哪些？块级元素有那些？行级块元素有哪些？

行内元素：span，a，input，select 等表单相关，button

块级元素：div，p，ul，li，h1-h6

行级块元素：img

2. 行内元素和块级元素有什么区别？

块元素一个块占一行

行内元素不能设置宽高，纵向的 padding，margin 等也失效

3. 页面导入样式时，使用 link 和@import 有什么区别？

link 是 html 的标签，除了可以加载 css，还能定义 rel 等加载别的东西。link 在解析 html 的时候就并行加载了。

@import 是 css 的语法，他并不能在解析 html 的时候并行加载，是在 css 拉下来后执行 css 的时候由 css 去请求。古董浏览器还有些兼容问题

4. 介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

1. chrome 的 webkit（现在是 blink）
2. firefox 的 gecko
3. ie 的 trident
4. safari 的 webkit（blink）

5. iframe 有那些缺点？

1. 阻塞页面解析
2. 安全上可能有问题，iframe 能发起请求

6. 页面可见性（Page Visibility API）可以有哪些用途？

比如页面不可见的时候，暂停视频，音乐等

7. display: none; 与 visibility: hidden; 的区别

display: none 会把节点从渲染树上移除

visibility: hidden 仅仅是让元素不可见，宽高布局还是在的

8. 什么是外边距重叠（margin-collapse）？ 重叠的结果是什么？

在同一个 BFC（块级格式上下文）中的元素叠在一起时，两个元素的上下边距会合并，取消 BFC 就能解决这个问题:

1. float
2. overflow 的值不为 visible
3. display: inline-block
4. position 的值为 absolute 或 fixed

9. 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

CSS 标准的盒模型是 W3C 的盒模型，元素的宽度和高度只由内容本身决定，不包括 margin，padding，border 的宽度

IE 盒模型也称为怪异盒模型，元素的宽度和高度有内容本身 + padding + border 的综合宽度决定

IE 盒模型在响应式页面（比如 h5）开发中特别好用，因为 width/height 直接决定了内容本身 + padding + border 的宽高，这本来就是自适应的

通过 box-sizing: border-box 来启用 IE 盒模型

10. CSS 哪些属性可以继承？

1. 字体样式相关的属性，如 font-size，font-width，color 等
2. opacity 透明度可继承
3. 文本相关属性，如 line-height，text-align，word-spacing 等

11. CSS 优先级算法如何计算？

每个匹配符都有他自己的权重，CSS 的优先级按权重相加来排序

匹配符	优先级权重
*	1
.	10
#	100
!important	最高

12. 用纯 CSS 创建一个三角形的原理是什么？

利用 border，三边无色，一边有色

13. li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

inline-block 元素没有写在同一行，就会导致有间隙。可以让 inline-block 的元素写在同一行，或者让 font-size 为 0 解决这个问题

14. 什么是 bfc，怎样产生 bfc

BFC(Block formatting context)直译为"块级格式化上下文"

简单来说 BFC 就是一个独立的布局空间，空间内的元素与空间外的元素互不相干。常说的的“脱离文档流”其实就是创建了一个 BFC 空间

产生 BFC 的条件：

1. float
2. display 为 inline-block
3. position 为 position 或者 fixed
4. overflow 为非 visible 的值

不同 BFC 的 margin 不会重叠，可以利用这个特性防止外边距重叠

15. display:inline-block 什么时候会显示间隙？

当 inline-block 元素不在同一行的时候，就会有间隙。可以用font-size: 0或者写在同一行来解决这个问题

16. rgba() 和 opacity 的透明效果有什么不同？

rgba 不能继承，opacity 会继承给子元素

17. 请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景？

flexbox 就是自适应布局，常用来做移动端或者需要自适应的布局

父元素 display: flex 将开启 flexbox，可以选择横向定位也可以选择纵向定位，可以选择等分布局，居中等

18. 如何实现等高布局

flexbox，纵轴拉伸即可align-item: stretch

19. px，em，rem，vw 有什么区别？

1. px 是物理像素，1 像素就是 1px
2. em 是当前元素相对长度单位。它相对于当前元素 font-size 的大小

举例来说，如果当前元素的字体是 20px，那么当前元素中的 1em 就等于 20px。

1. rem 是根元素相对长度单位。它相对于根元素（html）的 font-size 大小

举例来说，如果 html 的字体是 20px，那么文档中元素的 1rem 就等于 20px。

1. vw 是屏幕宽度的相对长度单位。1vw = 1/100 screenWidth
   > 举例来说，如果屏幕宽度是 1000px，那么 1vw 就是 10px，这是根据屏幕物理宽度定位的

20. 列举 2 种清除浮动的方式

浮动就是让元素脱离当前文档流（和兄弟元素分离），直到碰到父元素或者碰到其他浮动元素为止

在 inline-block 出来之前，float 经常拿来实现行内块元素的效果

但是 float 会让父级元素高度坍塌，需要清除浮动恢复父级元素的高度：

1. 给父元素的伪元素加上clear: both和display: block
2. 给父元素设置overflow: hidden使其父元素开启 BFC

21. 列出 3 个 CSS 优化、提高性能的方法

1. 不要用内联样式，分离出样式表
2. 合并样式表，避免发起多个 http 请求
3. 合并 css 类，嵌套层级不要太深

22. 浏览器是怎样解析 CSS 选择器的？

1. 根据优先级覆盖，展示权重最大的样式
2. 同优先级，则根据 css 表中代码顺序展示，后面的样式覆盖前面的样式

23. 元素竖向的百分比设定是相对于容器的高度吗？

相对于父元素高度

24. a 标签上四个伪类的执行顺序是怎么样的？

lvha:

link -> visited -> hover -> active