[搞定一面] 快速搞定一面~技术面

iChangebaobao

已于 2024-03-11 13:38:32 修改

阅读量1.1k

点赞数 2

分类专栏：前端面试文章标签： js javascript 前端 css3

于 2021-02-23 12:01:05 首次发布

本文链接：https://blog.csdn.net/ichangebaobao/article/details/113978884

版权

本文详细梳理了前端面试中常见的HTML、CSS和JavaScript知识点，包括HTML语义化、CSS盒模型、BFC、浮动布局、Flex布局、响应式设计、CSS3动画、DOM操作、BOM以及JS基础模块等内容。重点介绍了BFC的概念、创建条件、应用，以及如何利用BFC解决CSS布局问题。此外，还涵盖了Vue和React的相关面试题，如组件通信、生命周期、虚拟DOM等，帮助读者快速准备前端面试。

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

快速搞定一面~技术面

一、HTML模块

如何理解HTML语义化

HTML语义化：HTML本身就是标记语言，根据内容的结构化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析

语义化的好处：

语义化增加代码可读性，便于团队开发和维护。

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

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

display ：block / table ;
有 div、h1、h2、table、ul、ol、p

dispaly ：inline-block / inline
有 span、img、input、button、

二、CSS模块

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

1. 盒模型宽度计算

box-sizing属性可以指定盒子模型种类

默认，W3C（标准盒模型）：box-sizing : content-box，width值不包括border和padding
IE盒子模型（怪异盒模型）：box-sizing : border-box，width值就包括了border和padding，即真实的 width变小了

总结：

一个元素的布局宽度，offsetWidth=（width+padding+border），无margin

请问 div 的offsetWidth是多大？

#div{
   
	width:100px;
	padding:10px;
	border:1px solid #ccc;
	margin:10px;
}

首先offsetWidth =（width+padding+border），无margin
所以offsetWidth = 100px+10px*2+1px*2=122px

在这里插入图片描述
如果要使offsetWidth 为100px，需要加上box-sizing：border-box；，这时中间的width由100px变成了78px

2. margin 纵向重叠问题

相邻元素的margin-top 和margin-bottom 会发生重叠
空白内容的<p></p>也会重叠

问AAA与BBB之间的距离？答案：15px 在这里插入图片描述

中间三个空的P标签不渲染，AAA的下边距15px，BBB的上边距为10px，两者重叠，取最大的15px

3. inline-block中的元素之间的空格是什么引起的？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式(默认是normal，空白会被浏览器忽略)，HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决办法:

删除元素之间的空白符 <div class="box1">box1</div><div class="box2">box2</div>
在父元素中设置font-size: 0，在子元素上重新设置正确的font-size
为inline-block元素添加样式float:left

4. margin 负值问题

margin-top 和 margin-left 负值，元素会向上、向左移动
margin-right 负值，其右侧元素会左移，自身不受影响。
margin-bottom 负值，其下方元素上移，自身不受影响。

5. BFC概念？如何使用？

BFC：Block formatting context ，块级格式化上下文，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器，它涉及两个概念：

Formatting context

属于 W3C CSS2.1 ，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

Block fomatting context (BFC)
Inline formatting context (IFC)

Box

Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。

block-level box：display:block|list-item|table，会生成 block-level box，并且参与 block fomatting context；
inline-level box：display:inline|inline-block|inline-table，会生成 inline-level box，并且参与 inline formatting context;
run-in box: css3中才有，这儿先不讲了

1. BFC的布局规则

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（margin-top、margin-bottom为什么会重叠）。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠（清除浮动）。
计算BFC的高度时，浮动元素也参与计算。

2. 如何创建BFC，形成BFC的条件

浮动元素，float除了none之外的值
绝对定位元素，position（absolute、fixed）
overflow 除了visible之外的值（hidden、auto、scroll）
display的值是inline-block、table-cell、flex、table-caption或者inline-flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC</title>
</head>
<style>
    *{
   
        margin: 0;
        padding: 0;
    }
    body {
   
        width: 100%;
        position: relative;
    }

    .left {
   
        width: 100px;
        height: 150px;
        float: left;  /* 1.设置浮动 */
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }

    .right {
   
        overflow: hidden;    /* 2.触发BFC */
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

3. BFC常见的应用

清除浮动，外层div设置overflow:hidden;
防止垂直 margin 上下重叠：给其中一个元素外面套上一个div，把这个div变成BFC
自适应两栏布局：侧边栏浮动，重要内容区域变成BFC

手写clearfix

.clearfix:after{
   
	content:'';
	display:table;
	clear:both; 
}

6. float布局

在这里插入图片描述

圣杯布局


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局实现</title>
  <style>
    #header{
   
      background-color: #fa1717;
      height:100px;
    } 
    .column{
   
      float: left;  /*第一步，设置左浮动*/
    }
    #left{
   
      background-color: #ee8037;
      width: 200px;
      height:100px;
      /* 第三步，利用margin-left: -100% 使得left与center在同一行 负值使left 向左移动100% */
      margin-left: -100%;
    }
    #right{
   
     /* 第四步，利用相对定位将right 移到右边*/
      position: relative;
      right: 150px;
      background-color: #377dee;
      width: 150px;
      height:100px;
      margin-right:-150px;
    }
    #center{
   
      background-color: #999;
      width: 100%;
      height:100px;
      text-align: center;
    }
    #footer{
   
      clear: both;  /* 第二步清除 footer的浮动 */
      background-color: palevioletred;
      height:100px;
    }
  </style>
</head>
<body>
  <div>
    <div id="header">  header</div>
    <div id="container">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
</html>

在这里插入图片描述

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    body{
   
      min-width: 500px;
    }
    .column{
   
      float: left;/* 第一步 设置浮动 */
    }
    #main{
   
      background-color: #999;
      width: 100%;
      height:200px;
    }
    #main-warp{
   
      /* 第二步，设置外边距 */
      margin: 0 200px 0 200px;
    }
    #left{
   
      background-color: #ee8037;
      width: 200px;
      height:200px;
      /* 第三步，设置margin-left,使左边放到main 的左边  */
      margin-left: -100%;
   }
    #right{
   
      width: 200px;
      height:200px;
      background-color: #377dee;
      /* 第四步，设置right到对应的位置 */
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <div>

    <div id="main" class="column">
      <div id="main-warp">main</div>
    </div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
</body>
</html>

在这里插入图片描述

7. flex 布局

flex-direction
justify-content
align-items
flex-warp
align-self

常见问题： flex:1 0 auto 代表什么？

flex: [ flex-grow ] [ flex-shrink ] [ flex-basis ]

flex-grow：定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main
size），浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

8. absolute、relative定位（子绝父相）

relative 相对定位，相对于自身定位
absolute 绝对定位，依据最近一层的定位元素定位

9. 使元素水平居中对齐

inline元素：text-align：center
block元素： margin:auto
absolute元素：left：50%；margin-left 负值（-宽度/2）

10.使元素垂直居中对齐

inline 元素：line-height 值 = height 值
absolute元素：top：50%；margin-top 负值（-高度/2）
absolute元素：transform:translate(-50%,-50%)
absolute元素：top、left、bottom、right=0 ; margin：auto

11. 让未知宽高的Div垂直水平居中

flex
transform
table-cell

父容器设置 display:flex;

display: flex; 
justify-content: space-around; 
align-items: center;

父容器设置 position: relative;，子容器如下

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

父容器设置dispaly:table-cell;

display: table-cell;
text-align: center;
vertical-align: middle;

子容器设置 vertical-align: middle;

12. line-height 继承问题

如下代码，p的行高将会是多少？

body{
   
	font-size:20px;
	line-height:200%;  
} 
p{
   
	font-size:16px;
}

答案是40px

line-height 为具体数值，如line-height：30px，则直接继承为30px

line-height 为比例时，如 line-height：1.5，则继承该比例，即16px1.5=24px ，用自身的字体大小比例

line-height 为百分比时，如line-height：200%，则继承父标签计算20px*200%=40px的结果

10. 响应式布局

px ：绝对长度单位
em：相对长度单位，相对于父元素
rem : 相对长度单位，相对于根元素（html），常用与响应式布局

1. 用 @media 和 rem 实现的

@media only screen and (max-width:374px){
    /**/ iphone 5 及更小尺寸
}

@media only screen and (min-width:375px) and (max-width:413px){
   
  /*iPhone 6、7、8 、iPhone  X*/
}
@media only screen and (min-width:414px) {
   
  /*iPhone 6P 或更大尺寸*/
}

rem 的弊端，“阶梯”性

2. 用vh\vw

先来看下三个概念

window.screen.height 手机屏幕高度，手机型号不同，高度不一致

window.innerHeight 可视窗口高度，去掉浏览器头尾，不同浏览器的header和footer不一致

document.body.height body 的高度，取决于整体内容的高度

vh 网页视口高度的1/100
vw 网页视口高度的1/100

vmax 取两者最大值，vmin 取两者最小值
当手机竖着，vmax为vh，vmin为vw
当手机横屏，vmax为vw，vmin为vh

div{
   
	width:10vmax;
	height:20vmin
}

11. CSS3 动画

/*  定义动画  */
@keyframes example{
   
	from {
   background-color:red}
	to {
   background-color:blue}
}

div{
   
	width:100px;
	height:100px;
	background-color:red;
	animation-name:example;
	animation-duration:4s;

}

animation 属性是一个简写属性，用于设置六个动画属性：
默认：animation :none 0 ease 0 1 normal

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

Vue中scoped原理? 怎么穿透scoped？

Vue在编译的时候通过在DOM元素以及css样式上加上唯一标记，实现样式私有化，不污染全局样式

穿透scoped：深度选择器

>>>
/deep/
::v-deep

12. DOM

1. DOM是什么？

DOM（document Object Model ）即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档，是HTML和XML文档的编程接口API

W3C（万维网联盟）把DOM标准分为三个部分:

核心 DOM，针对任何结构化文档的标准模型

XML DOM，针对XML文档的标准模型

HTML DOM，针对HTML文档的标准模型

2. DOM有什么用？

DOM把一份文档（HTML为例），表示为一棵树，文档是由各种节点构成的集合，而节点有不同的类型，常说的就是HTML DOM树，由不同的节点组成的，比如文档节点、元素节点、属性节点、文本节点、注释节点，DOM可以操作HTML中的元素

3. DOM基本功能?

查询某个元素，元素集合
查询某个元素的祖先、兄弟以及后代元素
获取、修改元素的属性
获取、修改元素的内容
创建、插入、删除元素

const div=document.getELementById('div')//获取元素
const divList=document.getElementsByTagName('div')//获取div元素列表
console.log(divList[0])

const pList=doument.querySelectorAll('p')//集合
const p1=pList[0];

//property 形式，对DOM元素的js变量进行修改，修改对象属性，不会体现在html结构中
p1.style.width='100px';//修改高度属性
console.log(p1.className)//获取class
p1.className='red';//修改 class 

//获取nodeName、nodeType
console.log(p1.nodeName)//获取nodeName ，打印 p
console.log(p1.nodeType)//获取nodeType , 打印 1

//attribute形式，对DOM节点属性进行修改，修改html属性，会改变html结构
p1.getAttribute('data-name')
p1.setAttribute('data-name','hh')
p1.getAttribute('style')
p1.setAttribute('style','font-size:30px')

两者都有可能引起DOM重新渲染

const newP=decument.createElement('p')// 创建元素
newP.innerHTML='this is newP'

div1.appendChild(newP)//插入节点

//移动现有的节点
const p1=document.getElementByID('P1')
div2.appendChild(p1)

//获取父元素
console.log(p1.parentNode)

//获取子元素列表
const div1ChildNodes=div1.childNodes;
const div1ChildNodesP=Array.prototype.slice.call(div1ChildNodes).filter(child=>{
   
	if(child.nodeType===1){
   
		return true
	}
	return fasle
})

console.log(div1ChildNodesP)

const child=document.getElementById('div1').childNodes
div1.removeChild(child[0])//删除节点

4. DOM与JS的关系

使用JS对网页进行的操作，是通过DOM来进行的

5. 优化DOM渲染

DOM查询做缓存 (const div=document.getElementById('mydiv'))
将频繁操作改为一次性操作（appendChild）

13. BOM

http://c.biancheng.net/js/bom/

1. 什么是BOM？

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

window：客户端 JavaScript 顶层对象。每当 <body> 或 <frameset> 标签出现时，window 对象就会被自动创建。
navigator：包含客户端有关浏览器信息。
screen：包含客户端屏幕的信息。
history：包含浏览器窗口访问过的 URL 信息。
location：包含当前网页文档的 URL 信息。
document：包含整个 HTML 文档，可被用来访问文档内容及其所有页面元素

2. Window对象

所有浏览器都支持 window 对象，它表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
全局变量是 window 对象的属性，全局函数是 window 对象的方法，甚至 HTML DOM 的 document 也是 window 对象的属性之一

window尺寸

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

3. navigator对象

navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。

navigator.userAgent

BOM 在 navigator 对象中定义了 userAgent 属性，利用该属性可以捕获客户端 user-agent 字符串信息。

var s = window.navigator.userAgent; 
// var s = navigator.userAgent;//简写方法

console.log(s); //返回类似信息：Mozilla/5.0 (Windows NT 10.0; Win64;x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

user-agent 字符串包含了 Web 浏览器的大量信息，如浏览器的名称和版本。

4. screen对象

screen 对象存储了客户端屏幕信息，这些信息可以用来探测客户端硬件配置。利用 screen 对象可以优化程序的设计，提升用户体验。

不同浏览器在解析 screen 对象的 width 和 height 属性时存在差异。

screen.width
screen.height

5. location对象

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。

举例说明：
http://www.123.cn:80/news/index.asp?id=123&name=location#top

console.log(location.href) //url地址 http://www.123.cn:80/news/index.asp?id=123&name=location#top
console.log(location.protocol) //协议 http:
console.log(location.host) //主机及端口 www.123.cn:80
console.log(location.hostname) //主机名称 www.123.cn
console.log(location.port) //端口 80
console.log(location.pathname) // URL的路径部分 /news/index.asp
console.log(location.search) // URL 的查询部分，包括前导问号(?)。 ?id=123&name=location
console.log(location.hash) // URL 中锚部分，包括前导符(#)