博客园 - zjffun
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=140146
2020-03-24T03:55:05Z
zjffun
https://www.cnblogs.com/jffun-blog/
feed.cnblogs.com
https://www.cnblogs.com/jffun-blog/p/10203485.html
deleted - zjffun
deleted
2020-03-23T09:31:00Z
2020-03-23T09:31:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】deleted <a href="https://www.cnblogs.com/jffun-blog/p/10203485.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203526.html
deleted - zjffun
deleted
2020-03-23T08:25:00Z
2020-03-23T08:25:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】deleted <a href="https://www.cnblogs.com/jffun-blog/p/10203526.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10206652.html
deleted - zjffun
deleted
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】deleted <a href="https://www.cnblogs.com/jffun-blog/p/10206652.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10206647.html
Bootstarp - 源码分析 - alert.js v3.x 和 v4.x 的对比 - zjffun
# 预备知识## 1. 什么是使用 data-api 调用就是给所有带有`data-dismiss="alert"`的元素绑定点击事件```js// v3.x:$(document).on("click.bs.alert.data-api", dismiss, Alert.prototype.close);// v4.x:$(document).on( Event.CLICK_DATA_API,...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# 预备知识## 1. 什么是使用 data-api 调用就是给所有带有`data-dismiss="alert"`的元素绑定点击事件```js// v3.x:$(document).on("click.bs.alert.data-api", dismiss, Alert.prototype.close);// v4.x:$(document).on( Event.CLICK_DATA_API,... <a href="https://www.cnblogs.com/jffun-blog/p/10206647.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203544.html
FOUC(Flash Of Unstyled Content)文档样式闪烁 - zjffun
今天看面试题看到了这个新名词。。我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧。# 什么是文档样式闪烁(Flash Of Unstyled Content)?我的理解是先渲染了 DOM 然后加载 CSS,因为 CSS 样式的使用遵循层叠的原理,因此 DOM 元素就会多次赋予不同的样式,非常鬼畜。产生的途径可能因为 1. 加载 CSS 的位置...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】今天看面试题看到了这个新名词。。我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧。# 什么是文档样式闪烁(Flash Of Unstyled Content)?我的理解是先渲染了 DOM 然后加载 CSS,因为 CSS 样式的使用遵循层叠的原理,因此 DOM 元素就会多次赋予不同的样式,非常鬼畜。产生的途径可能因为 1. 加载 CSS 的位置... <a href="https://www.cnblogs.com/jffun-blog/p/10203544.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203541.html
HTTP - 压缩 - zjffun
# gzip# Brotli比 gzip 压的还厉害> - [How To Enable GZIP & Brotli Compression for Nginx on Linux - Computing for Geeks](https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linu...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# gzip# Brotli比 gzip 压的还厉害> - [How To Enable GZIP & Brotli Compression for Nginx on Linux - Computing for Geeks](https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linu... <a href="https://www.cnblogs.com/jffun-blog/p/10203541.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203538.html
HTTP 协议 - zjffun
# 请求协议## 请求行:request_line请求数据的第一行,用来说明当前请求的最基本信息。 GET /index.php?p=back HTTP/1.1CRLF由三块组成:1. 方式资源地址(没有域名)2. 协议版本3. `\r\n`(回车换行 CRLF)## 请求头:request_header浏览器需要传输给服务器的属性数据 - 主机,请求的主机。用于标识一台 web...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# 请求协议## 请求行:request_line请求数据的第一行,用来说明当前请求的最基本信息。 GET /index.php?p=back HTTP/1.1CRLF由三块组成:1. 方式资源地址(没有域名)2. 协议版本3. `\r\n`(回车换行 CRLF)## 请求头:request_header浏览器需要传输给服务器的属性数据 - 主机,请求的主机。用于标识一台 web... <a href="https://www.cnblogs.com/jffun-blog/p/10203538.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203551.html
FireFox - 当 transform 的值为 scale(浮点数) 时边框渲染错误 - zjffun
浏览器的问题,这个 bug 已经有很久的历史了。[1476379 - Border issue (pixels) when using floating point numbers in css transform: scale()](https://bugzilla.mozilla.org/show_bug.cgi?id=1476379)不知道有什么解法。不只是`border`,1px 的元素和...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】浏览器的问题,这个 bug 已经有很久的历史了。[1476379 - Border issue (pixels) when using floating point numbers in css transform: scale()](https://bugzilla.mozilla.org/show_bug.cgi?id=1476379)不知道有什么解法。不只是`border`,1px 的元素和... <a href="https://www.cnblogs.com/jffun-blog/p/10203551.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10203553.html
Datatables 配置 - zjffun
全部配置:```jsvar datatables_i18n_cn = { "processing": "处理中...", "lengthMenu": "显示 _MENU_ 项结果", "zeroRecords": "没有匹配结果", "info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "infoEmpty": "显示第 0 至...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】全部配置:```jsvar datatables_i18n_cn = { "processing": "处理中...", "lengthMenu": "显示 _MENU_ 项结果", "zeroRecords": "没有匹配结果", "info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "infoEmpty": "显示第 0 至... <a href="https://www.cnblogs.com/jffun-blog/p/10203553.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204017.html
CSS - 设置 select 元素的样式 - zjffun
注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置)。所以要想完全控制还是用列表进行模拟比较好。设置 select 元素样式主要是要将那个默认的图标给改掉,方法一般来首有三种:1. `appearance: none`隐藏默认图标。2. `overflow: hidden`截去默认图标。3....
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置)。所以要想完全控制还是用列表进行模拟比较好。设置 select 元素样式主要是要将那个默认的图标给改掉,方法一般来首有三种:1. `appearance: none`隐藏默认图标。2. `overflow: hidden`截去默认图标。3.... <a href="https://www.cnblogs.com/jffun-blog/p/10204017.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204029.html
CSS - 视觉格式化模型(Visual formatting model) - zjffun
# 几个概念- 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠。- 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行)。- 元素:element,指 HTML 元素。- 盒子:box,一个抽象的概念,由 CSS 引擎根据文档中的内容所创建,主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的,有时多个...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# 几个概念- 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠。- 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行)。- 元素:element,指 HTML 元素。- 盒子:box,一个抽象的概念,由 CSS 引擎根据文档中的内容所创建,主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的,有时多个... <a href="https://www.cnblogs.com/jffun-blog/p/10204029.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204028.html
CSS - 给 Font Awesome 拓展 Base64 编码的图标 - zjffun
和 fa 一样设置到伪元素[::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before)中就行,例如(fa 是直接设置 content,这里用的背景图):```css.fa-science-garden::before { content: ""; display: block; /*居中*/ margin: 0 ...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】和 fa 一样设置到伪元素[::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before)中就行,例如(fa 是直接设置 content,这里用的背景图):```css.fa-science-garden::before { content: ""; display: block; /*居中*/ margin: 0 ... <a href="https://www.cnblogs.com/jffun-blog/p/10204028.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204027.html
CSS - 父元素宽度自适应子元素宽度之和 - zjffun
直接添加`width: max-content;`声明就 OK,之前太单纯了。* * *最近碰见这样一个需求,要让图片横向排列设置 x 方向的滚动条滚动查看,原本当直接创建一个 IFC(inline,float 什么的)就解决了,搞了半天发现搞不定(IFC 也是不能父元素宽度自适应子元素宽度之和的,因为会换行。。),最后用 flex 解决了(然后又发现使用 table 也是可以的),然后学了两个新...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】直接添加`width: max-content;`声明就 OK,之前太单纯了。* * *最近碰见这样一个需求,要让图片横向排列设置 x 方向的滚动条滚动查看,原本当直接创建一个 IFC(inline,float 什么的)就解决了,搞了半天发现搞不定(IFC 也是不能父元素宽度自适应子元素宽度之和的,因为会换行。。),最后用 flex 解决了(然后又发现使用 table 也是可以的),然后学了两个新... <a href="https://www.cnblogs.com/jffun-blog/p/10204027.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204026.html
CSS - 格式化上下文(Formatting Context) - zjffun
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。 # BFC块级格式化上下文,它是指一个独立的块级渲染区域,只有 Block-level BOX 参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 ## 生成浮动, 绝对定位元素, 和 display 属性为 inline-boxs、t...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。 # BFC块级格式化上下文,它是指一个独立的块级渲染区域,只有 Block-level BOX 参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 ## 生成浮动, 绝对定位元素, 和 display 属性为 inline-boxs、t... <a href="https://www.cnblogs.com/jffun-blog/p/10204026.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204052.html
CSS - 使整个页面上的全部元素可编辑 - zjffun
- [在线预览](https://jsfiddle.net/1010543618/6zu1gush/)使用 [HTML 5 contenteditable 属性](http://www.w3school.com.cn/html5/att_global_contenteditable.asp)
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】- [在线预览](https://jsfiddle.net/1010543618/6zu1gush/)使用 [HTML 5 contenteditable 属性](http://www.w3school.com.cn/html5/att_global_contenteditable.asp) <a href="https://www.cnblogs.com/jffun-blog/p/10204052.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204051.html
CSS - inline-block 间隙 - zjffun
间隙产生的原因是`inline-block`对外是`inline`,对内是`block`。`inline`会将连续的空白符解析为一个空格(如:下面示例的两个`li`之间的后面的换行空格)。取消间隙的方法如下:```html Document 有间隙 首页 上一页 1 2 3 下一...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】间隙产生的原因是`inline-block`对外是`inline`,对内是`block`。`inline`会将连续的空白符解析为一个空格(如:下面示例的两个`li`之间的后面的换行空格)。取消间隙的方法如下:```html Document 有间隙 首页 上一页 1 2 3 下一... <a href="https://www.cnblogs.com/jffun-blog/p/10204051.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204041.html
CSS - 架构 - zjffun
# [MaintainableCSS](https://maintainablecss.com/)1. 原子类几乎只有比行内样式少写几个字符这一个优点,缺点倒是一堆,最好别用2. 一味追求 “永远不要重复同样的事情两次” 会导致过度思考和过度设计,最终出现原子类3. 用 ID 设置样式不好,ID 应该用在表单字段、hash、ARIA 等特殊用途上4. 使用`.[-][-] {}`这种体现模...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# [MaintainableCSS](https://maintainablecss.com/)1. 原子类几乎只有比行内样式少写几个字符这一个优点,缺点倒是一堆,最好别用2. 一味追求 “永远不要重复同样的事情两次” 会导致过度思考和过度设计,最终出现原子类3. 用 ID 设置样式不好,ID 应该用在表单字段、hash、ARIA 等特殊用途上4. 使用`.[-][-] {}`这种体现模... <a href="https://www.cnblogs.com/jffun-blog/p/10204041.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204047.html
CSS - 层叠上下文(The stacking context) - zjffun
- 文档根元素``、拥有某些特殊样式(透明小于 1,`transform`不为`none`等)的元素会创建层叠上下文。- 未创建层叠上下文的元素会纳入上层的层叠上下文。[对 MDN 的上的例子的拓展](https://codepen.io/1010543618/pen/oVaOxP?&editable=true)```textRoot- DIV #1(z-index: 5)- DIV #2...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】- 文档根元素``、拥有某些特殊样式(透明小于 1,`transform`不为`none`等)的元素会创建层叠上下文。- 未创建层叠上下文的元素会纳入上层的层叠上下文。[对 MDN 的上的例子的拓展](https://codepen.io/1010543618/pen/oVaOxP?&editable=true)```textRoot- DIV #1(z-index: 5)- DIV #2... <a href="https://www.cnblogs.com/jffun-blog/p/10204047.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204046.html
CSS - 多行超出隐藏 - zjffun
```cssheight: 48px;line-height:16px;overflow: hidden;```
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】```cssheight: 48px;line-height:16px;overflow: hidden;``` <a href="https://www.cnblogs.com/jffun-blog/p/10204046.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/jffun-blog/p/10204045.html
CSS - 同一行的元素高度统一 - zjffun
# 一:flex 大法## 步骤1. 设置外部容器 `display: flex;`2. 设置内部容器 `align-items: stretch;`## 原理> ## 示例 img1 120*200 img2 120*300 ...
2020-03-22T07:54:00Z
2020-03-22T07:54:00Z
zjffun
https://www.cnblogs.com/jffun-blog/
【摘要】# 一:flex 大法## 步骤1. 设置外部容器 `display: flex;`2. 设置内部容器 `align-items: stretch;`## 原理> ## 示例 img1 120*200 img2 120*300 ... <a href="https://www.cnblogs.com/jffun-blog/p/10204045.html" target="_blank">阅读全文</a>