秒懂！CSS、HTML、JS和Vue前端面试题大全，让你轻松变大神！

最编程 2024-02-14 06:57:55

...

■ 符号说明

???? 主题

???? 常见重要

???? 需要有印象的

???? v3新特性

■ 杂谈

???? SEO优化

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

重要内容不要用js输出：爬虫不会执行js获取内容（查看网页源代码要有数据，有利于seo优化）

少用iframe：搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt

提高网站速度：网站速度是搜索引擎排序的一个重要指标。

???? 渐进增强与优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

■ HTML

???? H5新增API

HTML5新增了哪些内容或API，使用过哪些

音视频audio、video标签

语义化标签article、footer、header、nav、section等

表单控件date、time、color、emial、url、search等

新增图形绘制canvas标

H5存储localStorage、sessionStorage

新的技术webworker, websocket, Geolocation;

DNS预获取、FormData、FileReader、全屏API（Fullscreen API）等等

???? 忽略电话号码

移动设备忽略将页面中的数字识别为电话号码的方法

<meta name="format-detection" content="telephone=no"> // 禁止把数字转换为拨号链接
<meta name="format-detection" content="address=no">	  // 禁止把地址跳转至地图
<meta name="format-detection" content="email=no">	  // 禁止识别邮箱自动发送邮件
<meta name="format-detection" content="telephone=no,adress=no,email=no">

???? iframe标签

iframe就是HTML中，用于网页嵌套网页的。一个网页可以嵌套到另一个网页中，可以嵌套很多层。

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="http://www.4399.com" frameborder="0"></iframe>
</body>
<style>
    iframe{
        position: fixed;
        background: white;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }
</style>
</html>

???? 实战必备：favicon.ico

制作：https://tool.520101.com/diannao/ico/

作用：通过上传文件转换生成网站自定义图标

场景：打开各种网页，查看窗口左上角有自定义图标

???? 性能优化：标签你不知道的属性

场景：打开淘宝、京东等网站查看标签加了一些你不知道的属性

 <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
  <link rel="dns-prefetch" href="//g.alicdn.com" />
  <link rel="dns-prefetch" href="//img.alicdn.com" />
  <link rel="dns-prefetch" href="//tce.alicdn.com" />
  <link rel="dns-prefetch" href="//gm.mmstat.com" />
  <link ref="dns-prefetch" href="//tce.taobao.com" />
  <link rel="dns-prefetch" href="//log.mmstat.com" />
  <link rel="dns-prefetch" href="//tui.taobao.com" />
  <link rel="dns-prefetch" href="//ald.taobao.com" />
  <link rel="dns-prefetch" href="//gw.alicdn.com" />
  <link rel="dns-prefetch" href="//atanx.alicdn.com"/>
  <link rel="dns-prefetch" href="//dfhs.tanx.com"/>
  <link rel="dns-prefetch" href="//ecpm.tanx.com" />
  <link rel="dns-prefetch" href="//res.mmstat.com" />

dns-prefetch
域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让浏览器空闲的时候帮你做这件事。尤其大型网站会使用多域名，这时候更加需要 dns 预取。
<link rel="dns-prefetch" href=" //m.baidu.com<link rel="dns-prefetch"href="//m.baidu.com">
prefetch
prefetch 一般用来预加载可能使用的资源，一般是对用户行为的一种判断，浏览器会在空闲的时候加载 prefetch 的资源。
<link rel="prefetch" href=" https://www.baidu.com/">
preload
和 prefetch 不同，prefecth 通常是加载接下来可能用到的页面资源，而 preload 是加载当前页面要用的脚本、样式、字体、图片等资源。所以 preload 不是空闲时加载，它的优先级更强，并且会占用 http 请求数量。
<link rel='preload' href='style.css' as="style" οnlοad="console.log('style loaded')"

区别：

Preload 来告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级。比如，对于那些本来请求优先级较低的关键请求，我们可以通过设置 Preload 来提升这些请求的优先级。

Prefetch 来告诉浏览器用户将来可能在其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在 http 缓存内，最常见的 dns-prefetch。比如，当我们在浏览A页面，如果会通过A页面中的链接跳转到B页面，而B页面中我们有些资源希望尽早提前加载，那么我们就可以在A页面里添加这些资源 Prefetch ，那么当浏览器空闲时，就会去加载这些资源。

所以，对于那些可能在当前页面使用到的资源可以利用 Preload，而对一些可能在将来的某些页面中被使用的资源可以利用 Prefetch。如果从加载优先级上看，Preload 会提升请求优先级；而Prefetch会把资源的优先级放在最低，当浏览器空闲时才去预加载。

defer 和 async    现在重技术的公式面试必问
//defer <script defer src="script.js"></script> //async <script async src="script.js"></script>
defer 和 async 都是异步(并行)加载资源，不同点是 async 是加载完立即执行，而 defer 是加载完不执行，等到所有元素解析完再执行，也就是 DOMContentLoaded 事件触发之前。 因为 async 加载的资源是加载完执行，所以它比不能保证顺序，而 defer 会按顺序执行脚本。

■ CSS

???? CSS选择器

标签选择器，也称为元素选择器。
标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。

类选择器。
类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)

ID选择器。
ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。(所有浏览器都支持)

全局选择器。
全局选择器就是对所有的htmlz元素起作用。语法格式为： *{propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。

复合选择器。
将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。

继承选择器。
继承的规则是子标签在没有定义的情况下，继承父标签的选择器;当子标签重复定义了父标签的声明时，执行子标签选择器。

伪类选择器。
伪类选择器主要应用在标签上，它由四种状态：未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。

留心，:befor（没有写错，就是比CSS3少一个e）是Css2的写法（兼容好），::before是Css3的写法（兼容相对不好)

???? CSS选择器优先级

权重顺序： !important > 行内样式 > ID > 类、伪类、属性 > 标签 > 通配符 > 继承 > 浏览器默认属性

权重大小

通配符0
标签 1
类/伪类/属性 10
ID 100
行内样式 1000
!important	无穷大

???? CSS3新特性

属性选择器

圆角

阴影

渐变

多列布局

css自定艺术性等等

???? 定位 position

static 默认值,没有定位,元素出现在正常的文档流中；

relative 相对定位,相对位置为自身默认位置；

absolute绝对定位,相对位置为最近父非static的元素,没有就是body/可见视口/浏览器窗口；

fixed固定定位,对象位置为 body/可见视口/浏览器窗口；

sticky粘性定位,该定位基于用户滚动的位置；

???? 定位 position场景

static 默认

relative、absolute 淘宝京东轮播图左右箭头、分页器、热卖商品、新品等等

fixed 传统网站两侧滚动广告、还有右下角客服、返回顶部等等

sticky 网站导航栏例如 https://www.discuz.net/

???? 谈谈你对盒模型的理解

问：什么是盒模型？

网页布局中CSS布局的思想模型

主要规定元素和元素之间的关系

例如：内容（content）,内边距（padding）,边框（border）,外边距（margin）

问：标准盒模型、怪异盒模型是什么

用box-sizing告诉浏览器如何计算一个元素是总宽度和总高度

标准盒模型：box-sizing: content-box
一个块的总宽度 width + margin(左右) + padding(左右) + border(左右)

IE盒模型或怪异盒模型 box-sizing: border-box
一个块的总宽度 = width（已包含padding和border） + margin(左右)

???? 谈谈你对BFC的理解

垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并（应用：防止margin重叠）；

BFC的区域不会与float box重叠（应用：自适应两栏布局）

计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

内部的Box会在垂直方向，一个接一个地放置。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)；即使存在浮动也是如此。（说明：就是子盒子排列时候从父盒子左上角开始）

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC是什么？

是一个独立的布局环境

BFC能干嘛？

形成一个完全独立的空间，让空间中的子元素不会影响外面的布局

BFC特性？

独立空间内元素/标签的布局规则

如何触发BFC

float：除 none 以外的值

position为 absolute、fixed

display 为 inline-block、table、table-row、table-cell、flex等等

overflow 除了 visible 以外的值 (hidden、auto、scroll)

column-count等

BFC应用

自适应两栏、三栏布局

<style>
* {padding:0px;margin:0px;}
.left {width:200px;height:100px;background:green;float: left;}
.right {height:200px;background:red;overflow: hidden; }
</style>

<div class="left"></div>
<div class="right"></div>

清清除内部浮动

<style>
* {padding:0px;margin:0px;}
/*
ul {background: green;}
*/
ul {background: green; overflow: hidden;}
li {width:100px;height:20px;background:red;float: left;}
</style>

<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
</ul>

利用BFC避免margin重叠（案例：京西商城后台首页头部导航

<style>
* {padding:0px;margin:0px;}
p {width:100px;height:20px;background:red;margin:10px 0px;}
</style>

<!-- 
<p>盒子1</p>
<p>盒子2</p> 
-->

<div style="overflow:hidden;"><p>盒子1</p></div>
<p>盒子2</p>

???? 谈谈你对栅格的理解

将网页内容划分成12等分

使用布局容器宽度变小了，依旧12等分

会发现内容变小了

不够就空着

超出就另起一行

案例：bootstrap 测试：Bootstrap可视化布局系统

???? 自适应

rem和em区别、vw是什么?

都是相对单位

rem相对于html绕开了复杂的层级关系

em相对父麻烦

vw可视窗口1%

???? 解决谷歌最小字体12px限制

通过transform缩放即可解决

transform: scale

???? CSS三角形怎么实现

宽度、高度设为0，然后设置边框样式全透明

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

???? 高度塌陷解决方法

概念：父高自适应，子浮动，父高为0的表现

解决：

方法1：clear: both + 空标签（不推荐 代码冗余）
方法2：父级添加overflow属性（不推荐 超出隐藏 特殊布定位布局出问题）
方法3：伪元素清除浮动（推荐使用）
方法4：双伪元素清除浮动（推荐使用）
方法5：
 /*声明清除浮动的样式*/ 
      .clearfix:after {
            content: "";            
            display: block;     
             /* 没有内容转换为快元素*/
            clear: both;
             /* 清除浮动*/
            visibility: hidden;
            /* 元素隐藏，位置保留*/
            height: 0;  
            /* 解决IE6解析高度0不正确问题*/
            overflow: hidden; 
            /* 解决IE6解析高度0不正确问题*/
        } 
        .clearfix {   
                  *zoom: 1;
                  /*ie6,7 专门清除浮动的样式*/ 
                  }   
 /*声明清除浮动的样式*/ 
 .clearfix:before ,.clearfix:after {
                        content: "";    
                        display: table; 
                        } 
                    .clearfix:after {     
                        clear:both; 
                    } 
                    .clearfix { 
                        *zoom: 1;  /*ie6,7 专门清除浮动的样式*/ 
                    }

???? 样式兼容

【所有】图片下方多了三像素原因及解决办法

产生原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px

解决：display:block、vertical-align: middle;

【谷歌】表单元素获取焦点有边框线

解决：outline: none

【IE】表单元素去掉边框 border:none 不兼容IE低版本

解决：border:0;

【IE】表单元素加高度后所有浏览器默认内容垂直居中不兼容IE低版本

解决：加行高line-height

【IE】a标签包图片会有边框

解决：图片border:0

【IE】透明语法兼容问题

【IE】双倍margin问题等等

css hack是什么？

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

选择器 {
    height:32px;
    background-color:#f1ee18;    /*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;   /*IE6、7识别*/
    _background-color:#1e0bd1;   /*IE6识别*/
}

????1px细线问题

说明：在移动端实现1px

解决：

方法1：伪元素 + transform
.border-1px {
    position: relative;
 }
 .border-1px:after {
     content: " ";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 1px;
     border-top: 1px solid red;
     color: red;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
 }
 /* 2倍屏 */
 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
   .border-1px:after {
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
   }
 }
 /* 3倍屏 */
 @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
   .border-1px:after {
       -webkit-transform: scaleY(0.33);
       transform: scaleY(0.33);
   }
 }

 方法2：通过缩放viewport实现
 var scale = 1 / window.devicePixelRatio;
 var viewport = document.querySelector("meta[name=viewport]")
 viewport.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

 方法3： 媒体查询利用设备像素比缩放，设置小数像素（存在兼容WWDC苹果全球开发者大会ios8+才支持小数
 .border { border: 1px solid #999 }
 @media screen and (-webkit-min-device-pixel-ratio: 2) {
 .border { border: 0.5px solid #999 }
 }
 @media screen and (-webkit-min-device-pixel-ratio: 3) {
 .border { border: 0.333333px solid #999 }
 }

 留心：ios8- 和  安卓低版本等都不能识别小数会忽略为0px

????图片模糊问题

方法1
/*默认大小*/
.photo {
    width:100px;height:100px;
    background-image: url(image100.png);
}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.photo {
 background-image: url(image200.png);
 background-size: 100px 100px;
}
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.photo {
 background-image: url(image300.png);
 background-size: 100px 100px;
}
}
方法2：
<img src="./imgs/goods.png" alt="" srcset="./imgs/goods@2.png 2x,./imgs/goods@3.png 3x">

???? link和@import区别

功能角度：

@import是CSS的语法规则，而<link></link>是HTML标签。
所以link不仅可以加载CSS，还可以定义RSS等，而@import只能导入CSS

加载顺序：

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

兼容角度：

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题

DOM操作：

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

优化角度：

link可以加一些预解析的标签，而@import没有它强

???? 水平居中

方法1：【移动推荐】利用flex弹性布局 justify-content center
方法2：【需要宽高】利用position定位 left 50% margin-left 负自身一半
方法3：【需要宽高】利用position定位 right/left =0 然后 margin: auto
方法4：【留心兼容】利用position定位 transform translate(-50%,0)
方法5：【行内元素】text-align center
方法6：【块级元素】margin auto

???? 垂直居中

方法1：【移动推荐】利用flex弹性布局 align-items center
方法2：【需要宽高】利用position定位 top 50% margin-top 负自身一半
方法3：【需要宽高】利用position定位 top/bottom=0 然后 margin: auto
方法4：【留心兼容】利用position定位 transform translate(0, -50%);
方法5：【文本居中】line-height

???? 水平垂直居中

方法1：【移动推荐】利用flex弹性布局 justify-content/ align-items center
方法2：【需要宽高】利用position定位 top/left 50% margin-top/left 负自身一半
方法3：【需要宽高】利用position定位 top/right/bottom/left =0 然后 margin: auto
方法4：【留心兼容】利用position定位 transform translate(-50%,-50%)
方法5：【留心兼容】利用position定位 calc((100% - 100px) / 2);

???? 两栏布局

方法1：左固定浮动、右触发BFC
方法2：左固定浮动、右margin-left
方法3：左固定定位、右margin-left
方法4：父弹性盒、左固定、右flex:1

<style>
*{padding:0px;margin:0px;}
.test {width:50px;height:50px;background: black;color:#fff;}
</style>

<!-- 方法1：左固定浮动、右触发BFC -->
<style>
.left1 {width:200px;height:100px;background:#ccc;float:left;}
.right1 {height:100px;background:red;overflow: hidden;}
</style>
<div class="left1">你好</div>
<div class="right1"><div class="test">中国</div></div>

<!-- 方法2：左固定浮动、右margin-left -->
<style>
.left2 {width:200px;height:100px;background:#ccc;float:left;}
.right2 {height:100px;background:red;margin-left:200px;}
</style>
<div class="left2">你好</div>
<div class="right2"><div class="test">中国</div></div>

<!-- 方法3：左固定定位、右margin-left -->
<style>
.left3 {width:200px;height:100px;background:#ccc;position:absolute;}
.right3 {height:100px;background:red;margin-left:200px;}
</style>
<div class="left3">你好</div>
<div class="right3"><div class="test">中国</div></div>

<!-- 方法4：父弹性盒、左固定、右flex:1  -->
<style>
.main {display: flex;}
.left4 {width:200px;height:100px;background:#ccc;}
.right4 {height:100px;background:red;flex:1;}
</style>
<div class="main">
<div class="left4">你好</div>
<div class="right4"><div class="test">中国</div></div>
</div>

???? 三栏布局

方法1：左右固定浮动、中间触发BFC
方法2：左右固定浮动、中间margin-left/right后自适应
方法3：左右固定定位、中间margin-left/right后自适应
方法4：弹性盒左固定右侧flex:1
方法5：圣杯布局、双飞翼布局

<style>*{padding:0px;margin:0px;}</style>

<!-- 方法1：左固定浮动、右触发BFC -->
<style>
.left1{width:200px;background:green;float:left;}
.right1{width:200px;background:#ccc;float:right;}
.center1{background:red;overflow:hidden;}
</style>
<div class="left1">左侧</div>
<div class="right1">右侧</div>
<div class="center1">中间</div>

<!-- 方法2：左右固定浮动、中间margin-left/right后自适应 -->
<style>
.left2 {width:200px;background:green;float:left;}
.right2 {width:200px;background:#ccc;float:right;}
.center2 {background:red;margin:0px 200px 0px 200px}
</style>
<div class="left2">左侧</div>
<div class="right2">右侧</div>
<div class="center2">中间</div>

<!-- 方法3：左右固定定位、中间margin-left/right后自适应 -->
<style>
.box3 {position: relative;}
.left3 {width:200px;background:green;position:absolute;top:0px;left:0px;}
.right3 {width:200px;background:#ccc;position:absolute;top:0px;right:0px;}
.center3 {background:red;margin:0px 200px}
</style>
<div class="box3">
  <div class="left3">左侧</div>
  <div class="center3">中间</div>
  <div class="right3">右侧</div>
</div>

<!-- 方法4：圣杯布局-有定位 -->
<style>
.box4{padding:0 200px;}
.content4{width:100%;background:red;float:left;}
.left4{width:200px;background:green;float:left;margin-left:-100%;position: relative;left:-200px;}
.right4{width:200px;background:#ccc;float:left;margin-left:-200px;position: relative;right:-200px;}
</style>
<div class="box4">
  <div class="content4">中间</div>
  <div class="left4">左侧</div>
  <div class="right4">右侧</div>
</div>

<!-- 方法5：双飞翼布局-无定位 -->
<style>
.box5 {width:100%;float:left;background:red;}
.box5 .content5{padding:0 200px;}
.left5{width:200px;background:green;float:left;margin-left:-100%;}
.right5{width:200px;background:#ccc;float:left;margin-left:-200px;}
</style>
<div class="box5">
  <div class="content5">中间</div>
</div>
<div class="left5">左侧</div>
<div class="right5">右侧</div>

???? 弹性布局 flex布局（详细）

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

容器属性：

flex-direction:

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

flex-wrap:

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

justify-content:

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

align-items：

值	描述
stretch	默认值，项目将被拉伸以适合容器
center	项目位于容器的*
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

align-content：

值	描述
stretch	默认值，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承该属性的值

order：number（可以定义项目在容器中出现的顺序）

align-self

值	描述
auto	默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch	项目将被拉伸以适合容器
center	项目位于容器的*
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：

flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0

上一篇：搞定前端面试必备的八个话题（详版）——上篇

下一篇： 2021前端校招面试必备知识梳理（八股文版）