JosephGao

As I have set buttons' `border-radius` to none in the theme editor, the style is not applied to the small or mini size button. [示例图片](https://p0.ssl.qhimg.com/t01e116a24bb4775545.png)

> 最近一段时间，连续遇到了两次跟重定向相关的问题，本着知己知彼百战百胜的态度，我决定深入了解一下，顺便跟大家分享一下。 作为前端开发，大家对重定向一定不陌生，不就是永久重定向和临时重定向嘛，谁还不知道呢 😂。 那么大家是否知道永久重定向和临时重定向的区别呢？如果不小心设置了永久重定向该如何取消呢？如何优雅地使用重定向呢？接下来就让我们来一探究竟吧。 URL 重定向，能够将多个 URL 指向同一个页面，这一技术有着多种用途。在 HTTP 中有一个专门的响应，叫做 HTTP 重定向，也就是所有 3 开头的响应（这个相信大家都背过）。 除了 HTTP 重定向，还有其他方式能够进行重定向，本文也会介绍。 内容较长，我们先看一下本文的内容架构： 1. HTTP 重定向详解 2. 其他类型的重定向方式 3. 重定向的使用场景 4. 如何优雅地使用 301 ##...

今天要说的很简单，没有`setTimeout`的基本用法，也没有什么特殊用法。 就是想记录一下`setTimeout`的一个特殊情况，分享给可能也不知道的你们。 `setTimeout`的基本写法大家都不陌生，如下： ``` setTimeout(() => { // 说，你倒计时想干什么 }, millisecond) ``` 其中第二个参数是需要延时执行的毫秒数，大家应该都知道这个时间是不准确的，可以理解为最短延时。至于为什么是不准确，事件循环了解一下。 但是这个最短延时也会骗人，因为它可能会爆炸😂。 今天跟测一个项目，前端需要通过延时的方式去显示某课程是否开始，未开始展示倒计时界面，倒计时至开始时去掉倒计时界面，拉取主体内容。 但是测试小姐姐反馈说她的课程没有开始，没有显示倒计时，直接就显示主内容。并且没有复现步骤，只此一例。 我表示很诧异，但是也没办法。于是使出十八般武艺，开始在测试环境打断点调试，分析代码逻辑。好半天之后，纳尼，逻辑肯定是对的，我相信我的判断。 然后我突然开始怀疑`setTimeout`的倒计时时间问题。于是开始查，最后查到了原因，真的是这货的锅，它因为延时时间过长，炸了。 这就是今天的重点：**setTimeout的延时毫秒数是有限制的**。**millisec参数是Int32类型的，最大值为 2^31 - 1，即 2147483647。一旦超过这个限制，millisec参数将被视为0，代码会被立马执行**。 > setInterval也一样，毫秒数过大会被当做0，立即执行。 至于**解决方案**也比较简单，有以下两种： 1. 可以对setTimeout进行二次封装，对传入的延时毫秒数做个判断，如果超出限制，给出警告，并使用最大允许延时毫秒进行执行、或者给出警告后不执行。相信我，没有人会等得了这么长时间的。 2. 可以用setInterval来替换setTimeout,...

## 背景介绍 在单页应用盛行的今天，很多人似乎已经把简单的切图不当做一种技术活了。对于切页面，写静态网站都快要嗤之以鼻了。其实并非如此，写静态页面是前端入门的基本工作，是基本功扎实的体现。而且在工作中，我们也少不了要开发一些静态的官网类网站。我们要做的是想一想如何更好的开发静态页面。 歪马最近因工作原因，需要对一个托管于内容管理系统的官网类网站进行迁移。既然要重新弄，那工程化自然少不了，webpack、css预编译等全上了。这样才能向更好的开发体验靠齐。 由于是静态官网，在使用webpack的时候，需要指定多入口，并且为不同的入口指定不同的template模板。借助`html-webpack-plugin`可以为不同的入口指定模板，如下所示： ```JS // ... entrys.map(entryName => { htmlWebpackPlugins.push( new HtmlWebpackPlugin({ template: `${entryName}.html`, filename: `${entryName}.html`, chunks: ['vendor', 'common', entryName], }), ) }) ``` 通过对入口列表进行遍历，我们可以为不同的入口指定不同的模板。 在使用Vue/React等框架时，我们早已习惯在开发的过程中进行组件的抽取与复用。那么在这类纯静态的网站开发中，我们也一定想要尽可能的复用页面内的公共部分，如header、footer、copyright等内容。 这些在服务端渲染的开发模式下早就已经很成熟了，借助模板引擎可以轻松地完成，如`nunjucks`/`pug`/`ejs`等。 `webpack-html-plugin`中的`template`默认使用的就是`ejs`。既然官方使用的就是`ejs`，那么我们也先从这个方向找找方案。...

本文并不是一份完整的Linux实用命令列表，如果你的预期是这样的，那这篇文章可能就要让你失望了。 本文主要针对于FEer们。作为前端，一开始我们总是和HTML/JavaScript/CSS三大块打交道，但是久而久之，我们就会接触更多的内容，比如服务的部署。而这一块对于我们的要求会更全面，其中对Linux指令就有很多要求。如果你想要部署服务，而又没有成熟的工具或平台可以借助，需要完全自己来操作的话，你就**需要准备好部署服务需要的所有文件、登录指定的服务器、发布指定文件、启动服务、服务器启动不成功时候进行调试以及服务维护过程中进行问题的排查**。本文就将从这一条线讲起，分享歪马在工作中所积累的一些实用指令。 别看指令简单，熟练使用后，你将会收获：“哇，牛B！”。 下面歪马会从三个部分来讲述相关的Linux命令，第一部分是服务部署前的准备，第二部分是登录服务器部署，第三部分是问题排查相关。 ## 一、部署前准备 前端的业务部署，简单说起来就是把编译好的静态文件准备好，放到服务器就行。不简单的，我们也从这种简单的说起😂。 通常情况下，我们会将编译后的文件以及服务启动相关的文件放到一个目录里，然后将其压缩打包好。我们会比较高频的使用以下几个命令。 ### 1. mkdir 创建打包目录 `mkdir`可以用来创建目录，要求命令执行用户有当前目录的写权限，且创建的目录不能已存在。如果创建的目录已存在会给予提示，但不会报错。如我们创建一个`output`目录，提示如下。  `mkdir`的命令格式如下：`mkdir [选项] `。比较有用的参数是`-p/--parent`，该参数可以是一个路径名。如果路径中的某些目录上不存在，加上此选项后，可以自动创建尚不存在的目录，可以一次创建多个目录。 如下，带有参数p和不带的对比：  可以看出带有参数p的命令会自动创建不存在的目录。 ### 2. cp 复制内容 准备好了打包目录之后，我们就需要复制我们需要的内容了。这时候就需要用到`cp`命令了。`cp`命令可以将源文件复制到目标文件，或者将多个源文件复制到目标文件。 命令格式如下：`cp [选项] `。歪马觉得比较有用的参数有以下几个： *...

作为前端开发，从入行起，应该就接触过跨域的概念。工作中，在与服务端配合时，也经常需要处理跨域相关问题。如果你不能理解到底什么是跨域，那在与服务端配合解决跨域问题时，你可能就要落入对方的掌控之中了(哈哈，开个玩笑)。 为了避免这一尴尬的境地，今天我来带着大家一起重温并巩固一下以下内容：什么是跨域，跨域有哪些实际的开发场景，有哪些方式可以快速的处理跨域问题。 整篇内容没有涵盖网上所有的与跨域“沾边”的知识，而是从实际场景出发，旨在解决工作中经常遇到的跨域问题。 ## 一、什么是跨域？ ### 1.1 同源策略 VS 跨域 如果让你直接定义什么是跨域，你可能会发现很难定义。所以需要借助与之对立的概念——**同源策略(SOP，Same-Origin Policy)**。只要不是同源的，那就是跨域的。 **同源策略**是浏览器中一个极为至关重要的安全机制，可以用来限制某一源内的文档或脚本与另一源内的资源如何进行交互。其目的在于隔离潜在的恶意文档，减少可能存在的攻击。 而对于同源的定义是：**协议、主机名(host)以及端口三者均相同**。 维基百科中对于URI的结构组成说明如下： ```bash [协议名]://[用户名]:[密码]@[主机名]:[端口]/[路径]?[查询参数]#[片段ID] ``` > 常规情况下，我们无需在URI中带有用户名密码等信息用于验证。这只是一个完整的URI组成示例。 所以对于同源，只要URI中协议名、主机名、端口三者有其中一条不同，则视为不同源。不同源之间请求资源，则为跨域。其中主机名部分，**主域和子域视为不同、域名与其对应的IP也视为不同**，这就是说看着必须得一样。 ### 1.2 跨域的限制 当存在跨域问题时，浏览器会做出一定的限制措施。主要包括以下三点： 1. Cookie、LocalStorage 和 IndexDB 无法读取。...

对于这个问题，你可能还没有过相关需求，或者还没有在面试的时候被问到过，但是歪马相信你终将有需要。 这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的时候，能够答得漂亮。 如果有一天你被问到：“你能说一下如何实现一个固定宽高比的元素吗？” 听到这个的时候你一定不要盲目的说出答案。因为这么问的话，题目并不明确。所以你可以帮面试官补充题设或提问来确认要求。你可以做如下回答： * 如果元素的尺寸已知的话，没什么好说的，计算好宽高写上去就行了。 * 如果元素尺寸未知，最简单的方法是用JavaScript实现，如果用CSS的话可以分为以下几种： * 如果是可替换元素``或``，该怎么实现? * 如果是普通的元素，又应该怎么实现？ 今天歪马就和大家一起看看上面几种情况。 首先，元素尺寸已知，这个pass掉。不用说，说了我怕你们打我。 我们重点讨论**元素尺寸未知**的情况。 所以本文主要分为可替换元素和普通元素如何实现固定宽高比。 ## 一、可替换元素实现固定宽高比 可替换元素(如``、``)和其他元素不同，它们本身有像素宽度和高度的概念。所以如果想实现这一类元素固定宽高比，就比较简单。 我们可以**指定其宽度或者高度值，另一边自动计算就可以了**。 如下，我们固定图片元素的宽度，高度自适应： ```HTML ``` ```CSS .img-wrapper { width: 50vw; margin: 100px...

> 篇外话： > 感觉非常对不起我为数不多来之不易的粉丝们，之前列的陪读计划，因为工作原因被生生的摧残掉了。你要问为什么的话？那就是太忙呗，忙到没空写文章的那种。不过“广大”粉丝们放心，歪马已经把自己想象成一只小毛驴，努力追着前面的胡萝卜往前赶了。 😂 尴尬的是本文也并不是陪读系列文章，而是歪马在进行第五章《漂亮的盒子》时，有感而发。 读到书中介绍`border-radius`的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角`border-image`。虽然这一技术确如书中所说，很少被使用了。但是歪马突然想起自己曾经为了实现某个效果折腾了很久，而这刚好适合用`border-image`来实现。 **本文将会借助这一效果先给大家展示一下`border-image`的使用效果，总结并建议在哪些地方可以使用`border-image`，最后再为想要动手一试的你们快速讲解一下相关的语法**。 ## 一、效果：如何实现一个切角的圆角矩形 很久很久以前，歪马收到下面这样一份设计图(局部图)。  请你一定动动手指，放大了仔细看。这四个圆角矩形切掉了一个角，形成了一个不规则的图形，不规则图形有一个发光的 border，border 两侧均有一定的模糊。 这时候你看会说了，这还不简单，切四张图，直接当背景不就行了。但是这个地方还有个额外的要求就是**每一个矩形的尺寸并不固定**。如果我们简单的用背景来实现的话，不同尺寸时图片就会变形。这显然不是牛逼的我们所追求的。 笔者当时为了灵活，使用了一些极其麻烦的方式实现了，并且最后还有一定的限制。这其中的麻烦，都能再写一篇文章。所以这里我们就不说了，说出来还丢人。 前天晚上读到九宫格技术时，我突然灵光一现，当年我实现这个效果的时候为什么不用九宫格呢？是我不知道吗？不，我是知道的。那我为什么不用呢？其实是因为我不知道九宫格除了常规用法讲解时提到的那些我压根不会用的用法外还有哪些使用场景。 现在我可以跟大家说`border-image`特别适合用于**类似的四个边角独特，中间区域重复的场景**。一般大屏类的设计可能会有很多的特殊块，其中有一些就适合用`border-image`来实现。当然常规的画框型也是适合用九宫格的。 说了这么多，我们还是一起来看下如何实现上面的效果吧，以右下角是切角的圆角矩形为例。 > 因为笔者素材原因，背景只能用深蓝色。在有设计师的情况下，可以让其导出一张透明的 png 图，这样就可以适应任何场景了。 代码： ```CSS .border-image-demo {...

说到背景图片右侧定位，大家一定会想到使用`background-position`属性来实现。 > 底部定位同理，本文以右侧为例 下面，我们先来简单看一下`background-position`的基本用法及注意事项。 `background-position`属性的值既可以使用关键字，也可以是像素、`em`或百分比，可以指定两个值，分别表示相对于左侧的偏移量和相对于顶部的偏移量。关键字包括用于x轴的`left`/`cener`/`right`和用于y轴的`top`/`center`/`bottom`，规范没有约定两个值的先后顺序。不过歪马**建议大家不管使用什么值，都先指定x轴，再指定y轴**。 使用像素和`em`与使用百分比进行背景定位时，计算方式是不一样的。**使用像素和`em`时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算**。**使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点**。百分比的定位效果如下：  > 此外，还需要注意，关键字和其他值不可以混用，否则会失效。 至此，我们简单过了下`background-position`的用法和注意事项。接下来，我们思考一下如何实现如下的效果，即**背景图片右侧定位**。  首先，根据上面介绍的单位和关键字，我们应该无法实现背景图片右侧定位，且图片周围留有一定的空白间隙。我们没法用像素/`em`/百分比，因为不知道该距离**左侧**多远，关键词也无法预留间距。 如果你不知道该怎么实现的话，我们一起来看看5种实现这一效果的小技巧吧。 ## 1. 伪实现：嵌套元素实现类似效果 通过元素嵌套的方式，我们可以很容易实现这样的布局，外层元素加`padding`，`flex`布局、绝对定位、`float`这些方式都能实现，实现方式较为简单，这里我就不放代码了。 这类实现方式，由于嵌套了元素，并不是我们想要的实现效果。所以这是一种**伪实现**。 ## 2. 蹩脚的实现：背景图片右侧添加透明像素 上图的效果中，图片右侧有`10px`的空隙，我们可以通过改变背景图，在右侧加上`10px`宽的透明像素，然后借助`background-position`的关键字就能实现上述的效果了。代码如下： ```CSS .bg-right { width: 500px; height: 120px; padding:...

是时候继续我的云陪读计划了😂。 《精通 CSS》往期陪读章节： - [第 1 章 基础知识](https://mp.weixin.qq.com/s/ELMTBs3kK8SyiCzluQdxZQ) - [第 2 章 添加样式](https://mp.weixin.qq.com/s/p8yLu5cXjuinYNkWT-m18g) - [第 3 章 可见格式化模型](https://mp.weixin.qq.com/s/_PgRcQHLPcHz9TV7yf_Ttg) - [第 4 章 网页排版](https://mp.weixin.qq.com/s/1lMy0NLUlz5KI7f42xa5aw) --- 今天我们要阅读的章节是《精通CSS》的第五章 漂亮的盒子。 前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。 本文将从这三个方面来介绍如何美化一个盒子。 * 给盒子指定纯色、渐变色背景以及图片背景...