17条前端面试题总结

最新推荐文章于 2024-10-16 16:26:58 发布

隐冬

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量1.3k

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/xuzhijia1991/article/details/113994934

版权

本文总结了17个前端面试常考知识点，包括margin、HTML语义化、块级和内联元素的区别、BFC原理、flex布局、line-height继承、rem单位、vw/vh的使用、typeof操作、深拷贝实现、原型与原型链、闭包、this指针的解析、for...of循环、EventLoop机制以及其与DOM渲染的关系，深入浅出地阐述了这些概念和技巧。

摘要由CSDN通过智能技术生成

1. margin

margin-top为负，元素向上移动

margin-left为负，元素向左移动

margin-right为负，布局单元向左，元素自身不动，后面元素向左。

margin-bottom为负，布局单元上移，自身元素展示不变。下面元素向上。

2. 什么是HTML语义化

html众多的标签中每一种标签都会代表一种单独的意思，比如h1-h6表示标题，ul和ol表示列表，p标签表示段落，strong标签表示强调。a标签表示超链接，img标签表示媒体图片。

每一种标签都有自己的一种意思，html是给计算机浏览器看得，在一个页面中每个部分要表示的意思我们需要通过对应的标签来告诉浏览器。这样更加方便浏览器理解我们网站的构造方便SEO(搜索引擎抓取网站的主要内容)。同时语义化标签也可以让其他人看懂你的布局结构。

3. 块级元素和内联元素

块级元素会独占一行，常见的有display属性为block和table的元素，比如div,p,table,ul,ol。

内联元素一般不会独占一行，如果空间足够会一直向后追加直到外层的宽度包容不下的时候才会换行。常见的有display属性为inline和inline-block的元素，比如span,img, input, button,a等。

4.BFC

BFC全称是块级格式化上下文，这东西面试的时候很多人也喜欢问，网上解释他的文章一搜一大堆，但就是说不到点子上饶了很大一圈反而更加让人云里雾里的。

其实BFC理解起来特别简单，我们都知道对于html的布局来说有Block，inline，inline-block等。BFC的全称就是Block format context，与之对应的还有Inline format context简称IFC，Inline-Block format context简称IBFC。

BFC要说明的就是在一个独立的渲染区域内，这块区域内部的元素的渲染不会影响外部的元素。举个例子来说，比如一个div元素，假如他触发了BFC布局，那么它里面的元素如何布局都不会影响到这个div以外的元素布局。如果没有触发BFC如果div里面的内容太多会将div外侧的其他元素推开，如果触发了BFC那么div里面的元素即使多也不会改变div外部元素的布局。就是这个意思。

一般形成BFC的条件也很简单，比如说脱离了文档流或者限制了布局大小。比如float不为none，也就是元素设置了浮动，我们都知道浮动基本会离开原本的文档流，那么内部的元素无论如何变化都不在这个文档流中，也就影响不到文档中的其他元素。

元素设置了绝对定位和固定定位也会触发BFC，原因也是脱离了文档流。

元素设置了overflow不为visible会触发BFC，因为固定了大小，内部的变化都控制在了内部。元素设置了dispaly为flex或者inline-block也会触发BFC。

5. flex常用布局

1.flex-direction布局方向，横向还是纵向

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

row水平现实，flex-direction的默认值

row-reverse与row相同，但是以相反的顺序

column垂直显示

column-reverse与column相同，但是以相反的顺序

2.justify-content对齐方向

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

flex-start默认值。位于容器的开头

flex-end位于容器的结尾

center位于容器的中心

space-between位于各行之间留有空白的容器内

space-around位于各行之前、之间、之后都留有空白

3.align-items交叉对齐方式

交叉对齐也就是如果flex-direction是横向align-items就是纵向，如果flex-direction是纵向align-items就是横向。

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

stretch默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制

center元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

flex-start元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

4.flex-wrap换行设置

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap默认值。不拆行或不拆列。

wrap在必要的时候拆行或拆列。

wrap-reverse在必要的时候拆行或拆列，但是以相反的顺序。

5.align-self子元素交叉对齐方式

align-self与align-items的区别是，align-self是对子元素进行设置，align-items是对父元素进行设置。虽然他俩的效果都是针对子元素，但是align-self更加灵活，可以针对每个子元素做不同的设置，align-items只能设置所有子元素。

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

auto默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

stretch元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-start元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

baseline元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

6. line-height继承问题

当父级的line-height设置为具体数值的时候，则子元素集成的就是该数值。

body {
   
    line-height: 24px;
    font-size: 15px;
}
p {
   
    font-size: 10px;
}

当父级的line-height设置的是比例的时候，子元素集成的就是比例。真实的值是比例乘以自己的font-size大小。假如自己的font-size为10px,继承的line-height就是2*10，20px。

body {
   
    line-height: 2;
    font-size: 15px;
}
p {
   
    font-size: 10px;
}

当父级的line-height设置的是百分比的时候，子元素集成的是百分比乘以父级font-size的值。假如父级的font-size为15px,继承的line-height就是200%*15px，30px。

7. rem

对于移动端高速发展的今天，rem早已经不是一个陌生的概念。和px，em相同他是我们css布局的一个数值单位。

em是当前标签font-size的倍数。比如如果我们高度设置2em，font-size设置为10px。那么实际高度就是2*10，20px。

p {
   
    height: 2em;
    font-size: 10px;
}

rem和em类似，不同的是rem的值取决于根元素，也就是html元素的font-size。

html {
   
    font-size: 10px;
}
p {
   
    height: 2rem;
    font-size: 1.5rem;
}

所以我们可以通过rem布局来实现页面的响应式布局，做法也很简单，不同的手机根据屏幕大小来设置对应的html元素的font-size, 页面其他元素的布局都采用rem。这样针对于不同的手机屏幕页面内容展示也会进行相应的缩放。以适应整个屏幕。

8. vw/vh

rem并不是响应式布局的最终解决方案，它本身存在一些问题，上面我们说了rem的值是根据html根元素的font-size值来决定的，根元素的font-size值到底应该设置多少呢？这里我们并不知道。一般的实现方式有两种，一种是通过js获取到页面的宽度进行动态设置，但是我们知道，js的加载一般都是在css之后的，这就会导致页面发生重新渲染。另一种方式是借助media媒体查询，针对不同的宽度设置不同的font-size。但是media是需要列举出来的，也就是所有的情况都要列出来，很不方便。

方式1根据屏幕宽度计算。

var windowWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = windowWidth / 7.5 + 'px';

方式2,每种方式都需要列出来。

@media screen and (min-width: 320px) {
   
    html{
   
        font-size:50px;
    }
}
@media screen and (min-width: 360px) {
   
    html{
   
        font-size:56.25px;
    }
}