CSS，HTML，JS 以及Vue前端面试题八股文总结看完你就变高手
Posted 蒙奇不想敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS，HTML，JS 以及Vue前端面试题八股文总结看完你就变高手相关的知识，希望对你有一定的参考价值。
■ 符号说明
💘 主题
🌟 常见重要
🌛 需要有印象的
🆕 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选择器
标签选择器，也称为元素选择器。
标签选择器的基本形式如下：tagNameproperty:value，其中tagName是标签名称，property是css的属性。
类选择器。
类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValueproperty:value。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)
ID选择器。
ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：#idValueproperty: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>
.left1width:200px;background:green;float:left;
.right1width:200px;background:#ccc;float:right;
.center1background: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>
.box4padding:0 200px;
.content4width:100%;background:red;float:left;
.left4width:200px;background:green;float:left;margin-left:-100%;position: relative;left:-200px;
.right4width: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 .content5padding:0 200px;
.left5width:200px;background:green;float:left;margin-left:-100%;
.right5width: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 | Vue.js 前端面试题 |