👩 个人主页:不爱吃糖的程序媛
🙋♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀!
✨系列专栏:前端面试宝典、JavaScript进阶、vue实战
📢 资料领取:前端进阶资料以及文中源码可以在🎈公众号【不爱吃糖的程序媛】领取
前端面试基础知识题
1. CSSOM树和DOM树是同时解析的吗?
浏览器会下载HTML解析页面生成DOM树,遇到CSS标签就开始解析CSS,这个过程不会阻塞,但是如果遇到了JS脚本,此时假如CSSOM还没有构建完,需要等待CSSOM构建完,再去执行JS脚本,然后再执行DOM解析,此时会阻塞。
2. 行内元素和块级元素有什么区别?
定义
行内元素:没有宽高不能换行,不可以改变宽高。
块级元素:有宽高能换行,可以改变宽高。
区别
1、默认情况下,行内元素不会以新的一行开始,而块级元素会新起一行。
2、块级元素可以设置 width, height属性,注意:块级元素即使设置了宽度,仍然是独占一行的。
而行内元素设置width, height无效。
3、块级元素可以设置margin 和 padding。
4、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(也就是水平方向有效,竖直方向无效)
5、设置居中。
行内元素想要设置水平居中,只需要text-align属性即可。 这里设置的text-align是设置在外层的div当中,评论区有提到,因为上面讲了行内元素设置宽高是无效的,所以我们需要的居中其实是将块级元素当中的行内元素居中。
常见的行内元素和块级元素
3. display 有哪些取值?
display 属性可以设置元素的内部和外部显示类型。
- 元素的外部显示类型将决定该元素在流式布局中的表现(块级或内联元素);
- 元素的内部显示类型可以控制其子元素的布局(例如:flow layout,grid 或 flex)。
以下是一些关于display比较常用的属性值:
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请求,从而大大的提高页面的性能。