前言

大家好，我是林三心。用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初衷。

咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？

为什么跨域？

为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略

如有有一个不相同，就会出现跨域问题，不符合同源策略导致的后果有

• 1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问


• 2、DOM节点无法跨域操作


• 3、Ajax请求无法跨域请求

注意点：一个IP是可以注册多个不同域名的，也就是多个域名可能指向同一个IP，即使是这样，他们也不符合同源策略

跨域的时机？

跨域发生在什么时候呢？我考过很多位同学，得到了两种答案

• 1、请求一发出就被浏览器的跨域报错拦下来了(大多数人回答)


• 2、请求发出去到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦下来

那到底是哪种呢？我们可以验证下，咱们先npm i nodemon -g，然后创建一个index.js，然后nodemon index起一个node服务

// index.js  http://127.0.0.1:8000



const http = require('http');



const port = 8000;



http.createServer(function (req, res) {

    const { query } = urllib.parse(req.url, true);

    console.log(query.name)

    console.log('到后端喽')

    res.end(JSON.stringify('林三心'));

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

再创建一个index.html，用来写前端的请求代码，咱们就写一个简单的AJAX请求吧

// index.html  http://127.0.0.1:5500/index.html

<script>

    //步骤一:创建异步对象

    var ajax = new XMLHttpRequest();

    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数

    ajax.open('get', 'http://127.0.0.1:8000?name=前端过来的林三心');

    //步骤三:发送请求

    ajax.send();

    //步骤四:注册事件 onreadystatechange 状态改变就会调用

    ajax.onreadystatechange = function () {

        if (ajax.readyState == 4 && ajax.status == 200) {

            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

            console.log(ajax.responseText);//输入相应的内容

        }

    }



</script>

复制代码

最终，前端确实是跨域报错了。但这不是结果，我们要想知道是哪一个答案，关键在于看后端的node服务那里有没有输出，就一目了然了。所以，答案2才是对的。

同域情况 && 跨域情况？

前面提到了同源策略，满足协议号-域名-端口号这三者都相同就是同域，反之就是跨域，会导致跨域报错，下面通过几个例子让大家巩固一下对同域和跨域的认识把！

解决跨域的方案

跨域其实是一个很久的问题了，对应的解决方案也有很多，一起接着往下读吧！！！

JSONP

前面咱们说了，因为浏览器同源策略的存在，导致存在跨域问题，那有没有不受跨域问题所束缚的东西呢？其实是有的，以下这三个标签加载资源路径是不受束缚的

• 1、script标签：<script src="加载资源路径"></script>


• 2、link标签：<link herf="加载资源路径"></link>


• 3、img标签：<img src="加载资源路径"></img>

而JSONP就是利用了script的src加载不受束缚，从而可以拥有从不同的域拿到数据的能力。但是JSONP需要前端后端配合，才能实现最终的跨域获取数据。

JSONP通俗点说就是：利用script的src去发送请求，将一个方法名callback传给后端，后端拿到这个方法名，将所需数据，通过字符串拼接成新的字符串callback(所需数据)，并发送到前端，前端接收到这个字符串之后，就会自动执行方法callback(所需数据)。老规矩，先上图，再上代码。

后端代码

// index.js  http://127.0.0.1:8000



const http = require('http');

const urllib = require('url');



const port = 8000;



http.createServer(function (req, res) {

    const { query } = urllib.parse(req.url, true);

    if (query && query.callback) {

        const { name, age, callback } = query

        const person = `${name}今年${age}岁啦！！！`

        const str = `${callback}(${JSON.stringify(person)})` // 拼成callback(data)

        res.end(str);

    } else {

        res.end(JSON.stringify('没东西啊你'));

    }

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

前端代码

// index.html  http://127.0.0.1:5500/index.html



    const jsonp = (url, params, cbName) => {

        return new Promise((resolve, reject) => {

            const script = document.createElement('script')

            window[cbName] = (data) => {

                resolve(data)

                document.body.removeChild(script)

            }

            params = { ...params, callback: cbName }

            const arr = Object.keys(params).map(key => `${key}=${params[key]}`)

            script.src = `${url}?${arr.join('&')}`

            document.body.appendChild(script)

        })

    }



    jsonp('http://127.0.0.1:8000', { name: '林三心', age: 23 }, 'callback').then(data => {

        console.log(data) // 林三心今年23岁啦！！！

    })

复制代码

JSONP的缺点就是，需要前后端配合，并且只支持get请求方法

WebSocket

WebSocket是什么东西？其实我也不怎么懂，但是我也不会像别人一样把MDN的资料直接复制过来，因为复制过来相信大家也是看不懂的。

我理解的WebSocket是一种协议(跟http同级，都是协议)，并且他可以进行跨域通信，为什么他支持跨域通信呢？我这里找到一篇文章WebSocket凭啥可以跨域？，讲的挺好

后端代码

先安装npm i ws

// index.js  http://127.0.0.1:8000

const Websocket = require('ws');



const port = 8000;

const ws = new Websocket.Server({ port })

ws.on('connection', (obj) => {

    obj.on('message', (data) => {

        data = JSON.parse(data.toString())

        const { name, age } = data

        obj.send(`${name}今年${age}岁啦！！！`)

    })

})

复制代码

前端代码

// index.html  http://127.0.0.1:5500/index.html





    function myWebsocket(url, params) {

        return new Promise((resolve, reject) => {

            const socket = new WebSocket(url)

            socket.onopen = () => {

                socket.send(JSON.stringify(params))

            }

            socket.onmessage = (e) => {

                resolve(e.data)

            }

        })

    }

    myWebsocket('ws://127.0.0.1:8000', { name: '林三心', age: 23 }).then(data => {

        console.log(data) // 林三心今年23岁啦！！！

    })

复制代码

结果如下

Cors

Cors，全称是Cross-Origin Resource Sharing，意思是跨域资源共享，Cors一般是由后端来开启的，一旦开启，前端就可以跨域访问后端。

为什么后端开启Cors，前端就能跨域请求后端呢？我的理解是：前端跨域访问到后端，后端开启Cors，发送Access-Control-Allow-Origin: 域名 字段到前端（其实不止一个），前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样，浏览器就不会实行跨域拦截，从而解决跨域问题。

后端代码

// index.js  http://127.0.0.1:8000



const http = require('http');

const urllib = require('url');



const port = 8000;



http.createServer(function (req, res) {

    // 开启Cors

    res.writeHead(200, {

        //设置允许跨域的域名，也可设置*允许所有域名

        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',

        //跨域允许的请求方法，也可设置*允许所有方法

        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",

        //允许的header类型

        'Access-Control-Allow-Headers': 'Content-Type'

    })

    const { query: { name, age } } = urllib.parse(req.url, true);

    res.end(`${name}今年${age}岁啦！！！`);

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

前端代码

// index.html  http://127.0.0.1:5500/index.html

    //步骤一:创建异步对象

    var ajax = new XMLHttpRequest();

    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数

    ajax.open('get', 'http://127.0.0.1:8000?name=林三心&age=23');

    //步骤三:发送请求

    ajax.send();

    //步骤四:注册事件 onreadystatechange 状态改变就会调用

    ajax.onreadystatechange = function () {

        if (ajax.readyState == 4 && ajax.status == 200) {

            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

            console.log(ajax.responseText);//输入相应的内容

        }

    }

复制代码

结果如下

Node接口代理

还是回到同源策略，同源策略它只是浏览器的一个策略而已，它是限制不到后端的，也就是前端-后端会被同源策略限制，但是后端-后端则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端

后端2代码

// index.js  http://127.0.0.1:8000



const http = require('http');

const urllib = require('url');



const port = 8000;



http.createServer(function (req, res) {

    console.log(888)

    const { query: { name, age } } = urllib.parse(req.url, true);

    res.end(`${name}今年${age}岁啦！！！`)

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

创建一个index2.js，并nodmeon index2.js

后端1代码

// index2.js  http://127.0.0.1:8888



const http = require('http');

const urllib = require('url');

const querystring = require('querystring');

const port = 8888;



http.createServer(function (req, res) {

    // 开启Cors

    res.writeHead(200, {

        //设置允许跨域的域名，也可设置*允许所有域名

        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',

        //跨域允许的请求方法，也可设置*允许所有方法

        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",

        //允许的header类型

        'Access-Control-Allow-Headers': 'Content-Type'

    })

    const { query } = urllib.parse(req.url, true);

    const { methods = 'GET', headers } = req

    const proxyReq = http.request({

        host: '127.0.0.1',

        port: '8000',

        path: `/?${querystring.stringify(query)}`,

        methods,

        headers

    }, proxyRes => {

        proxyRes.on('data', chunk => {

            console.log(chunk.toString())

            res.end(chunk.toString())

        })

    }).end()

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

前端代码

// index.html  http://127.0.0.1:5500



//步骤一:创建异步对象

    var ajax = new XMLHttpRequest();

    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端

    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');

    //步骤三:发送请求

    ajax.send();

    //步骤四:注册事件 onreadystatechange 状态改变就会调用

    ajax.onreadystatechange = function () {

        if (ajax.readyState == 4 && ajax.status == 200) {

            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

            console.log(ajax.responseText);//输入相应的内容

        }

    }

复制代码

结果如下

Nginx

其实Nginx跟Node接口代理是一个道理，只不过Nginx就不需要我们自己去搭建一个中间服务

先下载nginx，然后将nginx目录下的nginx.conf修改如下:

    server{

        listen 8888;

        server_name  127.0.0.1;

 

        location /{

            proxy_pass 127.0.0.1:8000;

        }

    }

复制代码

最后通过命令行nginx -s reload启动nginx

后端代码

// index.js  http://127.0.0.1:8000



const http = require('http');

const urllib = require('url');



const port = 8000;



http.createServer(function (req, res) {

    const { query: { name, age } } = urllib.parse(req.url, true);

    res.end(`${name}今年${age}岁啦！！！`);

}).listen(port, function () {

    console.log('server is listening on port ' + port);

})

复制代码

前端代码

// index.html  http://127.0.0.1:5500



//步骤一:创建异步对象

    var ajax = new XMLHttpRequest();

    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端

    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');

    //步骤三:发送请求

    ajax.send();

    //步骤四:注册事件 onreadystatechange 状态改变就会调用

    ajax.onreadystatechange = function () {

        if (ajax.readyState == 4 && ajax.status == 200) {

            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的

            console.log(ajax.responseText);//输入相应的内容

        }

    }

复制代码

结果如下

postMessage

场景：http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了一个http://127.0.0.1:5555/index.html的页面

虽然这两个页面存在于一个页面中，但是需要iframe标签来嵌套才行，这两个页面之间是无法进行通信的，因为他们端口号不同，根据同源策略，他们之间存在跨域问题

那应该怎么办呢？使用postMessage可以使这两个页面进行通信

// http:127.0.0.1:5500/index.html



<body>

    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>

</body>

<script>

    document.getElementById('frame').onload = function () {

        this.contentWindow.postMessage({ name: '林三心', age: 23 }, 'http://127.0.0.1:5555')

        window.onmessage = function (e) {

            console.log(e.data) // 林三心今年23岁啦！！！

        }

    }

</script>

复制代码

// http://127.0.0.1:5555/index.html



<script>

        window.onmessage = function (e) {

            const { data: { name, age }, origin } = e

            e.source.postMessage(`${name}今年${age}岁啦！！！`, origin)

        }

</script>

复制代码

document.domain && iframe

场景：a.sanxin.com/index.html 与 b.sanxin.com/index.html之间的通信

其实上面这两个正常情况下是无法通信的，因为他们的域名不相同，属于跨域通信

那怎么办呢？其实他们有一个共同点，那就是他们的二级域名都是sanxin.com，这使得他们可以通过document.domain && iframe的方式来通信

由于本菜鸟暂时没有服务器，所以暂时使用本地来模拟

// http://127.0.0.1:5500/index.html



<body>

    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>

</body>

<script>

    document.domain = '127.0.0.1'

    document.getElementById('frame').onload = function () {

        console.log(this.contentWindow.data) // 林三心今年23岁啦！！！

    }

</script>

复制代码

// http://127.0.0.1:5555/index.html



 <script>

        // window.name="林三心今年23岁啦！！！"

        document.domain = '127.0.0.1'

        var data = '林三心今年23岁啦！！！';

</script>



复制代码

结果如下

前言

据不完全统计(其实就统计了自己身边的朋友和同事)，在刨除抖音或快手这一类短视频 APP 后，每天在手机上花费时间最长的就是刷微博和逛朋友圈。

在刷微博和逛朋友圈的时候经常会看到这种东西：

它有一个高大上的名字：九宫格。
顾名思义，九宫格通常为如图这种三行三列的布局。

微信客户端就用到了这种布局方式：

大家最熟悉的朋友圈也采用了九宫格：

还有微博：

它在移动端的运用十分的广泛，而且不仅仅是在移动端的运用，它甚至还运用到了一些面试题中，因为九宫格可以很好的考察面试者的 CSS 功底。

边距九宫格

九宫格通常分为两种，一种是边距九宫格，另一种是边框九宫格。

边距九宫格就是朋友圈那种每张图都带有一定边距的那种：

这种其实反而更简单一些，因为不涉及到边框问题，像这种几行几列的布局用网格布局(grid)简直再合适不过了。

但考虑到大家普遍对网格不太熟悉，所以咱们用同样适合几行几列的表格布局来实现，为什么不用万能的弹性盒子(flex)来做呢？因为下面那道面试题就是用flex实现的，不想用两个一样的布局来实现，为了美观一点，这里使用了一个中文渐变色的库：chinese-gradient，来看代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <!-- 在这里用link标签引入中文渐变色 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">

  <style>

    /* 清除默认样式 */

    * { padding: 0; margin: 0; }



    /* 全屏显示 */

    html, body, ul { height: 100% }



    /* 父元素 */

    ul {

      /* 给个合适的宽度 */

      width: 100%;



      /* 清除默认样式 */

      list-style: none;



      /* 令其用table方式去显示 */

      display: table;

 

      /* 设置间距 */

      border-spacing: 3px

    }



    /* 子元素 */

    li {

      /* 令其用table-row方式去显示 */

      display: table-row

    }



    /* 孙子元素 */

    div {

      /* 令其用table-cell方式去显示 */

      display: table-cell;



      /* 蓝色渐变 */

      background: var(--湖蓝)

    }

  </style>

</head>

<body>

  <ul>

    <li>

      <div></div>

      <div></div>

      <div></div>

    </li>

    <li>

      <div></div>

      <div></div>

      <div></div>

    </li>

    <li>

      <div></div>

      <div></div>

      <div></div>

    </li>

  </ul>

</body>

</html>

复制代码

运行结果：

可以看到在 DOM 结构上我们并没有用到 <table>、<tr>、<td> 这类传统表格元素，因为在这种情况下只是用到了表格的那种几行几列而已。但实际上九宫格并不是表格，所以为了符合 W3C 的语义化标准，我们采用了其他的 DOM 元素。

在有些适合使用表格布局但又不是表格的情况下，可以利用 display 属性来模仿表格的行为：

• display: table;相当于把元素的行为变成<table></table>


• display: inline-table;相当于把元素的行为变成行内元素版的<table></table>


• display: table-header-group;相当于把元素的行为变成<thead></thead>


• display: table-row-group;相当于把元素的行为变成<tbody></tbody>


• display: table-footer-group;相当于把元素的行为变成<tfoot></tfoot>


• display: table-row;相当于把元素的行为变成<tr></tr>


• display: table-column-group;相当于把元素的行为变成<colgroup></colgroup>


• display: table-column;相当于把元素的行为变成<col></col>


• display: table-cell;相当于把元素的行为变成<td></td>或<th></th>


• display: table-caption;相当于把元素的行为变成<caption></caption>

边框九宫格

可能大家看了前面的内容觉得：就这？这么简单还想让人原形毕露？

那咱们来看这么一道题：

要求如下：

• 边框九宫格的每个格子中的数字都要居中


• 鼠标经过时边框和数字都要变红


• 点击九宫格会弹出对应的数字

看起来还是没什么大不了对不对？是不是觉得就是把九宫格加个边框就行了？如果你是这么想的话，那么你写出来的九宫格将会变成这样：

是不是跟想象中的好像不太一样？为什么会这样呢？

因为给每个盒子加入了边框以后，在有边距的情况下看起来都挺正常的，但要将他们合并在一起的话相邻的两个边框就会贴合在一起，肉眼看起来就是一个两倍粗的边框：

那么怎么解决这个问题呢？

解法1

不是相邻的两个边框合并在一起会变粗吗？那么最简单粗暴的办法就是让两个相邻的盒子的其中一个的相邻边不显示边框不就完了！就像这样：

这么做完全可以实现，绝对没毛病。但这种属于笨方法，如果给换成四宫格、六宫格、十二宫格，那么又要重新去想一下该怎么实现，而且写出来的代码也比较冗余，几乎每个盒子都要给它定义一个不同的样式。

如果去参加面试的时候这么实现出来，面试官也不会给你满分，甚至可能连个及格分都不会给。但毕竟算是实现出来了，总比那些没实现出来的强点，不会给零分的。

解法2

上面那种实现方式要给每一个盒子都写一套不同的样式，而且还不适合别的像六宫格、十二宫格这类，代码冗余、可复用性差。

那么怎么才能每个盒子只用到一个样式，并且同样还适用于别的宫格呢？来看看这个思路：

但是仔细一看经不起推敲啊：整个九宫格最右边和最下边的边框都没有了！其实只要咱们在父元素上再加上右侧和下侧的边框即可：

而且并不一定非得是这个方向的，别的方向也可以实现啊，比如酱婶儿的：

酱婶儿的：

还有酱婶儿的：

这种方式不管你是4、6、9还是12宫格，只需在子元素上加一个样式即可，然后再在父元素上加一个互补的边框样式。

解法3

上面那种解法其实已经可以了，但还不是最完美的，那么它都有哪些问题呢？

• 
  

  首先，虽然换成别的宫格也可以复用，但都只适合"满"的情况。比如像朋友圈，最大就是九宫格对吧？但用户可以不是每次都发满九张照片，有可能发7张、有可能发五张，这样的话就会露馅(所以朋友圈采用的是边距九宫格而不是边框九宫格)。

  
  


• 
  

  其次，它并不适合这道面试题，因为这道面试题的要求是在鼠标移入时边框变红，而上面那种解法会导致每个盒子的边框都不完整，所以当鼠标移入时效果会变成这样：

  
  

那么怎么样才能完美的解出这道题呢？首先每个盒子的边框不能再给它缺斤少两了，但那又会回到最初的那个问题上去：

有的面试题就是这样，在你苦思冥想的时候怎么也想不出来，但是稍微给点思路立马就能明白！

其实就是每个盒子都给它一个负边距，边距的距离恰巧就是边框的粗细，这样后面一个盒子就会"叠加"在前面那个盒子的边框上，我们来写一个粗点的半透明边框演示一下：

中间那些颜色变深了的就是叠在一起的边框，由于是半透明，所以叠在一起时颜色会变深。

不过一些比较细心的朋友可能会纳闷：既然所有盒子都用负边距向左上角移动了，岂不是九宫格不会处在原来的位置上了，没错是这样的！所以我们需要让最左边那一排和最上面那一排不要有负边距，这时候就要考察候选人的CSS水平了，看看他/她能不能够灵活运用伪类选择器：每一行的第一个，应该怎么写？

• :nth-child(1), :nth-child(4), :nth-child(7)？

这样也能实现，不过更好的方式是写成这样：

• :nth-child(3n+1)

最上面那一排负边距可以不用管，因为如果页面上的九宫格往左边移动了，哪怕只有一两像素，也会导致和页面上的版面无法对齐，而往上移动个一两像素的话谁也看不出来。

但如果要写的话大多数人想的可能是这样：

• :first-child, :nth-child(2), :nth-child(3)

而更好的方式是这样：

• :nth-child(-n+3)

每个宫格内的数字要居中，这里推荐用grid，因为九宫格可以用flex去实现，但里面的内容还继续用它去实现的话就体现不出你技术的全面性了，而且在居中这一方面grid可以做到比flex代码更少，即使你对grid不感兴趣，那么只需记住这一固定用法即可：

父元素 {

    display: grid;



    /* 令其子元素居中 */

    place-items: center;

}

复制代码

点击这里查看更多实现居中布局的方式

里面的内容解决了，外面的九宫格咱们来用万能的flex去实现，flex默认是一维布局，但如果仅支持一维的话就不会称之为万能的flex了，思路是这样的，假如每一个宫格宽高为100 x 100，九宫格加起来是300 x 300，每三个就让它换行，这样就可以考察到候选人对flex的灵活运用的程度了：

父元素 {

  width: 300px;



  /* 设置为flex布局 */

  display: flex;



  /* 设置换行 */

  flex-flow: wrap;

}



子元素 {

  width: 100px;

  height: 100px;

  

  border: 1px solid black;

}

复制代码

看起来没毛病对不对？实际上确是每行只有两个宫格就会换行，因为加了边框以后子元素的宽高就变成了102 x 102了，三个的话就已经超过了300，所以还没到三个就开始换行了，这时候就考察到候选人的盒模型了：

子元素 {

  width: 100px;

  height: 100px;

  

  border: 1px solid black;

  

  /* 设置盒模型 */

  box-sizing: border-box;

}

复制代码

这样即使加了边框，宽高也还是100，刚好能满3个就换行，想象一下如果你是面试官，直接问盒模型是不是显得很low，但是就这一个小小的九宫格立马就能区分出这个候选人的水平如何。

再接下来就是鼠标移入时边框和里面的内容一起变红，这有啥难的，不就是：

:hover {

  /* 红色字体 */

  color: red;



  /* 红色边框 */

  border: 1px solid red;

}

复制代码

还是那句话，这样确实能实现，但如果在咱们写js的过程中像red这种多处地方使用的值是不是一般都会给它设置成变量啊？那么这里要写CSS变量？也可以，但有一个更好的变量叫做currentColor，这个属性可以把它理解成一个内置变量，就像js里的innerWidth(window.innerWidth)一样，不用定义自然就是一个变量。

和CSS变量不同的是它取的是自身或父元素上的color值，而且它的兼容性还更好，可以一直兼容到IE9。

如果你觉得纳闷：这单词这么长，还不如直接写个red多方便啊，那么请别忘了color是可以继承的！如果在一个外层元素中定义了一个颜色，里面的子元素都可以继承，用JS来控制的话只需要获取外层DOM元素然后修改它的color样式即可。

currentColor作为一个变量，可以用在 border、box-shadow、background、linear-gradient() 等一大堆的 CSS 属性上…甚至连svg中的 fill 和 stroke 都可以使用这个变量，它能做的事情很多，这里为了不跑题就先不展开讲，有兴趣的可以去搜一下。

:hover {

  /* 红色字体 */

  color: red;



  /* 红色边框 */

  border: 1px solid;

}

复制代码

修改后的代码如上，为什么没有currentColor？那是因为如果你不写的话，默认就是currentColor，这个关键字代表的就是你当前的color值。

大多数的候选人可能都不会写成这样，如果你作为面试官的话最好是适当的提示一下，看他能不能说出currentColor这个变量或者CSS变量

然后就是点击每个宫格弹出对应的数字，这个考察的是事件冒泡和事件代理：

父元素.addEventListener('click', e => alert(e.target.innerText))

复制代码

你可以观察一下候选人是把事件绑定在父元素上还是一个个的绑定在子元素上，这个问题按理说基本上都不会错。但如果发现候选人一个个把事件绑定在子元素上了，那就可以到此为止了，也不用浪费时间再去问别的问题了，可以十分装B的来一句：行，你的情况我已基本了解了，回去等通知吧！

接下来我们再来写一下完整一点的代码，以便引出下一个问题：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    /* 清除默认样式 */

    * { padding: 0; margin: 0; }



    /* 全屏显示 */

    html, body { height: 100% }



    body {

      /* 网格布局 */

      display: grid;



      /* 子元素居中 */

      place-items: center;

    }



    /* 父元素 */

    ul {

      width: 300px;

      

      /* 清除默认样式 */

      list-style: none;



      /* 设置为flex布局 */

      display: flex;



      /* 设置换行 */

      flex-flow: wrap;

    }



    /* 子元素 */

    li {

      /* 显示为网格布局 */

      display: grid;



      /* 子元素水平垂直居中 */

      place-items: center;



      /* 宽高都是100像素 */

      width: 100px;

      height: 100px;



      /* 设置盒模型 */

      box-sizing: border-box;



      /* 设置1像素的边框 */

      border: 1px solid black;



      /* 负边距 */

      margin: -1px 0 0 -1px;

    }



    /* 第1、4、7个子元素 */

    li:nth-child(3n+1) {

      /* 取消左负边距 */

      margin-left: 0

    }



    /* 前三个子元素 */

    li:nth-child(-n+3) {

      /* 取消上负边距 */

      margin-top: 0

    }



    /* 当鼠标经过时 */

    li:hover {

      /* 红色字体 */

      color: red;



      /* 红色边框 */

      border: 1px solid;

    }

  </style>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

  </ul>

  <script>

    // 选择ul元素

    const ul = document.getElementsByTagName('ul')[0]



    // 监听ul元素的点击事件

    ul.addEventListener('click', e => alert(e.target.innerText))

  </script>

</body>

</html>

复制代码

运行结果：

想知道为什么会这样吗？因为当前这个边框被后面的宫格压住了嘛！那么只需要当鼠标经过时不让后面的压住就好了(调高层级)。

说到调高层级，大家首先想到的可能就是z-index了，这个属性用的最多的地方可能就是绝对定位和固定定位了。但其实很少有人知道，z-index不是只能用在position: xxx的，万能的弹性盒子(display:flex)也是支持z-index的：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    /* 清除默认样式 */

    * { padding: 0; margin: 0; }



    /* 全屏显示 */

    html, body { height: 100% }



    body {

      /* 网格布局 */

      display: grid;



      /* 子元素居中 */

      place-items: center;

    }



    /* 父元素 */

    ul {

      width: 300px;

      

      /* 清除默认样式 */

      list-style: none;



      /* 设置为flex布局 */

      display: flex;



      /* 设置换行 */

      flex-flow: wrap;

    }



    /* 子元素 */

    li {

      /* 显示为网格布局 */

      display: grid;



      /* 子元素水平垂直居中 */

      place-items: center;



      /* 宽高都是100像素 */

      width: 100px;

      height: 100px;



      /* 设置盒模型 */

      box-sizing: border-box;



      /* 设置1像素的边框 */

      border: 1px solid black;



      /* 负边距 */

      margin: -1px 0 0 -1px;

    }



    /* 第1、4、7个子元素 */

    li:nth-child(3n+1) {

      /* 取消左负边距 */

      margin-left: 0

    }



    /* 前三个子元素 */

    li:nth-child(-n+3) {

      /* 取消上负边距 */

      margin-top: 0

    }



    /* 当鼠标经过时 */

    li:hover {

      /* 红色字体 */

      color: red;



      /* 红色边框 */

      border: 1px solid;



      /* 调高层级 */

      z-index: 1;

    }

  </style>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

  </ul>

  <script>

    // 选择ul元素

    const ul = document.getElementsByTagName('ul')[0]



    // 监听ul元素的点击事件

    ul.addEventListener('click', e => alert(e.target.innerText))

  </script>

</body>

</html>

复制代码

运行结果：

结语

没想到这么一个看似不起眼的九宫格一下子就能考察这么多内容吧！如果面试的时候直接问：

• 你对 flex 了解的怎么样


• 当元素的外边距为负值时会有什么样的行为


• 请实现一下水平垂直居中


• 了解过 grid 吗


• 谈一下你对盒模型的理解


• 说一下事件绑定和事件冒泡


• CSS3的伪类选择器用的怎么样


• 当页面元素重叠时如何控制哪个在上哪个在下


• 在CSS中如何运用变量

直接这么问的话既浪费口舌，又显得很low，而且还不能筛选出真正能够灵活运用技术的候选人。

因为这些问题都不难，一般来说都能答出来，但具体能不能灵活运用就不一定了，而这一道九宫格，就像一面照妖镜一样，瞬间让人原形毕露！

如果你是候选人的话，那么一定要好好练习一下这道题。

如果是面试官的话，那么也推荐你用这道题来考察候选者的技术水平，如果能非常完美的做出来，那么基本上就不用再问其他的CSS题目了，日常开发所用到的样式基本难不倒他/她了，可以直接上JS面试题了。

但如果没做出来也不一定就代表这个人水平不行，可以试着提示一下候选者，然后再问一下其他的CSS题来确定一下此人的水平。

前言

最近做项目时碰到这么一个需求：

这有点类似于手风琴效果，但不一样的是很多手风琴效果是同一时间内只能有一个展开，而这个是各个部分独立的，你展不展开完全不会影响我的展开与否。其实这种效果简直再普遍不过了，网上随便一搜就出来一大堆。但不一样的是，我在接到这个需求的时候突然想起来很久以前看过张鑫旭大佬的一篇文章，模糊的记得那篇文章里说过有个什么很方便的 CSS 属性能够实现这一效果，不用像咱们平时实现的那些展开收起那样写很多的代码，于是就来到他的博客里面一顿搜，找了半天终于发现原来是我记错了，并不是什么 CSS3 属性，而是 HTML5 标签！

details

想要非常轻松的实现一个收拉效果，需要用到三个标签，分别是：<details>、<summary>以及随意…

随意是什么意思？意思是什么标签都可以？

咱们先只写一个<details>标签来看看页面上会出现什么：

<details></details>

复制代码

运行结果：

可以看到非常有意思的一个现象：我们明明什么文字都没有写，但页面上却出现了详细信息这四个字，因为如果你在标签里没有写<summary>的话，浏览器会自动给你补上一个<summary>详细信息</summary>，那有人可能奇怪了，怎么补的是中文呢？那老外不写<summary>的话也会来一个<summary>详细信息</summary>？其实是这样:

现代浏览器经常偷偷获取用户隐私信息，包括但不仅限于用人工智能判断屏幕前的用户是中国人还是外国人，然后根据用户的母语来动态向<summary>标签里加入不同语言的'详细信息'这几个字。

开个玩笑，其实是根据你当前操作系统的语言来判断的，要是你把系统语言改成其它语言的话出现的就不再是'详细信息'这几个中文字符了。

那如果我们在<details>标签里写了<summary>呢？

<details>

  <summary>公众号：</summary>

</details>

复制代码

运行结果：

可以看到<summary>里面的文字就会在三角箭头旁边的标题位置展示出来，可是我们展开三角箭头发现里面什么内容也没有，那么内容写在哪呢？

只需写在<summary>的后面就可以了，那是不是还要写个固定标签呢？比如什么<describe>之类的，其实在<summary>之后无论写什么标签都可以，当然必须得是合法的 HTML 标签啊，比如我们写个<h1>标签来试试看：

<details>

  <summary>公众号：</summary>

  <h1>前端学不动</h1>

</details>

复制代码

运行结果：

再换个别的标签试试：

<details>

  <summary>公众号：</summary>

  <button>前端学不动</button>

</details>

复制代码

运行结果：

看！我们仅用了三个标签就完成了一个最简单的收拉效果！以前在网上看到类似的效果要么就是 getElementById 获取到 DOM 元素，然后添加 onclick 事件控制下方元素的 style 属性，要么就是纯 CSS 实现，写几个单选按钮配合兄弟选择器来控制后方元素的显隐，抑或是 CSS 与 JS 相结合来实现的，但仅靠 HTML 标签来实现这一效果还是非常清新脱俗的！并且十分简洁、非常节约代码量、也更加直观易于理解。

深入测试

既然<summary>标签后面写什么都行，那么可不可以写很多个标签呢？我们来测试一下：

<details>

  <summary>公众号：</summary>

  <button>前端学不动</button>

  <span>前端学不动</span>

  <h1>前端学不动</h1>

  <a href="#">前端学不动</a>

  <strong>前端学不动</strong>

</details>

复制代码

运行结果：

那展开收起那部分的内容只能放在<summary>标签之后吗？如果放它前面呢：

<details>

  <button>前端学不动</button>

  <span>前端学不动</span>

  <h1>前端学不动</h1>

  <a href="#">前端学不动</a>

  <strong>前端学不动</strong>

  <summary>公众号：</summary>

</details>

复制代码

运行结果：

效果居然一模一样，看来展开收起的那部分应该是在<details>标签内部的除<summary>标签之外的所有内容。那如果写两个<summary>标签呢：

<details>

  <button>前端学不动</button>

  <span>前端学不动</span>

  <h1>前端学不动</h1>

  <a href="#">前端学不动</a>

  <strong>前端学不动</strong>

  <summary>公众号：</summary>

  <summary>summary</summary>

</details>

复制代码

运行结果：

可以看到只有第一个出现的<summary>标签是真正的summary，后续出现的其他所有标签(包括其它的<summary>)都是展开收起的那部分。

既然所有标签都可以，那么也包括<details>咯？

<details>

  <summary>project</summary>

  <details>

    <summary>html</summary>

    index.html

  </details>

  <details>

    <summary>css</summary>

    reset.css

  </details>

  <details>

    <summary>js</summary>

    main.js

  </details>

</details>

复制代码

运行结果：

这玩意有点意思，利用这种嵌套写法可以轻松实现编辑器左侧的那些文件区的效果。

加入样式

虽然可以很轻松、甚至在不用写 CSS 代码的情况下就实现展开收起效果，但毕竟不写 CSS 只是实现了个最基础的乞丐版效果，很多人都不想要点击的时候出现的那个轮廓：

在谷歌浏览器和 Safari 浏览器下都会出现这个轮廓，火狐就没有这玩意，咱们只需要给<summary>标签设置 outline 属性就可以了，一般如果你的项目引入了抹平浏览器样式间差异的 reset.css 文件的话，就不用写这个 CSS 了，为了方便同时观看 HTML、CSS 和 JS，我们来用 Vue 的格式来写代码：

<template>

  <details>

    <summary>project</summary>

    <details>

      <summary>html</summary>

      index.html

    </details>

    <details>

      <summary>css</summary>

      reset.css

    </details>

    <details>

      <summary>js</summary>

      main.js

    </details>

  </details>

</template>



<style>

summary { outline: none }

</style>

复制代码

运行结果：

这样看起来就舒服多啦！但是还有个问题：那个三角箭头太傻大黑粗了，一般我们很少会用这样的箭头，而且我们也不一定非得让它在左边待着，那么怎么修改箭头的样式呢？

在谷歌浏览器以及 Safari 浏览器下我们需要用::-webkit-details-marker伪元素，在火狐浏览器下我们要用::-moz-list-bullet伪元素，比如我们想让它别那么傻大黑粗：

<template>

  <details>

    <summary>project</summary>

    <details>

      <summary>html</summary>

      index.html

    </details>

    <details>

      <summary>css</summary>

      reset.css

    </details>

    <details>

      <summary>js</summary>

      main.js

    </details>

  </details>

</template>



<style>

summary { outline: none }



/* 谷歌、Safari */

::-webkit-details-marker {

    transform: scale(.5);

    color: gray

}



/* 火狐 */

::-moz-list-bullet { color: gray }

</style>

复制代码

运行结果：

是不是没那么傻大黑粗了，不过有时我们不想要这个三角形的箭头，想要的是自己自定义的箭头，那么我们就需要先把这个默认的三角给隐藏掉：

<template>

  <details>

    <summary>project</summary>

    <details>

      <summary>html</summary>

      index.html

    </details>

    <details>

      <summary>css</summary>

      reset.css

    </details>

    <details>

      <summary>js</summary>

      main.js

    </details>

  </details>

</template>



<style>

summary { outline: none }



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }

</style>

复制代码

运行结果：

这回箭头没了，我们只需要在<summary>标签里写个箭头就好了，可以用::before或::after伪元素，也可以直接在里面写个<img>标签，为了让大家能够直接复制代码到 Vue 环境里运行，在这里我们就不用图片了，直接手写<svg>：

<template>

  <details>

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      project

    </summary>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        html

      </summary>

      index.html

    </details>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        css

      </summary>

      reset.css

    </details>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        js

      </summary>

      main.js

    </details>

  </details>

</template>



<style>

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  fill: none;

  stroke: gray

}

</style>

复制代码

运行结果：

箭头是变成自定义的了，但是方向却不智能了，不能像原生箭头那样展开收起时会自动改变方向，但是<details>这个标签好就好在它在展开是会自动在标签里添加一个open属性：

我们可以利用它的这一特点，用属性选择器来让<svg>标签进行旋转：

<template>

  <details>

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      project

    </summary>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        html

      </summary>

      index.html

    </details>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        css

      </summary>

      reset.css

    </details>

    <details>

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        js

      </summary>

      main.js

    </details>

  </details>

</template>



<style>

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



[open] > summary > svg { transform: none }

</style>

复制代码

运行结果：

用 JS 控制 open 属性

既然展开时会自动给<details>标签添加一个open属性，那如果我们用 JS 手动给<details>标签添加或删除open属性，<details>标签会随之展开收起吗？

比如我们用定时器，每隔1秒就自动展开一个，同时收起上一个已被展开过的标签：

<template>

  <details v-for="({title, content}, index) of list" :key="title" :open="openIndex === index">

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      {{ title }}

    </summary>

    {{ content }}

  </details>

</template>



<script>

import { defineComponent, ref, onBeforeUnmount } from 'vue'



export default defineComponent(() => {

  const list = [{

    title: 'html',

    content: 'index.html'

  }, {

    title: 'css',

    content: 'reset.css'

  }, {

    title: 'js',

    content: 'main.js'

  }]



  const openIndex = ref(-1)



  const interval = setInterval(() => openIndex.value === list.length

    ? openIndex.value = 0

    : openIndex.value++

  , 1000)



  onBeforeUnmount(() => clearInterval(interval))



  return { list, openIndex }

})

</script>



<style>

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



[open] > summary > svg { transform: none }

</style>

复制代码

运行结果：

既然能靠控制open属性来控制元素的展开收起，那么手风琴效果也很好实现了：只需要保证在当前列表中仅有一个<details>标签有open属性，点击别的标签时就去掉另一个标签的open属性即可：

<template>

  <details

    v-for="({title, content}, index) of list"

    :key="title"

    :open="openIndex === index"

    @toggle="onChange($event, index)"

  >

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      {{ title }}

    </summary>

    {{ content }}

  </details>

</template>



<script>

import { defineComponent, ref } from 'vue'



export default defineComponent(() => {

  const list = [{

    title: 'html',

    content: 'index.html'

  }, {

    title: 'css',

    content: 'reset.css'

  }, {

    title: 'js',

    content: 'main.js'

  }]



  const openIndex = ref(-1)



  const onChange = ({ target }, i) => target.open && (openIndex.value = i)



  return { list, openIndex, onChange }

})

</script>



<style>

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



[open] > summary > svg { transform: none }

</style>

复制代码

运行结果：

⚠️需要注意的是，在<details>标签展开收起时会触发一个 toggle 事件，和 click、mousemove 等事件用法一致，也会接收一个 event 对象的参数，event.target 是当前触发事件的 DOM，也就是<details>，它会有一个.open属性，值为 true 或 false，代表是否展开收起。

加入动画

那么接下来离一个理想的手风琴效果只差最后一步了：过渡动画

但过渡动画这里有坑，我们先来分析一下思路：在平时就给<details>标签里的内容区(除第一个出现的

<template>

  <details

    v-for="({title, content}, index) of list"

    :key="title"

    :open="openIndex === index"

    @toggle="onChange($event, index)"

  >

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      {{ title }}

    </summary>

    <ul>

      <li v-for="doc of content" :key="doc">{{ doc }}</li>

    </ul>

  </details>

</template>



<script>

import { defineComponent, ref } from 'vue'



export default defineComponent(() => {

  const list = [{

    title: 'html',

    content: ['index.html', 'banner.html', 'login.html', '404.html']

  }, {

    title: 'css',

    content: ['reset.css', 'header.css', 'banner.css', 'footer.css']

  }, {

    title: 'js',

    content: ['index.js', 'main.js', 'javascript.js']

  }]



  const openIndex = ref(-1)



  const onChange = ({ target }, i) => target.open && (openIndex.value = i)



  return { list, openIndex, onChange }

})

</script>



<style>

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



details > ul {

  max-height: 0;

  margin: 0;

  overflow: hidden;

}



[open] > summary > svg { transform: none }

[open] > ul { max-height: 120px }

</style>

复制代码

<template>

  <details

    v-for="({title, content}, index) of list"

    :key="title"

    :open="openIndex === index"

    @toggle="onChange($event, index)"

  >

    <summary>

      <svg width="16" height="7">

        <polyline points="0,0 8,7 16,0"/>

      </svg>

      {{ title }}

    </summary>

    <ul>

      <li v-for="doc of content" :key="doc">{{ doc }}</li>

    </ul>

  </details>

</template>



<script>

import { defineComponent, ref } from 'vue'



export default defineComponent(() => {

  const list = [{

    title: 'html',

    content: ['index.html', 'banner.html', 'login.html', '404.html']

  }, {

    title: 'css',

    content: ['reset.css', 'header.css', 'banner.css', 'footer.css']

  }, {

    title: 'js',

    content: ['index.js', 'main.js', 'javascript.js']

  }]



  const openIndex = ref(-1)



  const onChange = ({ target }, i) => target.open && (openIndex.value = i)



  return { list, openIndex, onChange }

})

</script>



<style lang="scss">

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



details > ul {

  max-height: 0;

  margin: 0;

  overflow: hidden;

}



[open] {

  > summary > svg { transform: none }

  > ul { animation: open .2s both }

}



@keyframes open {

  to { max-height: 120px }

}

</style>

复制代码

<template>

  <template v-for="({title, content}, index) of list" :key="title">

    <details

      :open="openIndex === index"

      @toggle="onChange($event, index)"

    >

      <summary>

        <svg width="16" height="7">

          <polyline points="0,0 8,7 16,0"/>

        </svg>

        {{ title }}

      </summary>

    </details>

    <ul>

      <li v-for="doc of content" :key="doc">{{ doc }}</li>

    </ul>

  </template>

</template>



<script>

import { defineComponent, ref } from 'vue'



export default defineComponent(() => {

  const list = [{

    title: 'html',

    content: ['index.html', 'banner.html', 'login.html', '404.html']

  }, {

    title: 'css',

    content: ['reset.css', 'header.css', 'banner.css', 'footer.css']

  }, {

    title: 'js',

    content: ['index.js', 'main.js', 'javascript.js']

  }]



  const openIndex = ref(-1)



  const onChange = ({ target }, i) => target.open && (openIndex.value = i)



  return { list, openIndex, onChange }

})

</script>



<style lang="scss">

summary {

  position: relative;

  padding-left: 20px;

  outline: none

}



/* 谷歌、Safari */

::-webkit-details-marker { display: none }



/* 火狐 */

::-moz-list-bullet { font-size: 0 }



svg {

  position: absolute;

  left: 0;

  top: 50%;

  transform: rotate(180deg);

  transition: transform .2s;

  fill: none;

  stroke: gray

}



ul {

  max-height: 0;

  margin: 0;

  transition: max-height .2s;

  overflow: hidden

}



[open] {

  > summary > svg { transform: none }

  + ul { max-height: 120px }

}

</style>

复制代码

前言

我们都知道 InnoDB 在模糊查询数据时使用 "%xx" 会导致索引失效，但有时需求就是如此，类似这样的需求还有很多，例如，搜索引擎需要根基用户数据的关键字进行全文查找，电子商务网站需要根据用户的查询条件，在可能需要在商品的详细介绍中进行查找，这些都不是B+树索引能很好完成的工作。

通过数值比较，范围过滤等就可以完成绝大多数我们需要的查询了。但是，如果希望通过关键字的匹配来进行查询过滤，那么就需要基于相似度的查询，而不是原来的精确数值比较，全文索引就是为这种场景设计的。

全文索引（Full-Text Search）是将存储于数据库中的整本书或整篇文章中的任意信息查找出来的技术。它可以根据需要获得全文中有关章、节、段、句、词等信息，也可以进行各种统计和分析。

在早期的 MySQL 中，InnoDB 并不支持全文检索技术，从 MySQL 5.6 开始，InnoDB 开始支持全文检索。

倒排索引

全文检索通常使用倒排索引（inverted index）来实现，倒排索引同 B+Tree 一样，也是一种索引结构。它在辅助表中存储了单词与单词自身在一个或多个文档中所在位置之间的映射，这通常利用关联数组实现，拥有两种表现形式：

• inverted file index：{单词，单词所在文档的id}


• full inverted index：{单词，（单词所在文档的id，再具体文档中的位置）}

上图为 inverted file index 关联数组，可以看到其中单词"code"存在于文档1,4中，这样存储再进行全文查询就简单了，可以直接根据 Documents 得到包含查询关键字的文档；而 full inverted index 存储的是对，即（DocumentId,Position），因此其存储的倒排索引如下图，如关键字"code"存在于文档1的第6个单词和文档4的第8个单词。

相比之下，full inverted index 占用了更多的空间，但是能更好的定位数据，并扩充一些其他搜索特性。

全文检索

创建全文索引

1、创建表时创建全文索引语法如下：

CREATE TABLE table_name ( id INT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY, author VARCHAR(200), 

title VARCHAR(200), content TEXT(500), FULLTEXT full_index_name (col_name) ) ENGINE=InnoDB;

复制代码

输入查询语句：

SELECT table_id, name, space from INFORMATION_SCHEMA.INNODB_TABLES

WHERE name LIKE 'test/%';

复制代码

上述六个索引表构成倒排索引，称为辅助索引表。当传入的文档被标记化时，单个词与位置信息和关联的DOC_ID，根据单词的第一个字符的字符集排序权重，在六个索引表中对单词进行完全排序和分区。

2、在已创建的表上创建全文索引语法如下：

CREATE FULLTEXT INDEX full_index_name ON table_name(col_name);

复制代码

使用全文索引

MySQL 数据库支持全文检索的查询，全文索引只能在 InnoDB 或 MyISAM 的表上使用，并且只能用于创建 char,varchar,text 类型的列。

其语法如下：

MATCH(col1,col2,...) AGAINST(expr[search_modifier])

search_modifier:

{

    IN NATURAL LANGUAGE MODE

    | IN NATURAL LANGUAGE MODE WITH QUERY EXPANSION

    | IN BOOLEAN MODE

    | WITH QUERY EXPANSION

}

复制代码

全文搜索使用 MATCH() AGAINST()语法进行，其中，MATCH()采用逗号分隔的列表，命名要搜索的列。AGAINST()接收一个要搜索的字符串，以及一个要执行的搜索类型的可选修饰符。全文检索分为三种类型：自然语言搜索、布尔搜索、查询扩展搜索，下面将对各种查询模式进行介绍。

Natural Language

自然语言搜索将搜索字符串解释为自然人类语言中的短语，MATCH()默认采用 Natural Language 模式，其表示查询带有指定关键字的文档。

接下来结合demo来更好的理解Natural Language

SELECT

    count(*) AS count 

FROM

    `fts_articles` 

WHERE

    MATCH ( title, body ) AGAINST ( 'MySQL' );

复制代码

上述语句，查询 title,body 列中包含 'MySQL' 关键字的行数量。上述语句还可以这样写：

SELECT

    count(IF(MATCH ( title, body ) 

    against ( 'MySQL' ), 1, NULL )) AS count 

FROM

    `fts_articles`;

复制代码

上述两种语句虽然得到的结果是一样的，但从内部运行来看，第二句SQL的执行速度更快些，因为第一句SQL（基于where索引查询的方式）还需要进行相关性的排序统计，而第二种方式是不需要的。

还可以通过SQL语句查询相关性：

SELECT

    *,

    MATCH ( title, body ) against ( 'MySQL' ) AS Relevance 

FROM

    fts_articles;

复制代码

相关性的计算依据以下四个条件：

• word 是否在文档中出现


• word 在文档中出现的次数


• word 在索引列中的数量


• 多少个文档包含该 word

对于 InnoDB 存储引擎的全文检索，还需要考虑以下的因素：

• 查询的 word 在 stopword 列中，忽略该字符串的查询


• 查询的 word 的字符长度是否在区间 [ innodb_ft_min_token_size,innodb_ft_max_token_size] 内

如果词在 stopword 中，则不对该词进行查询，如对 'for' 这个词进行查询，结果如下所示：

SELECT

    *,

    MATCH ( title, body ) against ( 'for' ) AS Relevance 

FROM

    fts_articles;

复制代码