-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
1 lines (1 loc) · 145 KB
/
search.xml
1
[{"title":"浅析 URL","url":"http://yoursite.com/2019/08/31/浅析-URL/","content":"<h1 id=\"浅析-URL\"><a href=\"#浅析-URL\" class=\"headerlink\" title=\"浅析 URL\"></a>浅析 URL</h1><h2 id=\"URL-包含哪几部分，每部分分别有什么作用\"><a href=\"#URL-包含哪几部分，每部分分别有什么作用\" class=\"headerlink\" title=\"URL 包含哪几部分，每部分分别有什么作用\"></a>URL 包含哪几部分，每部分分别有什么作用</h2><p>URL=协议+域名/IP+端口号+路径+查询字符串+锚点<br>比如：<img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E6%B5%85%E6%9E%90URL/URL%E4%B8%BE%E4%BE%8B.png\" alt=\"URL举例\"></p>\n<p>下面来分别介绍一下各部分的含义和作用：</p>\n<p><strong>协议 （protocol）</strong><br>协议是计算机通信所必须遵循的规则，简单来说就是规定书写的请求格式，响应的格式等。</p>\n<p>这里主要讲 HTTP 协议：</p>\n<ul>\n<li>HTTP 协议是一个应用层的协议</li>\n<li>HTTP 协议是无状态的:无状态是指，如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。</li>\n<li>HTTP 协议是基于 TCP 和 IP 的两个协议<br><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E6%B5%85%E6%9E%90URL/Http%E5%9F%BA%E4%BA%8ETCP%E5%92%8CIP.png\" alt=\"Http基于TCP和IP\"></li>\n</ul>\n<p><strong>域名</strong><br>域名是 IP 的别称。</p>\n<p>域名和 IP 是如何对应起来的呢？<br>通过 DNS。当你输入一个 url 时，域名解析服务器（DNS）就把域名解析为 IP 地址，从而去找到相应的设备。</p>\n<ul>\n<li>一个域名对应多个 IP 叫做负载均衡</li>\n<li>一个 IP 对应多个域名叫做共享主机</li>\n</ul>\n<p>域名的分类：</p>\n<ul>\n<li>com 是顶级域名</li>\n<li>baidu.com 二级域名（俗称一级域名）</li>\n<li><a href=\"http://www.baidu.com\" target=\"_blank\" rel=\"noopener\">www.baidu.com</a> 三级域名（俗称二级域名）</li>\n</ul>\n<p><strong>IP （Internet Protocol）</strong><br>IP 的主要作用是定位一台设备。</p>\n<p>IP 分为内网和外网，如下图：<br><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E6%B5%85%E6%9E%90URL/IP%20%E5%88%86%E4%B8%BA%E5%86%85%E7%BD%91%E5%92%8C%E5%A4%96%E7%BD%91.png\" alt=\"IP 分为内网和外网\"></p>\n<p>通过上图可以得知一个流程：</p>\n<ul>\n<li>路由器连接上电信的服务器，从而得到一个外网 IP（这个外网 IP 会在路由器重启后再次更新）</li>\n<li>路由器会在家里创建一个内网，对在内网的每一台设备分配一个 内网 IP</li>\n<li>我们用电脑和手机连接路由器广播出来的 WIFI</li>\n</ul>\n<p>路由器（网关）的功能：</p>\n<ul>\n<li>路由器有两个 IP，内网 IP 和外网 IP</li>\n<li>内网中的设备能互相访问，但不能直接访问外网</li>\n<li>外网中的设备能互相访问，但不能直接访问内网</li>\n<li>内网设备如果要访问外网，必须要经过路由器进行中转</li>\n<li>外网设备如果要访问外网，必须要经过路由器进行中转</li>\n<li>外网和内网就像两个独立的空间，无法互通，唯一的连接点就是路由器</li>\n</ul>\n<p>几个特殊的 IP:</p>\n<ul>\n<li>127.0.0.1 表示自己</li>\n<li>localhost 通过 hosts（电脑中的一个文件） 指定为自己</li>\n<li>0.0.0.0 不表示任何设备</li>\n</ul>\n<p><strong>端口号</strong><br>通过 IP 定位到服务器后，还要查询端口，不同端口提供不同的服务。</p>\n<p>常用的端口：</p>\n<ul>\n<li>要提供 Http 服务，使用 80 端口</li>\n<li>要提供 Https 服务，使用 443 端口</li>\n<li>一共有 65535 个端口</li>\n</ul>\n<p>端口的使用规则：</p>\n<ul>\n<li>0-1023 号端口是留给系统用的</li>\n<li>要使用 1024 号端口必须有管理员权限</li>\n<li>其他端口可以给普通用户使用</li>\n<li>比如 http-server 默认使用 8080 号端口</li>\n<li>一个端口被占用，就只能换用其他端口</li>\n</ul>\n<p>记住：IP 和端口缺一不可</p>\n<p><strong>路径</strong><br>路径可以做到：一个域名下请求不同的页面。</p>\n<blockquote>\n<p><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/HTML\" target=\"_blank\" rel=\"noopener\">https://developer.mozilla.org/zh-CN/docs/Web/HTML</a></p>\n</blockquote>\n<p><strong>查询字符串</strong><br>查询字符串可以做到：同一个页面下，不同内容。</p>\n<blockquote>\n<p><a href=\"https://www.baidu.com/s?wd=hi\" target=\"_blank\" rel=\"noopener\">https://www.baidu.com/s?wd=hi</a></p>\n</blockquote>\n<p><strong>锚点</strong><br>锚点可以做到：同一个内容下，不同位置。</p>\n<blockquote>\n<p><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS#教程\" target=\"_blank\" rel=\"noopener\">https://developer.mozilla.org/zh-CN/docs/Web/CSS#教程</a></p>\n</blockquote>\n<p>锚点复制之后粘贴，是无法被看到的，因为锚点不会传给服务器</p>\n<h2 id=\"DNS-的作用是什么，nslookup-命令怎么用\"><a href=\"#DNS-的作用是什么，nslookup-命令怎么用\" class=\"headerlink\" title=\"DNS 的作用是什么，nslookup 命令怎么用\"></a>DNS 的作用是什么，nslookup 命令怎么用</h2><p><strong>DNS 的作用：</strong><br>把域名转换成网络可识别的 IP 地址。</p>\n<p><strong>nslookup 命令怎么用</strong></p>\n<ul>\n<li>通过域名 ，查询 IP 地址：<code>nslookup 域名</code></li>\n<li>通过 IP 地址 ，查询域名：<code>nslookup IP地址</code></li>\n</ul>\n<h2 id=\"IP-的作用是什么，ping-命令怎么用\"><a href=\"#IP-的作用是什么，ping-命令怎么用\" class=\"headerlink\" title=\"IP 的作用是什么，ping 命令怎么用\"></a>IP 的作用是什么，ping 命令怎么用</h2><p><strong>IP 的作用是什么：</strong><br>IP 的主要作用是定位一台设备。</p>\n<p><strong>ping 命令怎么用</strong><br>ping 命令主要用于测试网络连通性。<br>ping 命令发送数据使用的是 ICMP 协议。</p>\n<ul>\n<li><code>ping 域名</code></li>\n<li><code>ping IP地址</code></li>\n</ul>\n<h2 id=\"域名是什么，分别哪几类域名\"><a href=\"#域名是什么，分别哪几类域名\" class=\"headerlink\" title=\"域名是什么，分别哪几类域名\"></a>域名是什么，分别哪几类域名</h2><p>域名是 IP 的别称。</p>\n<p>域名的分类：</p>\n<ul>\n<li>com 是顶级域名</li>\n<li>baidu.com 二级域名（俗称一级域名）</li>\n<li><a href=\"http://www.baidu.com\" target=\"_blank\" rel=\"noopener\">www.baidu.com</a> 三级域名（俗称二级域名）</li>\n</ul>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><p><a href=\"https://static.xiedaimala.com/xdml/file/3ac7c224-c23d-491f-84b5-4fabfbeab9b8/2019-8-27-11-33-39.pdf\" target=\"_blank\" rel=\"noopener\">HTTP 入门</a></p>\n","categories":["URL"],"tags":["URL"]},{"title":"空元素是什么？可替换元素又是什么？","url":"http://yoursite.com/2019/08/08/空元素是什么？可替换元素又是什么？/","content":"<h2 id=\"一-空元素\"><a href=\"#一-空元素\" class=\"headerlink\" title=\"一. 空元素\"></a>一. 空元素</h2><h3 id=\"空元素的含义\"><a href=\"#空元素的含义\" class=\"headerlink\" title=\"空元素的含义\"></a><strong>空元素的含义</strong></h3><p>用我的话说来解释空元素，就是不存在子节点（文字节点呀之类的），没有内容的元素。而且空元素是自封闭标签，比如：<code><br/></code></p>\n<p>再比如：<br>那些非空标签都能在里面嵌套子元素：</p>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>a</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>a</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>而空元素就不能这样写:<code><hr <a></a> /></code> ×<br>如果想试图使用一个闭标签，也是错误的：<code><hr> <a></a> <hr/></code> ×</p>\n<h3 id=\"列举几个常见的空元素：\"><a href=\"#列举几个常见的空元素：\" class=\"headerlink\" title=\"列举几个常见的空元素：\"></a><strong>列举几个常见的空元素：</strong></h3><ul>\n<li><code><br/></code></li>\n<li><code><hr/></code></li>\n<li><code><input/></code></li>\n<li><code><img/></code></li>\n<li><code><source/></code></li>\n<li><code><link/></code></li>\n<li><code><meta/></code></li>\n</ul>\n<h2 id=\"二-可替换元素\"><a href=\"#二-可替换元素\" class=\"headerlink\" title=\"二. 可替换元素\"></a>二. 可替换元素</h2><p>我们都知道元素标签分为行内元素，块元素，还有行内块元素，可你还知道有可替换元素这一类吗？</p>\n<p>其实平时我们常用到的标签 <code><img/></code> 就是个可替换元素标签。标签 <code><img/></code> 是行内元素，在使用 img 的时候我们会发现其实是可以修改它的宽高的，这是为什么呢？是因为可替换元素（在这儿是 img 元素）在其显示中生成了框，这就是有些内联元素能够设置宽高的原因。</p>\n<h3 id=\"可替换元素的含义\"><a href=\"#可替换元素的含义\" class=\"headerlink\" title=\"可替换元素的含义\"></a><strong>可替换元素的含义</strong></h3><p>在 mdn 上的解释是这样的：<br>在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。</p>\n<p>我的理解是，这些可替换元素的样式可以由标签本身来决定（比如<code><img/></code>的图片），不是由自己写的 css 来控制的。也就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。</p>\n<p>我举个例子来解释：<br>比如 <code><img/></code> 标签的图片就是由 src 控制，图片是可替换的。<br>再比如 <code><video/></code> 标签的 音频由 src 控制，音频是可替换的。</p>\n<h3 id=\"以下列举几个常见的可替换元素\"><a href=\"#以下列举几个常见的可替换元素\" class=\"headerlink\" title=\"以下列举几个常见的可替换元素\"></a><strong>以下列举几个常见的可替换元素</strong></h3><ul>\n<li><code><img/></code></li>\n<li><code><input/></code></li>\n<li><code><textarea/></code></li>\n<li><code><select/></code></li>\n<li><code><canvas/></code></li>\n<li><code><audio/></code></li>\n<li><code><video/></code></li>\n</ul>\n<h2 id=\"三-参考链接\"><a href=\"#三-参考链接\" class=\"headerlink\" title=\"三.参考链接\"></a>三.参考链接</h2><p><a href=\"https://www.cnblogs.com/lalong/p/9330609.html\" target=\"_blank\" rel=\"noopener\">https://www.cnblogs.com/lalong/p/9330609.html</a></p>\n","categories":["元素标签"],"tags":["空元素 可替换元素 html 标签"]},{"title":"git 配置和使用","url":"http://yoursite.com/2019/08/06/git-配置和语法/","content":"<h2 id=\"git-的-6-行配置\"><a href=\"#git-的-6-行配置\" class=\"headerlink\" title=\"git 的 6 行配置\"></a>git 的 6 行配置</h2><pre><code>git config --global user.name 你的英文名\ngit config --global user.email 你的邮箱\ngit config --global push.default simple\ngit config --global core.quotepath false\ngit config --global core.editor "code --wait"\ngit config --global core.autocrlf input</code></pre><p>查看所有配置</p>\n<pre><code>git config --global --list</code></pre><p>注意：你需要保证 code 是可以直接在命令行执行的，如果不行就在 PATH 里添加 vscode 的路径，比如添加路径:</p>\n<pre><code>~\\Microsoft VS Code\\bin</code></pre><h2 id=\"git-的介绍\"><a href=\"#git-的介绍\" class=\"headerlink\" title=\"git 的介绍\"></a>git 的介绍</h2><p>版本控制：git 可以把每个版本自动存起来，想回退到某一个版本直接命令回退就好。这个在工作时特别有用</p>\n<h2 id=\"git-命令和文件\"><a href=\"#git-命令和文件\" class=\"headerlink\" title=\"git 命令和文件\"></a>git 命令和文件</h2><p>.gitignore 里面写明那些文件不被提交</p>\n<p><strong>git 命令</strong></p>\n<ul>\n<li>git config</li>\n<li>git status -sb</li>\n<li>git init 创建一个本地仓库</li>\n<li>git add</li>\n<li>git commit -m “” 提交到了.git 目录</li>\n<li>git commit -v 用来提交，但是这个命令可以帮助我们回顾改了些什么，使得理由写的详细些</li>\n<li>git log 查看历史版本</li>\n<li>git reflog 查看所有历史版本，包括切换版本的历史操作</li>\n<li>git reset –hard XXXXX （运行 reset 命令前，一定要确保重要代码已经提交（commit）了，否则有可能会删除一些文件）</li>\n<li>git branch XX 创建分支 （会基于本地仓库里最新一次 commit（提交），创建一个新的分支 x）</li>\n<li>git branch -d XX 删除分支</li>\n<li>git checkout XX （会让当前目录的内容变成本地仓库里 x 分支的最新内容（可能会删除当前目录里的一些文件））</li>\n<li>git merge</li>\n</ul>\n<h2 id=\"两种工作方式\"><a href=\"#两种工作方式\" class=\"headerlink\" title=\"两种工作方式\"></a>两种工作方式</h2><p><strong>多个版本切换工作</strong></p>\n<p>场景一：boss 觉得几天前写的那个页面比较好，叫我改回去（mmmmmp）<br>这时候就需要使用 git 的版本回退命令，回退到之前版本：</p>\n<pre><code>git reset --hard XXXXX</code></pre><p><strong>多线,多分支工作</strong></p>\n<p>场景二：boss 觉得现在的页面好，lady 觉得黑色主题好一点（emmmm）<br>这时就需要两个页面都做？复制一遍原来的代码再改？不这需要 git 建立多个分支，来写 lady 需要的页面：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\" spellcheck=\"true\">// 创建分支</span>\ngit branch XX\n<span class=\"token comment\" spellcheck=\"true\">// 切换分支</span>\ngit checkout XX\n\n<span class=\"token comment\" spellcheck=\"true\">// 。。。</span>\n\n如果切换分支时冲突了，就提交一下</code></pre>\n<p><strong>合并分支</strong></p>\n<pre><code>git merge X</code></pre><p>如果发现冲突,用 git status -sb 查看发生冲突的文件,然后用 vscode 打开文件，最后修改，再 git add , git commit 一下：</p>\n<pre><code>git status -sb\nstart XX.html\ngit add\ngit commit</code></pre>","categories":["工具"],"tags":["git"]},{"title":"Canvas 的使用","url":"http://yoursite.com/2019/08/04/Canvas的使用/","content":"<p>Canvas 元素用于在网页上绘制图形….<br><code><canvas></canvas></code> 是 H5 新增的标签，主要用于绘制图像，但它本身不具有绘制能力，简单来说 canvas 通过 js 来绘制 2D 图形。<br>canvas 可以看成一块画布，使用<code>getContext()</code>方法可以返回一个对象，该对象提供了众多属性和方法去绘制图形。</p>\n<h2 id=\"canvas-的使用方法\"><a href=\"#canvas-的使用方法\" class=\"headerlink\" title=\"canvas 的使用方法\"></a>canvas 的使用方法</h2><pre class=\" language-javascript\"><code class=\"language-javascript\">首先添加一个canvas元素\n<span class=\"token operator\"><</span>canvas id<span class=\"token operator\">=</span><span class=\"token string\">'canvas'</span><span class=\"token operator\">></span><span class=\"token operator\"><</span><span class=\"token operator\">/</span>canvas<span class=\"token operator\">></span>\n\n<span class=\"token keyword\">var</span> canvas<span class=\"token operator\">=</span>document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas'</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//获取canvas元素</span>\n<span class=\"token keyword\">var</span> ctx<span class=\"token operator\">=</span>canvas<span class=\"token punctuation\">.</span><span class=\"token function\">getContext</span><span class=\"token punctuation\">(</span><span class=\"token string\">'2d'</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//访问绘画上下文</span>\n\n<span class=\"token comment\" spellcheck=\"true\">// 添加画布样式</span>\nctx<span class=\"token punctuation\">.</span>fillStyle<span class=\"token operator\">=</span><span class=\"token string\">'orange'</span> <span class=\"token comment\" spellcheck=\"true\">//fillStyle设置图形填充颜色</span>\nctx<span class=\"token punctuation\">.</span>strokeStyle<span class=\"token operator\">=</span><span class=\"token string\">'red'</span> <span class=\"token comment\" spellcheck=\"true\">//strokeStyle设置图形的轮廓颜色</span>\nctx<span class=\"token punctuation\">.</span>lineWidth<span class=\"token operator\">=</span><span class=\"token number\">3</span> <span class=\"token comment\" spellcheck=\"true\">//lineWidth设置图形的线条宽度</span>\n\n<span class=\"token comment\" spellcheck=\"true\">// 绘制矩形</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">fillRect</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">,</span>width<span class=\"token punctuation\">,</span>height<span class=\"token punctuation\">)</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">clearRect</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">,</span>width<span class=\"token punctuation\">,</span>height<span class=\"token punctuation\">)</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">strokeRect</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">,</span>width<span class=\"token punctuation\">,</span>height<span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//绘制一个矩形的边框</span>\n\n<span class=\"token comment\" spellcheck=\"true\">//绘制路径</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">beginPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//新建一条路径</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">moveTo</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//将笔触移动到指定的坐标上</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">lineTo</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//绘制一条从当前位置到制定（x,y）位置的直线</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">stroke</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//开始绘制已定义路径</span>\n\n<span class=\"token comment\" spellcheck=\"true\">//绘制圆形</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">beginPath</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">arc</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span>y<span class=\"token punctuation\">,</span>r<span class=\"token punctuation\">,</span>startAngle<span class=\"token punctuation\">,</span>endAngle<span class=\"token punctuation\">,</span>counterclockwise<span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//counterclockwise默认为true,表示逆时针绘制圆</span>\nctx<span class=\"token punctuation\">.</span><span class=\"token function\">stroke</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token comment\" spellcheck=\"true\">//添加阴影</span>\nctx<span class=\"token punctuation\">.</span>shadowColor<span class=\"token operator\">=</span><span class=\"token string\">'black'</span>\nctx<span class=\"token punctuation\">.</span>shadowBlur<span class=\"token operator\">=</span><span class=\"token number\">20</span><span class=\"token comment\" spellcheck=\"true\">//设定阴影模糊程度</span></code></pre>\n<p>总结常用 API:</p>\n<ul>\n<li>getContext() 访问绘画上下文</li>\n<li>fillStyle 图形填充颜色</li>\n<li>strokeStyle 图形的轮廓颜色</li>\n<li>beginPath() 新建一条路径</li>\n<li>closePath() 闭合图形</li>\n<li>moveTo() 笔触移动到指定的坐标上</li>\n<li>lineTo() 绘制一条从当前位置到指定（x,y）位置的直线</li>\n<li>stroke() 开始绘制已定义路径</li>\n<li>fill() 填充路径的内容（实心）</li>\n</ul>\n<p>附上一个测试 demo:</p>\n<p class=\"codepen\" data-height=\"417\" data-theme-id=\"0\" data-default-tab=\"js,result\" data-user=\"lxyoryxl\" data-slug-hash=\"ZgJEdg\" style=\"height: 417px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"ZgJEdg\">\n <span>See the Pen <a href=\"https://codepen.io/lxyoryxl/pen/ZgJEdg/\" target=\"_blank\" rel=\"noopener\">\n ZgJEdg</a> by lxy (<a href=\"https://codepen.io/lxyoryxl\" target=\"_blank\" rel=\"noopener\">@lxyoryxl</a>)\n on <a href=\"https://codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen</a>.</span>\n</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\n<p>说到 canvas，其实还有一个不得不提到的东西就是 svg,svg 出来的要比 canvas 早很多，那么下面就说下这两个的区别吧：</p>\n<ol>\n<li>canvas 绘制的图形是标量图，svg 是矢量图<br>所谓矢量图，就是放大图形时不会失真，这很适合用来做地图。</li>\n<li>canvas 绘图用 js 来实现的，svg 用标签实现</li>\n</ol>\n<p>最后附上 MDN 上的 <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes\" target=\"_blank\" rel=\"noopener\">Canvas 教程</a>，里面有很多有趣的实例</p>\n<p><strong>重点小知识：</strong></p>\n<ol>\n<li><p>在 canvas 标签设置 width,height 是设置的绘图表面和元素本身的大小</p>\n</li>\n<li><p>在 css 里设置 canvas 的 width,heigth 是设置的元素本身的大小</p>\n</li>\n<li><p>由于上面两个原因，当绘图表面比元素本身小时就会产生拉伸效果，这儿是例子：<a href=\"http://js.jirengu.com/pukel/2/edit\" target=\"_blank\" rel=\"noopener\">demo</a></p>\n</li>\n</ol>\n","categories":["Html5"],"tags":["Canvas H5"]},{"title":"JS中的继承","url":"http://yoursite.com/2019/08/01/Js中的继承/","content":"<h2 id=\"Class-继承\"><a href=\"#Class-继承\" class=\"headerlink\" title=\"Class 继承\"></a>Class 继承</h2><pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">Student</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token function\">hello</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Hello\"</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>写一个 class 继承一个 class:</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">My</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">Student</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">,</span> grade<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">super</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\" spellcheck=\"true\">//用 super 继承父类的构造方法</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>grade <span class=\"token operator\">=</span> grade\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token function\">hello</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"hello\"</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<h2 id=\"原型继承\"><a href=\"#原型继承\" class=\"headerlink\" title=\"原型继承\"></a>原型继承</h2><p>写一个 构造函数：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">Student</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n<span class=\"token punctuation\">}</span>\nStudent<span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>hello <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"hello\"</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>写一个 PrimaryStudent 方法, 它可以调用 Student 的方法，但是这并没有实现真正的继承，必须想办法把原型链修改为：<br><code>new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null</code><br>下面再封装一个 inherits 方法实现继承:</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">PrimaryStudent</span><span class=\"token punctuation\">(</span>prop<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n Student<span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> prop<span class=\"token punctuation\">)</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>grad <span class=\"token operator\">=</span> prop<span class=\"token punctuation\">.</span>grad\n<span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">inherits</span><span class=\"token punctuation\">(</span>Child<span class=\"token punctuation\">,</span> Parent<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> F <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n F<span class=\"token punctuation\">.</span>prototype <span class=\"token operator\">=</span> Parents<span class=\"token punctuation\">.</span>prototype\n Child<span class=\"token punctuation\">.</span>prototype <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">F</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n Child<span class=\"token punctuation\">.</span>prototype<span class=\"token punctuation\">.</span>constractor <span class=\"token operator\">=</span> Child\n<span class=\"token punctuation\">}</span></code></pre>\n<p>用 Class 继承 相比原来的 原型继承 极大的简化了代码</p>\n<h2 id=\"new-运算符做了什么？\"><a href=\"#new-运算符做了什么？\" class=\"headerlink\" title=\"new 运算符做了什么？\"></a>new 运算符做了什么？</h2><pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> obj <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\nobj<span class=\"token punctuation\">.</span>__proto__ <span class=\"token operator\">=</span> F<span class=\"token punctuation\">.</span>prototype\nF<span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">)</span></code></pre>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><p><a href=\"https://www.liaoxuefeng.com/wiki/1022910821149312/1072866346339712\n\" target=\"_blank\" rel=\"noopener\">廖雪峰的 class 继承 原型继承</a></p>\n","categories":["ES6"],"tags":["class ES6"]},{"title":"解决单行或者多行文本溢出的方法总结","url":"http://yoursite.com/2019/07/30/解决单行或者多行文本溢出的方法总结/","content":"<p>本文总结了：<br>‘列表文字太多,溢出使用省略号’ 的解决方法<br>包括单行文字溢出，多行文本溢出，主要使用 css 来做</p>\n<a id=\"more\"></a>\n\n<h3 id=\"一-前言\"><a href=\"#一-前言\" class=\"headerlink\" title=\"一. 前言\"></a>一. 前言</h3><p>今天再写页面的时候，看到几行文字，感觉这部分的文字在这个部分显得很冗余，而且因为文字长度的不确定性，还容易影响布局。</p>\n<p>然后我查看了下百度新闻的网页，发现他们都是用对文字溢出做了处理，显示的文字内容多少有规定，末尾用省略号代替。</p>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E8%A7%A3%E5%86%B3%E5%8D%95%E8%A1%8C%E6%88%96%E8%80%85%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/baidu_news.png\" alt=\"baidu_news\"></p>\n</blockquote>\n<p>于是就搜了下‘列表文字太多,溢出使用省略号’的解决方法，本文就此进行总结。</p>\n<br>\n\n<h3 id=\"二-单行文本溢出\"><a href=\"#二-单行文本溢出\" class=\"headerlink\" title=\"二. 单行文本溢出\"></a>二. 单行文本溢出</h3><p>主要使用 <code>text-overflow</code> 属性，具体使用如下：</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token property\">over-flow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n<span class=\"token property\">text-overflow</span><span class=\"token punctuation\">:</span> ellipsis<span class=\"token punctuation\">;</span>\n<span class=\"token property\">white-space</span><span class=\"token punctuation\">:</span> nowrap<span class=\"token punctuation\">;</span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E8%A7%A3%E5%86%B3%E5%8D%95%E8%A1%8C%E6%88%96%E8%80%85%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA.png\" alt=\"单行\"></p>\n</blockquote>\n<br>\n\n<h3 id=\"三-多行文本溢出\"><a href=\"#三-多行文本溢出\" class=\"headerlink\" title=\"三. 多行文本溢出\"></a>三. 多行文本溢出</h3><h5 id=\"方法一-使用-webkit-line-clamp-属性\"><a href=\"#方法一-使用-webkit-line-clamp-属性\" class=\"headerlink\" title=\"方法一. 使用 -webkit-line-clamp 属性\"></a>方法一. 使用 -webkit-line-clamp 属性</h5><p>-webkit-line-clamp 属性限制块元素显示的文本行数，但它是一个不规范的属性，它没有在 CSS 的规范草案中。该方法主要适用与 webkit 内核的浏览器或移动端,firefox 不适用。具体使用如下：</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token property\">display</span><span class=\"token punctuation\">:</span> -webkit-box<span class=\"token punctuation\">;</span>\n<span class=\"token property\">-webkit-line-clamp</span><span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n<span class=\"token property\">-webkit-box-orient</span><span class=\"token punctuation\">:</span> vertical<span class=\"token punctuation\">;</span>\n<span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span></code></pre>\n<br>\n\n<p>这是在 chrome 里的结果：</p>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/lxy17761018921.github.io/master/2019/07/08/%E8%A7%A3%E5%86%B3%E5%8D%95%E8%A1%8C%E6%88%96%E8%80%85%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA.png\" alt=\"chrome 多行\"></p>\n</blockquote>\n<br>\n\n<p>这是在 firefox 里的结果（不支持）：</p>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E8%A7%A3%E5%86%B3%E5%8D%95%E8%A1%8C%E6%88%96%E8%80%85%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA.png?raw=true\" alt=\"firefox 多行\"></p>\n</blockquote>\n<br>\n\n<h5 id=\"方法二-使用-after-伪元素\"><a href=\"#方法二-使用-after-伪元素\" class=\"headerlink\" title=\"方法二.使用 after 伪元素\"></a>方法二.使用 after 伪元素</h5><p>使用伪元素在元素，在文字最后添加省略号 ‘…’，这是一个比较简单靠谱的做法，兼容性较好</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\">xx<span class=\"token pseudo-element\">::after</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">content</span><span class=\"token punctuation\">:</span> <span class=\"token string\">\"...\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E8%A7%A3%E5%86%B3%E5%8D%95%E8%A1%8C%E6%88%96%E8%80%85%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/%E5%A4%9A%E8%A1%8C%E7%81%AB%E7%8B%90.png?raw=true\" alt=\"伪元素 多行\"></p>\n</blockquote>\n<br>\n\n<h3 id=\"四-总结\"><a href=\"#四-总结\" class=\"headerlink\" title=\"四. 总结\"></a>四. 总结</h3><p>解决文本溢出的方法很多，最好不使用 -webkit-line-clamp 属性 的方式，推荐使用伪元素方法和 js 的方法<br>这是附上我的测试 demo:</p>\n<p class=\"codepen\" data-height=\"400\" data-theme-id=\"0\" data-default-tab=\"html,result\" data-user=\"lxyoryxl\" data-slug-hash=\"mNJGWQ\" style=\"height: 737px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"文字溢出处理\">\n <span>See the Pen <a href=\"https://codepen.io/lxyoryxl/pen/mNJGWQ/\" target=\"_blank\" rel=\"noopener\">\n 文字溢出处理</a> by lxy (<a href=\"https://codepen.io/lxyoryxl\" target=\"_blank\" rel=\"noopener\">@lxyoryxl</a>)\n on <a href=\"https://codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen</a>.</span>\n</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\n<br>\n\n<h3 id=\"五-参考链接\"><a href=\"#五-参考链接\" class=\"headerlink\" title=\"五. 参考链接\"></a>五. 参考链接</h3><p><a src=\"https://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/comment-page-1/\">关于文字内容溢出用点点点(…)省略号表示</a></p>\n","categories":["css"],"tags":["单行文本溢出 多行文本溢出 css"]},{"title":"使用两个栈来实现一个队列，完成队列的Push和Pop操作","url":"http://yoursite.com/2019/07/30/使用两个栈来实现一个队列，完成队列的Push和Pop操作/","content":"<p>如何使用两个栈来实现一个队列，完成队列的 Push 和 Pop 操作呢？</p>\n<h2 id=\"分析\"><a href=\"#分析\" class=\"headerlink\" title=\"分析\"></a>分析</h2><p>栈的特性：先进后出<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AA%E6%A0%88%E6%9D%A5%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%98%9F%E5%88%97/%E6%A0%88.png?raw=true\" alt></p>\n<p>队列的特性： 先进先出<br><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AA%E6%A0%88%E6%9D%A5%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%98%9F%E5%88%97/%E9%98%9F%E5%88%97.png\" alt></p>\n<p>首先用一个数组来表示两个栈，stack1=[], stack2=[]</p>\n<p><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AA%E6%A0%88%E6%9D%A5%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%98%9F%E5%88%97/st1.png\" alt><br><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AA%E6%A0%88%E6%9D%A5%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%98%9F%E5%88%97/st2.png\" alt></p>\n<p>我们要完成 push 操作只需要向 stack1 的栈顶 push 元素，而要实现队列的先进后出，就要借助 stack2,就像汉诺塔一样，从 stack1 栈顶 pop 出来的元素,一个一个 push 进 stack2,这就实现了一个翻转。原来在栈底的‘1’，跑到了栈顶，于是就可以把先进入 stack1 的‘1’，先从 stack2 中 pop 出去。<br>下图是把栈 1 中的元素依次插入到栈 2 中，然后依次弹出栈：<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AA%E6%A0%88%E6%9D%A5%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E9%98%9F%E5%88%97/5.png?raw=true\" alt></p>\n<h2 id=\"代码\"><a href=\"#代码\" class=\"headerlink\" title=\"代码\"></a>代码</h2><pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">push</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n stack1<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">pop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>stack2<span class=\"token punctuation\">.</span>length <span class=\"token operator\">==</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>stack1<span class=\"token punctuation\">.</span>length <span class=\"token operator\">==</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> len <span class=\"token operator\">=</span> stack1<span class=\"token punctuation\">.</span>length\n <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> len<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n stack2<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>stack1<span class=\"token punctuation\">.</span><span class=\"token function\">pop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">return</span> stack2<span class=\"token punctuation\">.</span><span class=\"token function\">pop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> stack2<span class=\"token punctuation\">.</span><span class=\"token function\">pop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">var</span> stack1 <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n stack2 <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span></code></pre>\n<h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a>参考</h2><p><a href=\"https://blog.csdn.net/dangzhangjing97/article/details/81477192\" target=\"_blank\" rel=\"noopener\">面试题：使用两个栈来实现一个队列</a></p>\n","categories":["数据结构"],"tags":["数据结构"]},{"title":"总结水平居中和垂直居中","url":"http://yoursite.com/2019/07/29/总结水平居中和垂直居中/","content":"<p>本文总结：<br>几种水平居中和垂直居中的方法<br>flex 布局 css3 的 width 新出的属性值 fit-content …</p>\n<a id=\"more\"></a>\n\n<h3 id=\"一-水平居中\"><a href=\"#一-水平居中\" class=\"headerlink\" title=\"一. 水平居中\"></a>一. 水平居中</h3><h5 id=\"1-行内元素水平居中\"><a href=\"#1-行内元素水平居中\" class=\"headerlink\" title=\"1. 行内元素水平居中\"></a>1. <strong>行内元素水平居中</strong></h5><p>1.1 <strong>text-align:center</strong></p>\n<p>给父元素设置 <code>text-align:center</code></p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box1</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box1<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>p1<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>行内元素p<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD.png\" alt=\"行内元素居中\"></p>\n</blockquote>\n<br>\n\n<h5 id=\"2-块级元素水平居中\"><a href=\"#2-块级元素水平居中\" class=\"headerlink\" title=\"2. 块级元素水平居中\"></a>2. <strong>块级元素水平居中</strong></h5><p>2.1 <strong>margin:0 auto</strong><br>给要居中的块级元素加 <code>margin:0 auto</code>, 注意：该块元素一定要指定宽度</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box2</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>px<span class=\"token punctuation\">;</span> //这里一定要指定宽度\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid red<span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> <span class=\"token number\">0</span> auto<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box2<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%AE%9A%E5%AE%BD%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD.png?raw=true\" alt=\"定宽块级元素水平居中\"></p>\n</blockquote>\n<br>\n\n<p>2.2 <strong>display:flex</strong><br>使用弹性盒子布局，给父元素设置 <code>display:flex</code> <code>justify-content: center</code>,使子元素居中</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box3</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">300</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid black<span class=\"token punctuation\">;</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n <span class=\"token property\">justify-content</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box3<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> <span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">background</span><span class=\"token punctuation\">:</span> darkcyan</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>p元素<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>span</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> <span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">background</span><span class=\"token punctuation\">:</span> chocolate</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>span元素<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>span</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> <span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span><span class=\"token property\">height</span><span class=\"token punctuation\">:</span><span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span><span class=\"token property\">background</span><span class=\"token punctuation\">:</span>blue</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>div元素<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/flex.png\" alt=\"flex\"></p>\n</blockquote>\n<br>\n\n<p>2.3 <strong>已知宽度，用 positon</strong><br>前提是已知宽度，要居中的元素加 <code>position: absolute</code> <code>left: 50%</code> <code>margin-left: -50px</code></p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box4</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> pink<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n <span class=\"token property\">left</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50%</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin-left</span><span class=\"token punctuation\">:</span> -<span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box4<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%B7%B2%E7%9F%A5%E5%AE%BD%E5%BA%A6%2Cpositon.png\" alt=\"已知宽度,positon\"></p>\n</blockquote>\n<br>\n\n<p>2.4 <strong>未知宽度，用 positon，transfrom 结合</strong><br>对于未知宽度的块元素要实现居中，对该元素添加<code>position: absolute</code> <code>left: 50%</code> <code>transform: translate(-50%, 0)</code><br>这种方法其实不太推荐，因为 transform 在各个浏览器中的表现行为不一致，有兼容性问题</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box5</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> peru<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n <span class=\"token property\">left</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50%</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">translate</span><span class=\"token punctuation\">(</span>-<span class=\"token number\">50%</span>, <span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box5<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E6%9C%AA%E7%9F%A5%E5%AE%BD%E5%BA%A6%EF%BC%8C%E7%94%A8%20positon.png\" alt=\"未知宽度，用 positon\"></p>\n</blockquote>\n<br>\n\n<p>2.5 <strong>fit-content</strong><br>该属性是 CSS3 中 width 属性新加 的一个属性值，它配合 <code>margin:auto</code> 可以轻松实现居中效果。可以在不设置具体宽度的情况下，直接给要居中的元素设置 <code>width:fit-content</code> <code>margin:auto</code> 达到居中效果</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box6</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> fit-content<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box6<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>234<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/fit-content.png\" alt=\"fit-content\"></p>\n</blockquote>\n<br>\n\n<h3 id=\"二-垂直居中\"><a href=\"#二-垂直居中\" class=\"headerlink\" title=\"二. 垂直居中\"></a>二. 垂直居中</h3><h5 id=\"1-文字的居中\"><a href=\"#1-文字的居中\" class=\"headerlink\" title=\"1. 文字的居中\"></a>1. <strong>文字的居中</strong></h5><p>1.1 <strong>line-height</strong><br>这个属性主要用在单行文字的垂直居中，只要将行高（<code>line-height</code>）与容器高（<code>height</code>）设为相等即可</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box7</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">line-height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid black<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box7<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>23412341<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://raw.githubusercontent.com/lxy17761018921/All-Img/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%9E%82%E7%9B%B4-line-height.png\" alt=\"垂直-line-height\"></p>\n</blockquote>\n<br>\n\n<h5 id=\"2-容器的居中\"><a href=\"#2-容器的居中\" class=\"headerlink\" title=\"2. 容器的居中\"></a>2. <strong>容器的居中</strong></h5><p>2.1 <strong>position,margin-top,top</strong><br>已知容器高度，利用 position,margin-top,top</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box8</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid black<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> relative<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\"><span class=\"token class\">.b8</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid red<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n <span class=\"token property\">top</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50%</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">margin-top</span><span class=\"token punctuation\">:</span> -<span class=\"token number\">25</span>px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>b8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>sfdsfs<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%9E%82%E7%9B%B4-position-margintop.png?raw=true\" alt=\"垂直-position-margintop\"></p>\n</blockquote>\n<br>\n\n<p>2.2 <strong>position,transform,top</strong><br>未知容器高度，利用 position,transform,top</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box9</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid black<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> relative<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\"><span class=\"token class\">.b9</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid blue<span class=\"token punctuation\">;</span>\n <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n <span class=\"token property\">top</span><span class=\"token punctuation\">:</span> <span class=\"token number\">50%</span><span class=\"token punctuation\">;</span>\n <span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">translate</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span>, -<span class=\"token number\">50%</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box9<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>b9<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>阿斯蒂芬萨芬<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%9E%82%E7%9B%B4-position-transform.png?raw=true\" alt=\"垂直-position-transform\"></p>\n</blockquote>\n<br>\n\n<p>2.3 <strong>flex</strong><br>利用弹性布局，父元素设置<code>display:flex</code> <code>align-items:center</code></p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token class\">.box10</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> <span class=\"token number\">100</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid black<span class=\"token punctuation\">;</span>\n <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n <span class=\"token property\">align-items</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>box10<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>span</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> <span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">background</span><span class=\"token punctuation\">:</span> blue</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>sdfsf<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>span</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> <span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">background</span><span class=\"token punctuation\">:</span> brown</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>888888<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<blockquote>\n<p><img src=\"https://github.com/lxy17761018921/All-Img/blob/master/lxy17761018921.github.io-img/%E6%80%BB%E7%BB%93%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%E5%92%8C%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/%E5%9E%82%E7%9B%B4-flex.png?raw=true\" alt=\"垂直-flex\"></p>\n</blockquote>\n<br>\n\n<h3 id=\"三-总结\"><a href=\"#三-总结\" class=\"headerlink\" title=\"三. 总结\"></a>三. 总结</h3><p>总的来说，设置水平居中和垂直居中的方法太多了，我就列举了我比较常用的几个。但是以后还是首选 flex 布局的方式，感觉超级好用。<br>最后附上测试 demo:</p>\n<p class=\"codepen\" data-height=\"507\" data-theme-id=\"0\" data-default-tab=\"css,result\" data-user=\"lxyoryxl\" data-slug-hash=\"eqNLKW\" style=\"height: 507px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"水平居中和垂直居中\">\n <span>See the Pen <a href=\"https://codepen.io/lxyoryxl/pen/eqNLKW/\" target=\"_blank\" rel=\"noopener\">\n 水平居中和垂直居中</a> by lxy (<a href=\"https://codepen.io/lxyoryxl\" target=\"_blank\" rel=\"noopener\">@lxyoryxl</a>)\n on <a href=\"https://codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen</a>.</span>\n</p>\n<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n\n<h3 id=\"四-参考链接\"><a href=\"#四-参考链接\" class=\"headerlink\" title=\"四. 参考链接\"></a>四. 参考链接</h3><p><a href=\"https://segmentfault.com/a/1190000014116655\" target=\"_blank\" rel=\"noopener\">CSS-水平居中、垂直居中、水平垂直居中</a><br><a href=\"https://jingyan.baidu.com/article/86112f1381081127379787bb.html\" target=\"_blank\" rel=\"noopener\">CSS 水平居中的 9 种方法</a></p>\n","categories":["css"],"tags":["flex fit-content transform"]},{"title":"踩坑","url":"http://yoursite.com/2019/07/20/踩坑集合/","content":"<p><strong>1. Vue 报错如下</strong></p>\n<img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E8%B8%A9%E5%9D%91/1.png?raw=true\">\n\n<p><strong>解决办法</strong></p>\n<p>提示应该是 开启了 eslint 编码规范检查,于是准备关闭 eslint 来解决</p>\n<p><strong>vue-cli 脚手架关闭 eslint 的步骤：</strong></p>\n<ol>\n<li>找到<code>bulid/webpack.base.conf.js</code>文件，<code>config/index.js</code>文件</li>\n<li>注释掉 eslint 相关配置，比如：</li>\n</ol>\n<ul>\n<li><p>webpack.base.conf.js 里</p>\n<img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E8%B8%A9%E5%9D%91/1-1.png?raw=true\">\n<img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E8%B8%A9%E5%9D%91/1-2.png?raw=true\">\n</li>\n<li><p>config/index.js 里配置 useEslint: false</p>\n<img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E8%B8%A9%E5%9D%91/1-3.png?raw=true\">\n\n</li>\n</ul>\n<p><strong>2. Vue 报错如下</strong></p>\n<blockquote>\n<p>You are using the runtime-only build of Vue where the template compiler is not available. Either pre</p>\n</blockquote>\n<p>vue 有两种形式的代码 compiler（模板）模式和 runtime 模式（运行时），vue 模块的 package.json 的 main 字段默认为 runtime 模式,这是 vue 升级到 2.0 之后就有的特点</p>\n<p>而我的 main.js 文件中，初始化 vue 却是这么写的，这种形式为 compiler 模式的，所以就会出现上面的错误信息</p>\n<pre><code>// compiler\nnew Vue({\n el: '#app',\n router: router,\n store: store,\n template: '<App/>',\n components: { App }\n})</code></pre><p><strong>解决办法</strong><br>把 main.js 中的初始化 vue 处改为 runtime 模式：</p>\n<pre><code>//runtime\nnew Vue({\n router,\n store,\n render: h => h(App)\n}).$mount("#app")</code></pre>","categories":["踩坑集合"],"tags":["踩坑 Vue"]},{"title":"ES6 新特性","url":"http://yoursite.com/2019/07/20/ES6的新特性/","content":"<h2 id=\"let-var-const\"><a href=\"#let-var-const\" class=\"headerlink\" title=\"let var const\"></a>let var const</h2><p>对于 let var const ，先说说三者的区别：</p>\n<ol>\n<li>（块级作用域） let 可以声明块级作用域的变量，而 var 不行</li>\n<li>（变量提升） let 不存在变量提升，只允许在 let 声明之后才能使用变量，而 var 存在变量提升</li>\n<li>（变量重复声明）let 不能重复声明一个变量，var 可以</li>\n<li>const 声明的是常量，不能修改，也就是不能修改指向那个值的地址</li>\n<li>const 在声明时必须赋值</li>\n</ol>\n<p>let 和 var 一般推荐使用 let，因为用 var 可能会出现一些不明的错误，比如：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">setTimeOut</span><span class=\"token punctuation\">(</span>i <span class=\"token operator\">=</span><span class=\"token operator\">></span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\" spellcheck=\"true\">//上面的代码，会输出 10 个 10</span>\n\n或者：\n<span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span><span class=\"token keyword\">else</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> a<span class=\"token operator\">=</span><span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'2'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token comment\" spellcheck=\"true\">//undifiend 2</span></code></pre>\n<p>const 声明的常量，其实是个地址，该地址指向一个变量的值，说的‘不能修改’，其实指的是不能修改地址，里面的值还是可以改变的。<br>比如：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n name<span class=\"token punctuation\">:</span><span class=\"token string\">'lxy'</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\nobj<span class=\"token punctuation\">.</span>name<span class=\"token operator\">=</span><span class=\"token string\">'cyy'</span><span class=\"token comment\" spellcheck=\"true\">//不报错</span>\nobj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>name<span class=\"token punctuation\">:</span><span class=\"token string\">'cyy'</span><span class=\"token punctuation\">}</span><span class=\"token comment\" spellcheck=\"true\">//报错</span></code></pre>\n<h2 id=\"模板字符串\"><a href=\"#模板字符串\" class=\"headerlink\" title=\"模板字符串\"></a>模板字符串</h2><p>指的是用反引号 `` 代替原来的 “” ‘’来表示字符串</p>\n<ol>\n<li>字符串插值，用<code>${}</code><br>例如：<code>This document is ${a}</code></li>\n<li>多行字符串可以直接用 `` 框起来，而之前需要用+号连接多行字符串<br>例如：<br>`<h1></h1>\n<p></p>\n`\n\n</li>\n</ol>\n<h2 id=\"箭头函数\"><a href=\"#箭头函数\" class=\"headerlink\" title=\"箭头函数\"></a>箭头函数</h2><p>箭头函数是函数的一种简写形式<br>（）里面包含参数，接着一个箭头符号，后面大括号里是函数体<br><code>()=>{}</code><br>相比于 function 形式 ，箭头函数的优点：</p>\n<ol>\n<li><p>更简洁</p>\n</li>\n<li><p>函数体只有一个 return 语句时，可以省略<code>return</code>关键字和花括号</p>\n</li>\n<li><p>没有自己的 this,只会继承上一层作用域的 this<br>例如：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span>写法：\n<span class=\"token keyword\">var</span> name<span class=\"token operator\">=</span><span class=\"token string\">'The Window'</span>\n<span class=\"token keyword\">var</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n name<span class=\"token punctuation\">:</span><span class=\"token string\">\"The Object\"</span>\n getStudentName<span class=\"token punctuation\">:</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>name\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">.</span><span class=\"token function\">getStudentName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//'The Window'</span></code></pre>\n<p>第一层作用域的 this 为 obj,而第二层（闭包）里的 this 没有继承上一层作用域的 this,而是它自己本身的 this,所以是 window。<br>其实可以用中间变量来保存第一层的 this 值，写法如下：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> name<span class=\"token operator\">=</span><span class=\"token string\">'The Window'</span>\n<span class=\"token keyword\">var</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n name<span class=\"token punctuation\">:</span><span class=\"token string\">\"The Object\"</span>\n getStudentName<span class=\"token punctuation\">:</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> that<span class=\"token operator\">=</span><span class=\"token keyword\">this</span>\n\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> that<span class=\"token punctuation\">.</span>name\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">.</span><span class=\"token function\">getStudentName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//'The Object'</span></code></pre>\n<p>箭头函数写法：</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> name<span class=\"token operator\">=</span><span class=\"token string\">'The Window'</span>\n<span class=\"token keyword\">var</span> obj<span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>\n name<span class=\"token punctuation\">:</span><span class=\"token string\">\"The Object\"</span>\n getStudentName<span class=\"token punctuation\">:</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">=</span><span class=\"token operator\">></span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token operator\">=</span><span class=\"token operator\">></span>that<span class=\"token punctuation\">.</span>name\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>obj<span class=\"token punctuation\">.</span><span class=\"token function\">getStudentName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token comment\" spellcheck=\"true\">//'The Object'</span></code></pre>\n</li>\n</ol>\n<h2 id=\"参数处理\"><a href=\"#参数处理\" class=\"headerlink\" title=\"参数处理\"></a>参数处理</h2><p><strong>参数默认值</strong></p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\" spellcheck=\"true\">//ES6 之前，当未传入参数时，text = 'default'；</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">printText</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n text <span class=\"token operator\">=</span> text <span class=\"token operator\">||</span> <span class=\"token string\">\"default\"</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\" spellcheck=\"true\">//ES6；</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">printText</span><span class=\"token punctuation\">(</span>text <span class=\"token operator\">=</span> <span class=\"token string\">\"default\"</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>text<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p><strong>剩余参数</strong><br>相当于原来的 arguments, 指的是一个不定数量的数组</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">F</span><span class=\"token punctuation\">(</span><span class=\"token operator\">...</span>theArgs<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\" spellcheck=\"true\">// ...</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">F</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span></code></pre>\n<p><strong>扩展运算符</strong></p>\n<p>一般用于对数组的展开，注意区别剩余参数</p>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">F</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">,</span> b<span class=\"token punctuation\">,</span> c<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\" spellcheck=\"true\">// ...</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">var</span> arr <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span>\n<span class=\"token function\">F</span><span class=\"token punctuation\">(</span><span class=\"token operator\">...</span>arr<span class=\"token punctuation\">)</span></code></pre>\n<h2 id=\"解构赋值\"><a href=\"#解构赋值\" class=\"headerlink\" title=\"解构赋值\"></a>解构赋值</h2><pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token number\">1</span><span class=\"token punctuation\">.</span>\n<span class=\"token keyword\">var</span> <span class=\"token punctuation\">[</span>a<span class=\"token punctuation\">,</span> b<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span>\n\n<span class=\"token keyword\">var</span> <span class=\"token punctuation\">{</span>p<span class=\"token punctuation\">,</span>q<span class=\"token punctuation\">}</span><span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>p<span class=\"token punctuation\">:</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span>q<span class=\"token punctuation\">:</span><span class=\"token number\">3</span><span class=\"token punctuation\">}</span>\n\n<span class=\"token number\">2</span><span class=\"token punctuation\">.</span> 默认值\n<span class=\"token keyword\">var</span> <span class=\"token punctuation\">[</span>a <span class=\"token operator\">=</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> b <span class=\"token operator\">=</span> <span class=\"token number\">9</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span> <span class=\"token comment\" spellcheck=\"true\">//1</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>b<span class=\"token punctuation\">)</span> <span class=\"token comment\" spellcheck=\"true\">//9</span>\n\n<span class=\"token keyword\">var</span> <span class=\"token punctuation\">{</span>a<span class=\"token operator\">=</span><span class=\"token number\">10</span><span class=\"token punctuation\">,</span>b<span class=\"token operator\">=</span><span class=\"token number\">2</span><span class=\"token punctuation\">}</span><span class=\"token operator\">=</span><span class=\"token punctuation\">{</span>a<span class=\"token punctuation\">:</span><span class=\"token number\">1</span><span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span> <span class=\"token comment\" spellcheck=\"true\">//1</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>b<span class=\"token punctuation\">)</span> <span class=\"token comment\" spellcheck=\"true\">//2</span>\n\n<span class=\"token number\">3</span><span class=\"token punctuation\">.</span> 变量交换\n<span class=\"token punctuation\">[</span>a<span class=\"token punctuation\">,</span>b<span class=\"token punctuation\">]</span><span class=\"token operator\">=</span><span class=\"token punctuation\">[</span>b<span class=\"token punctuation\">,</span>a<span class=\"token punctuation\">]</span>\n</code></pre>\n<h2 id=\"class-类\"><a href=\"#class-类\" class=\"headerlink\" title=\"class 类\"></a>class 类</h2><p>他是原型链的语法糖<br>函数声明和类声明的区别：</p>\n<ul>\n<li>函数声明会提升，类不会</li>\n</ul>\n<pre class=\" language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\" spellcheck=\"true\">// 1. 一个类的写法</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Student</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">,</span> height<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>height <span class=\"token operator\">=</span> height\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token function\">say</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"hi\"</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\" spellcheck=\"true\">// 2. extends继承</span>\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">My</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">Students</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">super</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n <span class=\"token comment\" spellcheck=\"true\">// 或者单独调用父类的方法</span>\n <span class=\"token comment\" spellcheck=\"true\">//super.parentMethod()</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<h2 id=\"Promise-amp-amp-async-await\"><a href=\"#Promise-amp-amp-async-await\" class=\"headerlink\" title=\"Promise && async/await\"></a>Promise && async/await</h2><p>async/await 能和 promise 结合起来用，<br>能使异步看起来更像同步</p>\n","categories":["ES6"],"tags":["ES6"]},{"title":"移动端的适配如何做？","url":"http://yoursite.com/2019/07/19/移动端的适配/","content":"<h2 id=\"概念\"><a href=\"#概念\" class=\"headerlink\" title=\"概念\"></a>概念</h2><p><strong>设备像素</strong><br>也称为物理像素，显示器的最小物理单位。不同设备的设备像素大小不同<br><img src=\"https://static.xiedaimala.com/xdml/image/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-6-5-13-57-43.png\" alt=\"设备像素\"></p>\n<p><strong>设备独立像素</strong><br>一个设备独立像素里可能包含 1 个或者多个物理像素点，包含的越多则屏幕看起来越清晰。<br>平时我们所说的 iphoneX 的逻辑分辨率 375 x 812 指的就是设备独立像素。</p>\n<p><strong>CSS 像素</strong></p>\n<p><strong>PPI</strong><br><strong>devicePixelRatio</strong></p>\n<h2 id=\"一-介绍\"><a href=\"#一-介绍\" class=\"headerlink\" title=\"一.介绍\"></a>一.介绍</h2><p>要做移动端的适配主要是解决两个问题：</p>\n<ol>\n<li>视口大小<br>在不同尺寸的手机下，如果使用 px 来设置内容的样式，会出现文字过小，或者内容区域过大无法全部显示在视口等不适配问题，需要用户浏览时自行放大，用户体验不好</li>\n<li>交互方式<br>在手机端没有 hover 事件，只有 touch 事件</li>\n</ol>\n<p>下面介绍几种移动端适配的方法：</p>\n<h2 id=\"二-viewport\"><a href=\"#二-viewport\" class=\"headerlink\" title=\"二. viewport\"></a>二. viewport</h2><h4 id=\"viewport-视口（设置理想视口）\"><a href=\"#viewport-视口（设置理想视口）\" class=\"headerlink\" title=\"viewport 视口（设置理想视口）\"></a><strong>viewport 视口（设置理想视口）</strong></h4><p>大部分人都知道做移动端适配，可以在 <code><head></head></code> 中添加：<br><code><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"></code>，可是你知道其中指定的属性的具体含义吗？比如为什么要设置<code>width=device-width</code>,为什么<code>user-scalable</code>要等于 0？要想理解的话，我就先从 viewport 视口分类开始讲：</p>\n<pre><code>viewport 分为:\n visual viewport 可视视口\n layout viewport 布局视口\n ideal viewport 理想视口</code></pre><p><strong>visual 视口</strong><br>visual 视口指的是可见视口</p>\n<div align=\"center\">\n <img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E9%80%82%E9%85%8D/visual-viewport.png\">\n</div>\n\n<p><strong>layout 视口</strong><br>layout 视口指的是页面实际渲染出来的整个页面，可能会超出可见视口，出现滚动条。</p>\n<div align=\"center\">\n <img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E9%80%82%E9%85%8D/layout-viewport.png\">\n</div>\n\n<p><strong>ideal 视口</strong><br>ideal 视口等于移动设备的屏幕宽度，并没有一个固定尺寸，不同设备就不同</p>\n<div align=\"center\">\n <img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E9%80%82%E9%85%8D/ideal-viewport.png\">\n</div>\n\n<p>有了上面的视口概念介绍，我们可以初步分析得到: 因为移动设备的默认的 viewport 是 layout viewport ,那个比屏幕宽的 viewport,我们只要把屏幕宽度设定为 ideal viewport，即可实现移动端适配：</p>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span>\n <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span>\n <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>width<span class=\"token punctuation\">=</span><span class=\"token punctuation\">'</span>device-width,initial-scale<span class=\"token punctuation\">=</span>1.0,maximum-scale<span class=\"token punctuation\">=</span>1.0,user-scalable<span class=\"token punctuation\">=</span>0<span class=\"token punctuation\">'</span><span class=\"token punctuation\">\"</span></span>\n<span class=\"token punctuation\">/></span></span></code></pre>\n<p>以上 meta 标签的作用其实就是把 视口宽度=设备宽度（<code>width='device-width</code>），不允许用户缩放（<code>user-scalable=0</code>），网页初始大小占屏幕的 100%（<code>initial-scale=1.0</code>）</p>\n<ul>\n<li>width</li>\n<li>user-scalable</li>\n<li>initial-scale</li>\n<li>maximum-scale</li>\n<li>minmum-scale</li>\n</ul>\n<h2 id=\"三-Rem\"><a href=\"#三-Rem\" class=\"headerlink\" title=\"三. Rem\"></a>三. Rem</h2><p>说 rem 单位，就不得不说下 px,em 了。</p>\n<ul>\n<li>px: 像素</li>\n<li>rem: 相对于 <code>html</code> 根元素的 <code>font-size</code></li>\n<li>em: 相对于当前元素的 <code>font-size</code>（有很多文章写是相对于父元素，其实是错的）</li>\n</ul>\n<p>根据 rem 的特点，我们可以动态设置根元素的 <code>font-size</code>,使得以 rem 为单位的元素在不同设备下有相同的效果去呈现。</p>\n<h2 id=\"四-flex-布局\"><a href=\"#四-flex-布局\" class=\"headerlink\" title=\"四. flex 布局\"></a>四. flex 布局</h2><h2 id=\"五-vm-vh\"><a href=\"#五-vm-vh\" class=\"headerlink\" title=\"五. vm/vh\"></a>五. vm/vh</h2><h2 id=\"六-媒体查询\"><a href=\"#六-媒体查询\" class=\"headerlink\" title=\"六. 媒体查询\"></a>六. 媒体查询</h2><p>以下代码指定在不同视口宽度下，页面元素的样式</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@media</span> screen and <span class=\"token punctuation\">(</span><span class=\"token property\">max-width</span><span class=\"token punctuation\">:</span> 500px<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\" spellcheck=\"true\">/* 下面设置元素样式 */</span>\n <span class=\"token selector\">body </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>px<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<h2 id=\"七-设备的交互事件\"><a href=\"#七-设备的交互事件\" class=\"headerlink\" title=\"七. 设备的交互事件\"></a>七. 设备的交互事件</h2><h2 id=\"八-参考\"><a href=\"#八-参考\" class=\"headerlink\" title=\"八. 参考\"></a>八. 参考</h2><p><a href=\"https://segmentfault.com/a/1190000008767416\" target=\"_blank\" rel=\"noopener\">移动端适配总结</a><br><a href=\"https://www.cnblogs.com/2050/p/3877280.html\" target=\"_blank\" rel=\"noopener\">移动前端开发之 viewport 的深入理解</a></p>\n","categories":["移动端适配"],"tags":["viewport视口 rem"]},{"title":"前端软件安装&相关命令行","url":"http://yoursite.com/2019/07/16/前端软件安装-相关命令行/","content":"<h2 id=\"软件安装和快捷键\"><a href=\"#软件安装和快捷键\" class=\"headerlink\" title=\"软件安装和快捷键\"></a>软件安装和快捷键</h2><p>常识： mac 多一个 cmd 键，学习盲打工作效率高，卸载 360</p>\n<p><strong>软件安装</strong></p>\n<ul>\n<li>安装 SwitchyOmega 一个代理切换工具</li>\n<li>安装 uBlock 关闭广告</li>\n<li>安装 git easy</li>\n<li>安装 cmder 它比 git bash 还要强大 s</li>\n<li>安装 nrm</li>\n<li>安装 yarn 在官网下载，不要用 npm 下载</li>\n</ul>\n<p><strong>win10 常用快捷键：</strong></p>\n<pre><code>win+ctrl+方向键 切换桌面\nctrl+Y 重做\nctrl+P 打印\n鼠标中键 关闭页面\nctrl+D 创建新页面\nctrl+L 到地址栏输入\nalt+左/右 history 前进后退</code></pre><p><strong>网页控制台的秘密：</strong></p>\n<pre><code>网页控制台->source->snippest 可以保存代码片段\n网页控制台->Network->模拟 3G 做调试用\n网页控制台->Network->preserve log\n网页控制台->Network->Disable cache 清空缓存\n理解 preserve log\n理解 Disable cache</code></pre><p><strong>vscode 操作：</strong></p>\n<pre><code>直接在命令行输入`code` 可以打开 vscode\nctrl+H 替换\nctrl+N 新建文件\nctrl+P 查找文件\nctrl+shift+P 各种设置\n按住 alt 多光标选择</code></pre><p><strong>cmder 操作：</strong></p>\n<pre><code>ctrl+T 新建一个 cmd\nctrl+f 弹出 cmd\nctrl+w 关闭 cmd\nalt+d 建立分屏\nctrl+d 删除分屏\n鼠标选中就可以复制\n鼠标右键直接粘贴\n也可以使用经典的 cv 来复制粘贴</code></pre><h2 id=\"命令行常用单词\"><a href=\"#命令行常用单词\" class=\"headerlink\" title=\"命令行常用单词\"></a>命令行常用单词</h2><pre><code>make move remove list recursive link find echo touch directory force copy</code></pre><p>程序员吧动词缩写，就变成了命令：</p>\n<ul>\n<li>make==>mk</li>\n<li>remove==>rm</li>\n<li>list==>ls</li>\n<li>copy==>cp</li>\n</ul>\n<h2 id=\"文件的增删改查（命令行）\"><a href=\"#文件的增删改查（命令行）\" class=\"headerlink\" title=\"文件的增删改查（命令行）\"></a>文件的增删改查（命令行）</h2><p><strong>增:创建文件</strong></p>\n<pre><code>- 创建 1.txt\n touch 1.txt\n touch 1.txt 2.txt （同时创建多个文件）\n echo hi > 1.txt （> 表明覆盖原来文件内容）\n echo hi >> 1.txt （>> 表明追加到原来文件内容里面）\n- 创建目录 a\n mkdir a\n mkdir -p a/b/c\n mkdir -p a/b/c a/b/m （同时创建多个目录）\n- 复制文件 1-->2\n cp 1.txt 2.txt （复制1.txt的内容 到 2.txt里）\n- 复制目录\n cp -r a b （复制文件a 到 文件b中）</code></pre><p><strong>删</strong></p>\n<pre><code>- 删除 1.txt\n rm 1.txt （注意：用该命令行删除的文件是在回收站找不到的了，所以慎用）\n- 删除目录 a/\n rm -r a/\n- 强制删除 a\n rm -rf a</code></pre><p>注意：c 盘里的 文件大多都不能删,除了‘用户’目录，缩写为<code>~</code><br>一般做操作时都在<code>~</code>下的目录</p>\n<p><strong>改</strong></p>\n<pre><code>- 打开文件 1.txt\n start 1.txt\n- 清空文件\n echo '' > 1.txt\n- 修改文件内容\n echo hi > 1.txt （> 表明覆盖原来文件内容）\n- 追加文件内容\n echo hi >> 1.txt （>> 表明追加到原来文件内容里面）\n- 移动文件/目录\n mv\n- 重命名文件/目录\n mv\n- 修改文件最后更新时间\n touch 1.txt （如果 1.txt 存在，就修改 1.txt 的最后更新时间）</code></pre><p><strong>查</strong></p>\n<pre><code>- 查看当前目录的绝对路径\n pwd\n- 查看当前目录下的所有文件\n ls\n- 查看指定目录下的文件\n ls 路径 例如：\n - ls d/blogg\n - ls /d/blogg 前面加 / 为在根目录下查找\n- 查看文件内容\n 1. cat [文件名]\n 例如：cat 1.txt\n 2. head -n [数量][文件名]\n 例如：head -n 20 1.txt\n 3. tail -n [数量][文件名]\n 例如： tail -n 20 1.txt\n 4. less [文件名]\n 例如：less 1.txt</code></pre><p>如此多的命令怎么才能记得住呢？查啊！<br>但是通过 <code>cp --help</code> 提供 的文档真是 too long didn’t read…..<br>于是有了另一种简单的查文档插件 tldr:<br>装插件：tldr<br>使用命令 例如 <code>tldr mkdir</code> 来查看命令意思</p>\n<h2 id=\"命令的组合\"><a href=\"#命令的组合\" class=\"headerlink\" title=\"命令的组合\"></a>命令的组合</h2><p><strong>&& 操作</strong><br>一条命令成功之后，执行另一条<br>例如：<br>mkdir c && echo ‘创建了 c 目录’<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/&&%20%E6%93%8D%E4%BD%9C.png?raw=true\" alt=\"&& 操作\"></p>\n<p><strong>;操作</strong><br>不管成功失败，都执行下一条<br>例如：<br>mkdir d ; echo ‘创建了 d 目录’<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/;%E6%93%8D%E4%BD%9C.png?raw=true\" alt=\";操作\"></p>\n<p><strong>bash 脚本文件（文件里面写多条命令）</strong></p>\n<p>许多操作合在一个文件</p>\n<ul>\n<li><p>创建一个文件 ‘一键搞定’ ，里面写多条命令如下：<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/%E4%B8%80%E9%94%AE%E6%90%9E%E5%AE%9A.png?raw=true\" alt=\"一键搞定\"></p>\n</li>\n<li><p>执行 ‘一键搞定’（用 <code>./一键搞定</code> 命令）<br><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85%26%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/%E6%89%A7%E8%A1%8C%E4%B8%80%E9%94%AE%E6%90%9E%E5%AE%9A.png\" alt=\"执行一键搞定\"></p>\n</li>\n<li><p>最后可以看到创建了 index.html 等文件：<br><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/%E5%88%9B%E5%BB%BA%E4%BA%86index.html%EF%BC%881%EF%BC%89.png?raw=true\" alt=\"创建了 index.html 等文件\"></p>\n</li>\n<li><p><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/%E5%89%8D%E7%AB%AF%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85&%E7%9B%B8%E5%85%B3%E5%91%BD%E4%BB%A4%E8%A1%8C/%E5%88%9B%E5%BB%BA%E4%BA%86index.html%EF%BC%882%EF%BC%89.png?raw=true\" alt=\"index.html内容\"></p>\n</li>\n</ul>\n","categories":["命令行"],"tags":["软件安装"]},{"title":"使用Git + Github Pages + Hexo免费搭建自己的博客（简明教程）","url":"http://yoursite.com/2019/07/07/如何搭建一个自己的博客（hexo-githubpages）/","content":"<p>本文介绍：<br>使用 Git + Github Pages + Hexo 搭建免费博客<br>部署到 github 上<br>简明的操作步骤</p>\n<a id=\"more\"></a>\n\n<h2 id=\"一-前言\"><a href=\"#一-前言\" class=\"headerlink\" title=\"一. 前言\"></a>一. 前言</h2><p>由于 Hexo 官方文档写的不是好，还有网上写的一些关于 Hexo 搭建博客的文章都比较容易踩坑，于是写一篇比较简明的用 Hexo 搭建个人博客的文章。</p>\n<br>\n\n<h2 id=\"二-为什么使用-Hexo\"><a href=\"#二-为什么使用-Hexo\" class=\"headerlink\" title=\"二. 为什么使用 Hexo\"></a>二. 为什么使用 Hexo</h2><p>Hexo 是一款基于 Node.js 的静态博客框架，依赖少易于安装，可以方便的生成静态网页托管在 GitHub 上。</p>\n<ul>\n<li>免费 托管在 GitHub</li>\n<li>简洁 支持 Markdown</li>\n</ul>\n<br>\n\n<h2 id=\"三-Hexo-工作机制\"><a href=\"#三-Hexo-工作机制\" class=\"headerlink\" title=\"三. Hexo 工作机制\"></a>三. Hexo 工作机制</h2><p>Hexo 基于 Node.js,将 source 文件夹下的资源（如_posts 文章等），按照预定的配置文件（_config.yml），转换成静态页面放到 public 目录下。于是当我们预览或者部署时，Hexo 会把 public 作为 web 目录处理。</p>\n<br>\n\n<h2 id=\"四-搭建流程\"><a href=\"#四-搭建流程\" class=\"headerlink\" title=\"四. 搭建流程\"></a>四. 搭建流程</h2><h3 id=\"1-安装-Git\"><a href=\"#1-安装-Git\" class=\"headerlink\" title=\"1. 安装 Git\"></a>1. 安装 Git</h3><ul>\n<li>官网下载：<a href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noopener\">https://git-scm.com/</a></li>\n</ul>\n<p>如果想要详细了解下 Git 推荐看廖雪峰的 Git 教程（简洁明了）：<a href=\"https://www.liaoxuefeng.com/wiki/896043488029600\" target=\"_blank\" rel=\"noopener\">https://www.liaoxuefeng.com/wiki/896043488029600</a></p>\n<h3 id=\"2-安装-Node-js\"><a href=\"#2-安装-Node-js\" class=\"headerlink\" title=\"2. 安装 Node.js\"></a>2. 安装 Node.js</h3><ul>\n<li>官网下载：<a href=\"https://nodejs.org/en/\" target=\"_blank\" rel=\"noopener\">https://nodejs.org/en/</a></li>\n<li>安装：直接默认路径，全部点继续就好</li>\n<li>查看：在命令行输 <code>node -v</code> <code>npm -v</code> 查看安装是否安装上</li>\n</ul>\n<h3 id=\"3-安装-Hexo\"><a href=\"#3-安装-Hexo\" class=\"headerlink\" title=\"3. 安装 Hexo\"></a>3. 安装 Hexo</h3><ul>\n<li>安装：命令行输入 <code>npm install -g hexo-cli</code></li>\n<li>查看：命令行输入 <code>hexo -v</code></li>\n</ul>\n<h3 id=\"4-使用-Hexo\"><a href=\"#4-使用-Hexo\" class=\"headerlink\" title=\"4.使用 Hexo\"></a>4.使用 Hexo</h3><h4 id=\"新建-blog\"><a href=\"#新建-blog\" class=\"headerlink\" title=\"新建 blog\"></a>新建 blog</h4><blockquote>\n<ol>\n<li>在 D 盘新建 blogg 目录，在该目录下打开 gitbush</li>\n<li><code>hexo init</code> [文件名]，然后进入该文件，再打开 gitbush</li>\n<li>启动：<code>hexo s</code><br>接着就可以通过默认的 <code>localhost:4000</code> 预览博客页面</li>\n</ol>\n</blockquote>\n<h4 id=\"新建文章\"><a href=\"#新建文章\" class=\"headerlink\" title=\"新建文章\"></a>新建文章</h4><blockquote>\n<ol>\n<li><code>hexo n</code> “我的第一篇博客”</li>\n<li>查看：进入到 source/_posts ,查看是否有“我的第一篇博客<code>.md</code>”</li>\n<li>修改添加内容：用 <code>vscode</code> 或者 <code>Notepad++</code>等工具对<code>.md</code> 文件进行编辑</li>\n<li>生成：<code>hexo g</code></li>\n<li>启动：<code>hexo s</code></li>\n</ol>\n</blockquote>\n<h4 id=\"博客部署到-GitHub-上\"><a href=\"#博客部署到-GitHub-上\" class=\"headerlink\" title=\"博客部署到 GitHub 上\"></a>博客部署到 GitHub 上</h4><p>为了使博客不仅仅是在本地访问，我将博客部署到 GitHub,首先就需要新建一个 GitHub 仓库</p>\n<blockquote>\n<p>新建一个 GitHub 仓库（注意该仓库的名字前缀必须和自己 GitHub 的 <code>username</code> 相同，后缀必须是 github.io）例如：lxy17761018921/lxy17761018921.github.io</p>\n</blockquote>\n<p>在部署之前需要安装一个插件 hexo-deployer-git</p>\n<blockquote>\n<p><code>npm install hexo-deployer-git --save</code></p>\n</blockquote>\n<p>然后做重要的是，配置 _config.yml 文件，此处有坑：冒号后面需要有个空格</p>\n<pre class=\" language-yml\"><code class=\"language-yml\"># Deployment\n## Docs: https://hexo.io/docs/deployment.html\ndeploy:\n type: git\n repo: https://github.com/lxy17761018921/lxy17761018921.github.io\n branch: master</code></pre>\n<br>\n\n<p>最后部署：注意，中间提示输入 GitHub 账号密码，必须手打，不能复制粘贴，不然有奇怪的符号</p>\n<blockquote>\n<p>hexo d</p>\n</blockquote>\n<p>最终可以输入 仓库名（lxy17761018921.github.io） 加载我们的博客</p>\n<h4 id=\"自定义主题\"><a href=\"#自定义主题\" class=\"headerlink\" title=\"自定义主题\"></a>自定义主题</h4><p>一个方法是直接在 GitHubPages 里面，用它提供的主题。第二个方法是自己克隆别人的主题，这里我讲一下第二种方法的步骤。</p>\n<p>在 GitHub 上 clone 他人的主题,并放到 theme 文件夹下：</p>\n<blockquote>\n<p><code>git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia</code></p>\n</blockquote>\n<p>接着还是配置 _config.yml 文件：</p>\n<pre class=\" language-yml\"><code class=\"language-yml\"># Extensions\n## Plugins: https://hexo.io/plugins/\n## Themes: https://hexo.io/themes/\ntheme: yilia</code></pre>\n<br>\n\n<p>最后:生成，启动，部署, 就可以打开我们的博客查看网页的主题已经变了</p>\n<blockquote>\n<p><code>hexo g</code> > <code>hexo s</code> > <code>hexo d</code></p>\n</blockquote>\n<h3 id=\"5-总结\"><a href=\"#5-总结\" class=\"headerlink\" title=\"5. 总结\"></a>5. 总结</h3><p>以上就是我搭建一个博客的全部内容了，现暂时还没有贴图进去后面一定会加上的。这是我的第一篇博客，内容不足请多多包含。</p>\n<h3 id=\"6-参考链接\"><a href=\"#6-参考链接\" class=\"headerlink\" title=\"6. 参考链接\"></a>6. 参考链接</h3><p><a href=\"https://www.bilibili.com/video/av44544186?from=search&seid=10605979974887129883\" target=\"_blank\" rel=\"noopener\">https://www.bilibili.com/video/av44544186?from=search&seid=10605979974887129883</a></p>\n","categories":["搭建教程"],"tags":["GithubPages Hexo Git 个人博客"]},{"title":"Scss 的常用语法（变量 嵌套规则 混合 父选择器&）","url":"http://yoursite.com/2019/07/06/Scss的常用语法/","content":"<p>sass 基本不含括号，以缩进代表意义。<br>scss 是 sass 的加强版，相比于 sass 加上了括号，分号，冒号，使得前端工程师能看懂</p>\n<p>sass 的官方解释器是开源的且用 Ruby 语言写成的，下面的图是语言的发展过程：</p>\n<p><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/Scss%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95/scss%E5%8E%86%E5%8F%B2.png?raw=true\" alt=\"scss历史\"></p>\n<p>本文总结：<br>Scss 的常用语法，包括变量 嵌套规则 父选择器& 混合</p>\n<a id=\"more\"></a>\n\n<h2 id=\"一-变量声明\"><a href=\"#一-变量声明\" class=\"headerlink\" title=\"一. 变量声明\"></a>一. 变量声明</h2><p>变量可以再多处复用</p>\n<pre class=\" language-scss\"><code class=\"language-scss\"><span class=\"token variable\">$write</span>=<span class=\"token number\">23</span><span class=\"token punctuation\">;</span></code></pre>\n<h2 id=\"二-嵌套规则\"><a href=\"#二-嵌套规则\" class=\"headerlink\" title=\"二. 嵌套规则\"></a>二. 嵌套规则</h2><p>嵌套规则：父元素可以嵌套子元素来写</p>\n<p>例子：</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token id\">#content</span> article h1 </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#333</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\"><span class=\"token id\">#content</span> article p </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1.4</span>em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\"><span class=\"token id\">#content</span> aside </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#eee</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>嵌套写</p>\n<pre class=\" language-scss\"><code class=\"language-scss\"><span class=\"token selector\">#content </span><span class=\"token punctuation\">{</span>\n <span class=\"token selector\">article </span><span class=\"token punctuation\">{</span>\n <span class=\"token selector\">h1 </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#333</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token selector\">p </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1.4</span>em<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token selector\">aside </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#eee</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>编译后</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\"><span class=\"token id\">#content</span> article h1 </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#333</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\"><span class=\"token id\">#content</span> article p </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">margin-bottom</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1.4</span>em<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token selector\"><span class=\"token id\">#content</span> aside </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token hexcode\">#eee</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<h2 id=\"三-父选择器-amp\"><a href=\"#三-父选择器-amp\" class=\"headerlink\" title=\"三. 父选择器 &\"></a>三. 父选择器 &</h2><p>&=父选择器</p>\n<pre class=\" language-scss\"><code class=\"language-scss\"><span class=\"token selector\">article a </span><span class=\"token punctuation\">{</span>\n <span class=\"token selector\"><span class=\"token parent important\">&</span>:hover </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>也就是</p>\n<pre class=\" language-css\"><code class=\"language-css\"><span class=\"token selector\">article a<span class=\"token pseudo-class\">:hover</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> red<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<h2 id=\"四-混合-mixin\"><a href=\"#四-混合-mixin\" class=\"headerlink\" title=\"四. 混合 mixin\"></a>四. 混合 mixin</h2><p>混合类似于函数。<br>如果有大量重用的样式，用混合器处理是个好方法<br>使用 <code>@mixin</code> 标识符定义，<code>@include</code> 来使用这个混合器</p>\n<pre class=\" language-scss\"><code class=\"language-scss\"><span class=\"token keyword\">@mixin</span> <span class=\"token function\">border</span><span class=\"token punctuation\">(</span><span class=\"token variable\">$border-color</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid <span class=\"token variable\">$border-color</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token comment\" spellcheck=\"true\">//声明混合宏border</span>\n<span class=\"token selector\">button </span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">@include</span> <span class=\"token function\">border</span><span class=\"token punctuation\">(</span>red<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token comment\" spellcheck=\"true\">//调用混合宏border</span></code></pre>\n<h2 id=\"五-placeholder\"><a href=\"#五-placeholder\" class=\"headerlink\" title=\"五. placeholder\"></a>五. placeholder</h2><p>placeholder 和 mixin 不一样的是:</p>\n<ul>\n<li>mixin 在 scss 实际转换为 css 时，是重复了相同的样式,@include 在调用时只是机械的把代码拷过来：</li>\n</ul>\n<p><img src=\"https://raw.githubusercontent.com/LxyoryxL/All-Img/master/lxy17761018921.github.io-img/Scss%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95/mixin.png\" alt=\"mixin\"></p>\n<ul>\n<li>placeholder 在 scss 实际转换为 css 时，没有重复了相同的样式，样式只写了一次，简化了代码：</li>\n</ul>\n<p><img src=\"https://github.com/LxyoryxL/All-Img/blob/master/lxy17761018921.github.io-img/Scss%E7%9A%84%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95/placeholder.png?raw=true\" alt=\"placeholder\"></p>\n<pre class=\" language-scss\"><code class=\"language-scss\"><span class=\"token selector\"><span class=\"token placeholder\">%border</span> </span><span class=\"token punctuation\">{</span>\n <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>px solid <span class=\"token variable\">$border-color</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token comment\" spellcheck=\"true\">//声明混合宏border</span>\n<span class=\"token selector\">button </span><span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">@extend</span> <span class=\"token number\">%</span>border<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span> <span class=\"token comment\" spellcheck=\"true\">//调用混合宏border</span></code></pre>\n","categories":["语法"],"tags":["Scss语法 变量 嵌套规则 父选择器& 混合"]},{"title":"Markdown 常用语法","url":"http://yoursite.com/2019/07/04/Markdown-常用语法/","content":"<p>本文总结:<br>Markdown 常用语法，包括 Markdown 标题 列表 区块引用 链接 字体 代码框</p>\n<a id=\"more\"></a>\n\n<h2 id=\"一-标题写法\"><a href=\"#一-标题写法\" class=\"headerlink\" title=\"一. 标题写法\"></a><strong>一. 标题写法</strong></h2><pre><code># 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题</code></pre><blockquote>\n<h1 id=\"一级标题\"><a href=\"#一级标题\" class=\"headerlink\" title=\"一级标题\"></a>一级标题</h1><h2 id=\"二级标题\"><a href=\"#二级标题\" class=\"headerlink\" title=\"二级标题\"></a>二级标题</h2><h3 id=\"三级标题\"><a href=\"#三级标题\" class=\"headerlink\" title=\"三级标题\"></a>三级标题</h3><h4 id=\"四级标题\"><a href=\"#四级标题\" class=\"headerlink\" title=\"四级标题\"></a>四级标题</h4></blockquote>\n<p>注意，#号后面有空格</p>\n<h2 id=\"二-无序列表\"><a href=\"#二-无序列表\" class=\"headerlink\" title=\"二. 无序列表\"></a><strong>二. 无序列表</strong></h2><pre><code>* 1\n* 2\n* 3</code></pre><blockquote>\n<ul>\n<li>1</li>\n<li>2</li>\n<li>3</li>\n</ul>\n</blockquote>\n<h2 id=\"三-有序列表\"><a href=\"#三-有序列表\" class=\"headerlink\" title=\"三. 有序列表\"></a><strong>三. 有序列表</strong></h2><pre><code>4. 列表一\n4. 列表二\n5. 列表三</code></pre><blockquote>\n<ol start=\"4\">\n<li>列表一</li>\n<li>列表二</li>\n<li>列表三</li>\n</ol>\n</blockquote>\n<p>注意，有序列表的序号是根据第一行列表的数字顺序来的</p>\n<h2 id=\"四-区块引用\"><a href=\"#四-区块引用\" class=\"headerlink\" title=\"四. 区块引用\"></a><strong>四. 区块引用</strong></h2><pre><code>>一级引用\n>>二级引用\n>>>三级引用</code></pre><blockquote>\n<p>一级引用</p>\n<blockquote>\n<p>二级引用</p>\n<blockquote>\n<p>三级引用</p>\n</blockquote>\n</blockquote>\n</blockquote>\n<h2 id=\"五-链接\"><a href=\"#五-链接\" class=\"headerlink\" title=\"五. 链接\"></a><strong>五. 链接</strong></h2><h4 id=\"普通写法：\"><a href=\"#普通写法：\" class=\"headerlink\" title=\"普通写法：\"></a>普通写法：</h4><pre><code>[链接名](链接地址)</code></pre><blockquote>\n<p><a href=\"http://www.baidu.com\" target=\"_blank\" rel=\"noopener\">百度链接</a></p>\n</blockquote>\n<h4 id=\"加-title-属性的链接写法：\"><a href=\"#加-title-属性的链接写法：\" class=\"headerlink\" title=\"加 title 属性的链接写法：\"></a>加 title 属性的链接写法：</h4><pre><code>[链接名](链接地址 title名称)</code></pre><blockquote>\n<p><a href=\"http://www.baidu.com\" title=\"ss\" target=\"_blank\" rel=\"noopener\">百度链接</a></p>\n</blockquote>\n<h4 id=\"图片的链接写法：\"><a href=\"#图片的链接写法：\" class=\"headerlink\" title=\"图片的链接写法：\"></a>图片的链接写法：</h4><ul>\n<li>写法一：</li>\n</ul>\n<pre><code></code></pre><blockquote>\n<p><img src=\"http://www.baidu.com\" alt=\"我是图片\"></p>\n</blockquote>\n<ul>\n<li>写法二：</li>\n</ul>\n<p>使用 <code><img /></code>标签来贴图，然后指定 align 属性</p>\n<pre><code><img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/></code></pre><p>刷屏行。<br>刷屏行。<br><img align=\"right\" src=\"https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png\"><br><strong>效果如右边 —-></strong><br>刷屏行。<br>刷屏行。<br>刷屏行。<br>刷屏行。<br>刷屏行。</p>\n<br>\n\n<ul>\n<li>两种写法的比较：</li>\n</ul>\n<p>标准的 Markdown 图片标记 <img src alt> 无法指定图片的大小和位置，只能依赖默认的图片大小，默认居左。<br>下面是两个种写法的比较：</p>\n<pre class=\" language-html\"><code class=\"language-html\">**图片默认显示效果：**\n\n**加以控制后的效果：**\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">align</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>center<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>img</span>\n <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>65<span class=\"token punctuation\">\"</span></span>\n <span class=\"token attr-name\">height</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>75<span class=\"token punctuation\">\"</span></span>\n <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png<span class=\"token punctuation\">\"</span></span>\n <span class=\"token punctuation\">/></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>示例效果：</p>\n<p><strong>图片默认显示效果：</strong><br><img src=\"https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png\" alt></p>\n<p><strong>加以控制后的效果：</strong></p>\n<div align=\"center\">\n <img width=\"65\" height=\"75\" src=\"https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png\">\n</div>\n\n<h2 id=\"六-代码框\"><a href=\"#六-代码框\" class=\"headerlink\" title=\"六.代码框\"></a><strong>六.代码框</strong></h2><h4 id=\"1-单行用\"><a href=\"#1-单行用\" class=\"headerlink\" title=\"1. 单行用 ``\"></a>1. 单行用 ``</h4><pre><code> `<p><a href='/home' title='说明'></a></p>`</code></pre><blockquote>\n<p><code><p><a href='/home' title='说明'></a></p></code></p>\n</blockquote>\n<h4 id=\"2-多行用-三个点点点\"><a href=\"#2-多行用-三个点点点\" class=\"headerlink\" title=\"2. 多行用 三个点点点\"></a>2. 多行用 三个点点点</h4><pre><code> ```\n <p><a href='/home' title='说明'></a></p>\n <p><a href='/home' title='说明'></a></p>\n <p><a href='/home' title='说明'></a></p>\n ```</code></pre><pre><code><p><a href='/home' title='说明'></a></p>\n<p><a href='/home' title='说明'></a></p>\n<p><a href='/home' title='说明'></a></p></code></pre><h4 id=\"3-多行用-三个\"><a href=\"#3-多行用-三个\" class=\"headerlink\" title=\"3. 多行用 三个~\"></a>3. 多行用 三个~</h4><pre><code> ~~~html\n <p v-if='seen'>真就显示，假不显示</p>\n ~~~</code></pre><p>以上加上 html 显示更贴近 html 的彩色 code</p>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>seen<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>真就显示，假不显示<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span></code></pre>\n<h3 id=\"4-两个以上的-Tab\"><a href=\"#4-两个以上的-Tab\" class=\"headerlink\" title=\"4. 两个以上的 Tab\"></a>4. 两个以上的 Tab</h3><p>用 2 个以上 TAB 键起始的段落，会被认为是代码块，效果如下：</p>\n<pre><code> 代码块测试，代码块测试\n 代码块测试，代码块测试\n 代码块测试，代码块测试\n 代码块测试，代码块测试\n 代码块测试，代码块测试</code></pre><h3 id=\"5-代码框颜色\"><a href=\"#5-代码框颜色\" class=\"headerlink\" title=\"5. 代码框颜色\"></a>5. 代码框颜色</h3><p>借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。举例如下：</p>\n<pre class=\" language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>table</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>tr</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>td</span> <span class=\"token attr-name\">bgcolor</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>#fedfe1<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>测试代码框背景色<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>td</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>tr</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>table</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>效果如下：</p>\n<table>\n <tr>\n <td bgcolor=\"#fedfe1\">测试代码框背景色</td>\n </tr>\n</table>\n\n<br>\n\n<h2 id=\"七-强调\"><a href=\"#七-强调\" class=\"headerlink\" title=\"七.强调\"></a><strong>七.强调</strong></h2><h4 id=\"字体倾斜\"><a href=\"#字体倾斜\" class=\"headerlink\" title=\"字体倾斜\"></a>字体倾斜</h4><pre><code>_字体倾斜_</code></pre><blockquote>\n<p><em>字体倾斜</em></p>\n</blockquote>\n<h4 id=\"字体加粗\"><a href=\"#字体加粗\" class=\"headerlink\" title=\"字体加粗\"></a>字体加粗</h4><pre><code>__字体加粗__</code></pre><blockquote>\n<p><strong>字体加粗</strong></p>\n</blockquote>\n<h2 id=\"八-删除\"><a href=\"#八-删除\" class=\"headerlink\" title=\"八.删除\"></a><strong>八.删除</strong></h2><h4 id=\"删除线\"><a href=\"#删除线\" class=\"headerlink\" title=\"删除线 ~~\"></a>删除线 ~~</h4><pre><code>~~请删掉我吧~~</code></pre><blockquote>\n<p><del>请删掉我吧</del></p>\n</blockquote>\n<h2 id=\"九-换行\"><a href=\"#九-换行\" class=\"headerlink\" title=\"九.换行\"></a><strong>九.换行</strong></h2><p>直接在要换行的语句最后打上 2 个空格。</p>\n<pre><code>我是\n测试</code></pre><h2 id=\"参考\"><a href=\"#参考\" class=\"headerlink\" title=\"参考\"></a><strong>参考</strong></h2><p><a href=\"https://mazhuang.org/2017/09/01/markdown-odd-skills/\" target=\"_blank\" rel=\"noopener\">https://mazhuang.org/2017/09/01/markdown-odd-skills/</a><br><a href=\"https://www.zybuluo.com/songpfei/note/247346\" target=\"_blank\" rel=\"noopener\">https://www.zybuluo.com/songpfei/note/247346</a></p>\n","categories":["语法"],"tags":["Markdown 标题 列表 区块引用 链接 字体 代码框"]},{"title":"about","url":"http://yoursite.com/about/index.html","content":"","categories":[],"tags":[]},{"title":"categories","url":"http://yoursite.com/categories/index.html","content":"","categories":[],"tags":[]},{"title":"category","url":"http://yoursite.com/category/index.html","content":"","categories":[],"tags":[]},{"title":"","url":"http://yoursite.com/css/personal-style.css","content":"html.page-home {\n /* position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url('/images/bg.jpg');\n background-color: transparent;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat; */\n\n /*background: linear-gradient( #1abc9c, transparent), linear-gradient( 90deg, skyblue, transparent), linear-gradient( -90deg, coral, transparent);*/\n /*background-blend-mode: screen;*/\n\n /*background: linear-gradient(to left, #5f2c82, #49a09d);*/\n}","categories":[],"tags":[]},{"title":"","url":"http://yoursite.com/html/main.html","content":"<!DOCTYPE html>\n\n<head><meta name=\"generator\" content=\"Hexo 3.9.0\">\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n<link rel=\"stylesheet\" href=\"/css/prism-tomorrow.css\" type=\"text/css\"></head>\n\n<style>\n canvas {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n }\n</style>\n\n<body>\n <canvas id=\"cv\" width=\"200\" height=\"100\">\n\n <script>\n var canvas = document.getElementById('cv');\n var ctx = canvas.getContext('2d')\n ctx.fillStyle = '#FF0000'\n ctx.fillRect(0, 0, 20, 20)\n </script>\n</canvas></body>\n\n","categories":[],"tags":[]},{"title":"","url":"http://yoursite.com/html/文字溢出处理.html","content":"<!DOCTYPE html>\n\n<head><meta name=\"generator\" content=\"Hexo 3.9.0\">\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n<link rel=\"stylesheet\" href=\"/css/prism-tomorrow.css\" type=\"text/css\"></head>\n<style>\n .p1 {\n /* 单行文本溢出点点点 */\n width: 400px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n }\n\n /* 多行文本最后点点点 */\n .p2 {\n width: 400px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n /* 这个属性是一个 不规范的属性 */\n -webkit-box-orient: vertical;\n overflow: hidden;\n /* 仅支持webkit浏览器，比较合适WebKit浏览器或移动端 */\n /* firefox不支持 */\n }\n\n\n\n /* 伪元素的方式 */\n .p3 {\n width: 400px;\n }\n\n .p3::after {\n content: '...'\n /* 比较靠谱简单的做法 */\n }\n\n\n /* 使用插件jQuery.dotdotdot的方式 */\n .p4 {\n width: 400px;\n height: 40px;\n }\n</style>\n\n<body>\n <p class=\"p1\">元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的</p>\n <p class=\"p2\">\n 元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签关键词。 标签\n </p>\n <p class=\"p3\">\n 元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签\n </p>\n <div class=\"p4\">\n 元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。\n 标签元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签\n </div>\n <script>\n /* 使用插件jQuery.dotdotdot的方式 */\n // http://dotdotdot.frebsite.nl/\n $(function () {\n $(\".p4\").dotdotdot({\n wrap: 'letter',\n ellipsis: \"...\",\n /* 添加的文本为省略号 */\n height: 2,\n watch: true\n });\n })\n </script>\n</body>\n\n","categories":[],"tags":[]},{"title":"","url":"http://yoursite.com/html/移动端的适配.html","content":"<!DOCTYPE html>\n\n<head><meta name=\"generator\" content=\"Hexo 3.9.0\">\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n <script src=\"https://code.jquery.com/jquery-3.4.0.js\"></script>\n<link rel=\"stylesheet\" href=\"/css/prism-tomorrow.css\" type=\"text/css\"></head>\n\n<body>\n <script>\n </script>\n</body>\n\n","categories":[],"tags":[]},{"title":"project","url":"http://yoursite.com/project/index.html","content":"","categories":[],"tags":[]},{"title":"search","url":"http://yoursite.com/search/index.html","content":"","categories":[],"tags":[]},{"title":"tag","url":"http://yoursite.com/tag/index.html","content":"","categories":[],"tags":[]},{"title":"tags","url":"http://yoursite.com/tags/index.html","content":"","categories":[],"tags":[]}]