前端面试基础知识题

1. CSSOM树和DOM树是同时解析的吗？

浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。

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

什么是行内元素？什么是块级元素

这里是MDN的定义：

根据定义，一个行内元素只占据它对应标签的边框所包含的空间。
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
怎么理解这句话呢，比如拿我们最常见的<span>标签（行内元素）和<div>标签（块级元素）来举例

1<span style="background-color: #1e7e34">行内元素</span>
2<div style="background-color: #bbb">块级元素</div>

运行之后可以看到，行内元素只占据内容撑起来的区域，而块级元素占据了一整行的区域，

行内元素和块级元素的区别

1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
这个我们在定义那里就已经实践看过了。
比如我们增多几个标签，

<span style="background-color: #1e7e34">行内元素</span>
<span style="background-color: #1e7e34">行内元素</span>
<span style="background-color: #1e7e34">行内元素</span>
<div style="background-color: #bbb">块级元素</div>
<div style="background-color: #bbb">块级元素</div>
<div style="background-color: #bbb">块级元素</div>

当行内元素在一行内排不下的时候才会换行，而且其宽度随着元素的内容而变化。块级元素的则宽度自动填满其父元素宽度。

2、块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。
而行内元素设置width, height无效。
我们通过这个例子来看：

<span style="background-color: #1e7e34;width: 200px;height: 100px;">行内元素</span>
<span style="background-color: #1e7e34;width: 200px;height: 100px;">行内元素</span>
<div style="background-color: #bbb;width: 200px;height: 100px;">块级元素</div>
<div style="background-color: #bbb;width: 200px;height: 100px;">块级元素</div>

3、块级元素可以设置margin 和 padding。
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）

<span style="background-color: #1e7e34;padding-top: 20px;">行内元素</span>
<div style="background-color: #bbb;padding-top: 20px;">块级元素</div>

效果：

剩下的属性自己试一试就能看出来了，这里就不多做演示。

4、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素
比如我们想在<span>标签内包含<div>标签是不被允许的。而在<div>标签中包含<span>标签是经常看到的。

5、设置居中。
行内元素想要设置水平居中，只需要text-align属性即可。这里设置的text-align是设置在外层的div当中，评论区有提到，因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。

div{
    text-align:center  /*div当中的行内元素均会水平居中*/ 
}

而块级元素想要设置水平居中，需要设置宽度为父容器宽度才能居中。

margin:0 auto; 
width:500px; /*块级元素父容器的宽度*/

行内元素设置垂直居中，设置外层行高为行内元素的高度即可。

height:30px; 
line-height:30px

而块级元素想要设置垂直居中，要先设置外层div的宽度，然后设置内层块级元素的样式。

margin:0 aut0;
height:30px;
line-height:30px

常见的行内元素和块级元素

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

3. display 有哪些取值？

display 属性可以设置元素的内部和外部显示类型。

元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）；
元素的内部显示类型可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

以下是一些关于display比较常用的属性值：

值	描述
none	元素不会显示
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）[IE6/7不支持]
inline-table	此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table	此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inherit	规定应该从父元素继承 display 属性的值。
grid	网格布局（Grid）是最强大的CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
flex	弹性布局，用来为盒状模型提供最大的灵活性。

从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类：外部值、内部值、列表值、属性、值显示、混合值、全局值

具体描述请点击此链接

4. 如何从html元素继承box-sizing？

在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。
如果不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;

5. 如何使用css来实现禁止移动端页面的左右划动手势？

CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。
最简单方法是：

html{
 touch-action: none;
 touch-action: pan-y;
}

还可以直接指定对应元素的宽度和overflow：

html{
 width: 100vw;
 overflow-x: hidden;
}

6. 如何检测浏览器所支持的最小字体大小？

可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。

7. css sprites是什么，怎么使用？

是什么

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点

其优点在于：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

缺点

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：

图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。

8. display:none与visibility:hidden 有什么区别？

表现上

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

性能上

使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

9. CSS中的 “flex:1;” 是什么意思？

flex 是 flex-grow, flex-shrink 和 flex-basis的简写。
除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

.item {flex: 0;}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 11 32px;}
.item {
    flex-grow: 11;
    flex-shrink: 1;
    flex-basis: 32px;
}

10. 什么是CSS Sprites？

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。

每天10个前端小知识 <Day 14>