zjffun

2020年3月22日

摘要： # 几个概念- 块：block，一个抽象的概念，块与块之间在垂直方向上按照顺序依次堆叠。- 行内：inline，一个抽象的概念，行内与行内之间在水平方向上按照顺序依次堆叠（会有换行）。- 元素：element，指 HTML 元素。- 盒子：box，一个抽象的概念，由 CSS 引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(141) 评论(0) 推荐(0) 编辑

CSS - 设置 select 元素的样式

摘要：注意：option 外面有个框，这个框不同浏览器生成的还不一样，给这个框设置样式的方法也没有找到（有说法是这是浏览器创建的 shadow dom 没法设置）。所以要想完全控制还是用列表进行模拟比较好。设置 select 元素样式主要是要将那个默认的图标给改掉，方法一般来首有三种：1. `appearance: none`隐藏默认图标。2. `overflow: hidden`截去默认图标。3.... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(2189) 评论(0) 推荐(0) 编辑

Datatables 配置

摘要：全部配置：```jsvar datatables_i18n_cn = { "processing": "处理中...", "lengthMenu": "显示 _MENU_ 项结果", "zeroRecords": "没有匹配结果", "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "infoEmpty": "显示第 0 至... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(314) 评论(0) 推荐(0) 编辑

FireFox - 当 transform 的值为 scale(浮点数) 时边框渲染错误

摘要：浏览器的问题，这个 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 的元素和... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(272) 评论(0) 推荐(0) 编辑

FOUC（Flash Of Unstyled Content）文档样式闪烁

摘要：今天看面试题看到了这个新名词。。我以前是没有发现过这种状况，应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧。# 什么是文档样式闪烁（Flash Of Unstyled Content）？我的理解是先渲染了 DOM 然后加载 CSS，因为 CSS 样式的使用遵循层叠的原理，因此 DOM 元素就会多次赋予不同的样式，非常鬼畜。产生的途径可能因为 1. 加载 CSS 的位置... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(119) 评论(0) 推荐(0) 编辑

HTTP - 压缩

摘要： # 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... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(75) 评论(0) 推荐(0) 编辑

HTTP 协议

摘要： # 请求协议## 请求行：request_line请求数据的第一行，用来说明当前请求的最基本信息。 GET /index.php?p=back HTTP/1.1CRLF由三块组成：1. 方式资源地址（没有域名）2. 协议版本3. `\r\n`（回车换行 CRLF）## 请求头：request_header浏览器需要传输给服务器的属性数据 - 主机，请求的主机。用于标识一台 web... 阅读全文

posted @ 2020-03-22 15:54 zjffun 阅读(116) 评论(0) 推荐(0) 编辑

2019年12月15日

HTTP 状态码

摘要： # 1xx Informational（信息）## 100 Continue（继续）## 101 Switching Protocols（交换协议）切换 WebSocket 时，响应状态码，eg： "request": { "bodySize": 0, "method": "GET", "url": "WebSocket URL", "httpVers... 阅读全文

posted @ 2019-12-15 22:00 zjffun 阅读(306) 评论(0) 推荐(0) 编辑

HTTP 缓存

摘要：当发送 GET 请求时浏览器会检查该资源的缓存信息，并决定是否发送 HTTP 请求。如果需发送请求则根据响应决定是否使用原缓存，或不使用原缓存并设置新缓存。# 浏览器处理 HTTP 缓存流程（简化版）## 请求阶段- 该资源是否有缓存？ - 有缓存： - 该资源 `Cache-Control`或`Expires` 是否过期？ - 未过期：直... 阅读全文

posted @ 2019-12-15 22:00 zjffun 阅读(220) 评论(0) 推荐(0) 编辑

http-server 建立 HTTPS 服务

摘要： # 1. 创建证书进入要建立 HTTPS 服务的目录```bashopenssl genrsa -out key.pem 1024openssl req -new -key key.pem -out csr.pemopenssl x509 -req -in csr.pem -signkey key.pem -out cert.pem```# 2. 启动服务```bashhttp-server -S... 阅读全文

posted @ 2019-12-15 22:00 zjffun 阅读(2016) 评论(0) 推荐(0) 编辑

公告