前端 - 随笔分类 - zjffun

Bootstarp - 源码分析 - alert.js v3.x 和 v4.x 的对比

摘要：# 预备知识## 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,... 阅读全文

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

Bootstrap Date Range Picker 配置

摘要：var optionSet1 = { startDate: moment().subtract(29, 'days'), endDate: moment(), minDate: '12/21/2012', maxDate: moment().subtract(1, 'days'), dateLimit: { days: 60 }, ... 阅读全文

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

Chrome - 调试 Web Worker 加载的 js 文件

摘要：以前在使用 requirejs 时遇到过加载的 js 无法在控制台调试的情况，今天做了下总结- 创建了 script 标签引入的 js 在 FF，Chrome 都能在调试器里找到。- Web Worker 引入的 js 无法直接在 FF，Chrome 的调试器里找到，需要在： Chrome 中：在引入的 js 文件顶部加上`//@ sourceURL=async_test.js`... 阅读全文

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

Chrome - 逆向分析 JS-1 分析 google 网站翻译器原文存放位置

摘要：剧透：就是使用了一下 Chrome DevTools 的 Memory 功能，通过已知的属性的值在 JS 内存中查找具有该值得属性# 一：不分析一下现有的网页翻译方法么？总所周知，谷歌的网页翻译很强大，根据我的使用经验谷歌有五个途径进行网页翻译：1. 使用 Chrome 的《翻译此页》功能：这是唯一没有被墙的方法直接就能用，但无法显示原文2. 使用 google 翻译的网页翻译：这个方法可以显... 阅读全文

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

Crypko 基于滚动条进行的动画是如何实现的？

摘要：[Crypko](https://crypko.ai/#/beta) 网站里面的下拉滚动条进行的动画感觉非常炫，于是研究了一下她的实现，发现她主要是使用了 [ScrollMagic](https://github.com/janpaepke/ScrollMagic) 这个库实现了基于滚动条的动画。为什么这么确定就是用了 ScrollMagic ？因为她代码里写的很清楚。。![Crypko 基于滚动... 阅读全文

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

CSS - @规则

摘要：# @规则[`@charset`](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset) — Defines the character set used by the style sheet.[`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) —... 阅读全文

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

CSS - inline-block 间隙

摘要：间隙产生的原因是`inline-block`对外是`inline`，对内是`block`。`inline`会将连续的空白符解析为一个空格（如：下面示例的两个`li`之间的后面的换行空格）。取消间隙的方法如下：```html Document 有间隙首页上一页 1 2 3 下一... 阅读全文

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

CSS - 使整个页面上的全部元素可编辑

摘要：- [在线预览](https://jsfiddle.net/1010543618/6zu1gush/)使用 [HTML 5 contenteditable 属性](http://www.w3school.com.cn/html5/att_global_contenteditable.asp) 阅读全文

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

CSS - 初始值、指定值、计算值、应用值、实际值

摘要：- 初始值：未提供指定值且未从父元素指定值继承的 CSS 属性的值。- 指定值：通过直接声明或 CSS 属性的值。- 计算值：通过需要计算得到的值，如，继承和相对的尺寸。（注意：有些计算要等到布局确定才能进行。）- 应用值：布局确定后计算得到的值，如，百分比的尺寸。- 实际值：实际值是应用值被应用后的近似值。如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可... 阅读全文

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

CSS - 同一行的元素高度统一

摘要：# 一：flex 大法## 步骤1. 设置外部容器 `display: flex;`2. 设置内部容器 `align-items: stretch;`## 原理> ## 示例 img1 120*200 img2 120*300 ... 阅读全文

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

CSS - 多行超出隐藏

摘要：```cssheight: 48px;line-height:16px;overflow: hidden;``` 阅读全文

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

CSS - 层叠上下文（The stacking context）

摘要：- 文档根元素``、拥有某些特殊样式（透明小于 1，`transform`不为`none`等）的元素会创建层叠上下文。- 未创建层叠上下文的元素会纳入上层的层叠上下文。[对 MDN 的上的例子的拓展](https://codepen.io/1010543618/pen/oVaOxP?&editable=true)```textRoot- DIV #1(z-index: 5)- DIV #2... 阅读全文

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

CSS - 架构

摘要：# [MaintainableCSS](https://maintainablecss.com/)1. 原子类几乎只有比行内样式少写几个字符这一个优点，缺点倒是一堆，最好别用2. 一味追求 “永远不要重复同样的事情两次” 会导致过度思考和过度设计，最终出现原子类3. 用 ID 设置样式不好，ID 应该用在表单字段、hash、ARIA 等特殊用途上4. 使用`.[-][-] {}`这种体现模... 阅读全文

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

CSS - 格式化上下文（Formatting Context）

摘要：Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 # BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 ## 生成浮动, 绝对定位元素, 和 display 属性为 inline-boxs、t... 阅读全文

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

CSS - 父元素宽度自适应子元素宽度之和

摘要：直接添加`width: max-content;`声明就 OK，之前太单纯了。* * *最近碰见这样一个需求，要让图片横向排列设置 x 方向的滚动条滚动查看，原本当直接创建一个 IFC（inline，float 什么的）就解决了，搞了半天发现搞不定（IFC 也是不能父元素宽度自适应子元素宽度之和的，因为会换行。。），最后用 flex 解决了（然后又发现使用 table 也是可以的），然后学了两个新... 阅读全文

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

CSS - 给 Font Awesome 拓展 Base64 编码的图标

摘要：和 fa 一样设置到伪元素[::before](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before)中就行，例如（fa 是直接设置 content，这里用的背景图）：```css.fa-science-garden::before { content: ""; display: block; /*居中*/ margin: 0 ... 阅读全文

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

CSS - 视觉格式化模型（Visual formatting model）

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

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

CSS - 设置 select 元素的样式

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

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

Datatables 配置

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

posted @ 2020-03-22 15:54 zjffun 阅读(351) 评论(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 阅读(284) 评论(0) 推荐(0)

zjffun

随笔分类 - 前端

公告