本文深入探讨了前端面试中常见的技术点，包括CSS的盒子模型、display和position属性，以及flex布局。JavaScript部分涵盖了ES5至ES10的特性，如继承、深拷贝和事件循环。浏览器方面，讨论了事件模型、选择器和前端路由。同时，文章还介绍了React和Vue等前端框架以及Webpack的基础知识。通过对这些核心概念的梳理，有助于高级前端开发者更好地准备面试。
css部分
盒子模型
margin+border+padding+content
-
Content边界/内边界: content边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容决定,这四个content边界组成的矩形框就是该元素的content box.
-
Padding边界:padding边界环绕在该元素的padding区域的四周,顾名思义,填充背景色.如果padding的宽度为零,则padding边界与content边界重合.这四个padding边界组成的矩形就是该元素的padding box.
-
Border边界:border边界环绕在该元素的border区域的四周.如果border的宽度为零,则border边界与padding边界重合.这四个border边界组成的矩形就是该元素的border box.
-
Margin边界:margin边界环绕在该元素的margin区域的四周,如果margin的宽度为零,则margin边界与border边界重合.这四个margin边界组成的矩形就是该元素的margin box.
-
对于行内非替换元素(例如span),垂直方向上的margin不起作用
- 替换元素：input、textarea、img、video、select
- 非替换元素：div、span、h1~h6…
-
margin不适用于table类型的元素,如table-caption,table,inline-table,以及td,th,tr等.
-
border-style的可用值有：’none’(无样式)，’hidden’(隐藏)，’dotted’(点线)，’dashed’(虚线 )，’solid’(实线)，’double’(双线)，’groove’(3D凹槽轮廓)，’ridge’(3D吐槽轮廓)，’inset’(3D凹边轮廓), ‘outset’(3D凸边轮廓)
-
行内非替换元素的padding会生效，但不会撑开父级元素（可以利用这个特性用来做一些类似时间轴一样的效果）
-
垂直方向的相邻的外边距会发生外边距的重叠现象
- 如果都是正边界，结果的边界宽度是相邻边界宽度中最大的值
- 如果出现负边界，则在最大的正边界中减去绝对值最大的负边界
- 如果没有正边界，则从零中减去绝对值最大的负边界
-
兄弟元素的相邻外边距会取最大值
-
父子元素的相邻外边距会传递给父元素
display
| none | 此元素不会被显示。 |
|---|---|
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
position
- absolute 相对于第一个不是static定位的父级的绝对定位
- relative 生成相对定位的元素，相对于其正常位置进行定位。
- fixed 相对与浏览器窗口的绝对定位
- static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- inherit 继承父级的定位方式
flex布局
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex-direction属性决定主轴的方向（即项目的排列方向）。row主轴为水平方向，起点在左端row-reverse主轴为水平方向，起点在右端column主轴为垂直方向，起点在上沿column-reverse主轴为垂直方向，起点在下沿
flex-wrap规定一条轴线上排不下时，项目如何换行（默认全都排列在同一行）nowrap（默认）不换行wrap正常换行,即第一行在上方wrap-reverse反向换行，即第一行在下方
flex-flow他是flex-direction和flex-wrap的缩写，默认为：row nowrapjustify-content规定了项目在主轴方向上的对齐方式flex-start左对齐flex-end右对齐center居中space-between两端对齐，项目中间的间隔都相同space-around每个项目两侧的间隔相同
align-items属性 在交叉轴也就是垂直方向上的对齐方式flex-start顶端对齐flex-end底端对齐center垂直居中对齐stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。baseline: 项目的第一行文字的基线对齐
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
以上都是flex容器的属性，接下来再看看flex项目的一些属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex 布局能够让我们相当自由的布局页面，那么，我们来看看使用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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
background: #e6e6e6;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: 15px auto;
border-radius: 5px;
box-shadow: #000 0 0 5px, inset #ccc 0 0 5px;
}
.box article {
background: #FFFFFF;
padding: 15px;
border-radius: 5px;
line-height: 1.5;
color: #333;
}
</style>
</head>
<body>
<div class="box">
<article>
<p>这是一篇文章</p>
<p>这是一篇文章</p>
<p>这是一篇文章</p>
</article>
</div>
</body>
</html>
- 占满剩余屏幕
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box2 {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
width: 100%;
}
header,
footer {
width: 100%;
background: rgb(0, 133, 123);
color: #FFFFFF;
text-align: center;
height: 40px;
line-height: 40px;
}
main {
width: 100%;
/* 在头部和脚部固定，且父级节点高度已知的情况下，使用flex-grow，让内容区放大填充满剩余空间，等同于height: calc(100vh - 40px -40px) */
flex-grow: 1;
background: #CCCCCC;
text-align: center;
overflow: auto;
box-sizing: border-box;
}
main p {
padding: 15px 0;
background: #FFFFFF;
border-bottom: dashed 1px #e6e6e6;
animation: show 1s;
transform-origin: bottom center;
}
main p:nth-last-child(1) {
border: none;
}
main p:active {
background: #eeeeee;
}
@keyframes show {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box2">
<header>头部</header>
<main>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
<p>内容区</p>
最低0.47元/天 解锁文章
扫一扫
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
