2020年7月2日
CSS 正常流
摘要： 正常流正常在哪里？ 很多人会问。 我觉得感性的理解是很正常的。。。只不过如果我们从严苛的 CSS 标准角度去理解正常流，规定排版的算法，就需要引入那些复杂的概念，就变得常人难以理解不正常了。 我们可以用一句话来描述正常流的排版行为，那就是：依次排列，排不下了换行。 float 就不说了，前面有文章写 阅读全文
posted @ 2020-07-02 14:42 jaiodfjiaodf 阅读(300) 评论(0) 推荐(0) 编辑
CSS selectors 选择器
摘要： CSS selectors 选择器 选择器的基本意义是：根据一些特征，选中元素树上的一批元素。 总览分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。 复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择 阅读全文
posted @ 2020-07-02 10:47 jaiodfjiaodf 阅读(902) 评论(0) 推荐(0) 编辑
CSS function
摘要： 按照 winter 老师「知识完备性」的思路，尝试整理了一下 CSS 函数。 Common CSS Functions url() attr() calc() lang() :not() CSS Custom Properties var() Color Functions rgb() and rg 阅读全文
posted @ 2020-07-02 09:55 jaiodfjiaodf 阅读(426) 评论(0) 推荐(0) 编辑
2020年7月1日
浏览器重绘与重排的区别？
摘要： 今天接触到的新的名词 重绘 重排 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素。 重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变。 单单改变元素的外观，肯定 阅读全文
posted @ 2020-07-01 17:22 jaiodfjiaodf 阅读(835) 评论(0) 推荐(0) 编辑
浮动 清除浮动 float clear
摘要： float clear 我们先来看看传说中的 float 1. 正常版本 首先是下面这段代码 <div> float: <div style="width: 200px;height:200px;background-color: aqua;"></div> 文本文本文本文本文本文本文本文本文本文本 阅读全文
posted @ 2020-07-01 16:56 jaiodfjiaodf 阅读(177) 评论(0) 推荐(0) 编辑
2020年6月30日
inline-block
摘要： inline-block 必须要配合 vertical-align属性来用，不然就会出现莫名其妙的问题。 就是这个行模型啊，它的基线是根据最高的那个 inline-box 来确定的。 winter 老师建议，inline 的盒子的 vertical-align 只用 top || bottom || 阅读全文
posted @ 2020-06-30 12:32 jaiodfjiaodf 阅读(270) 评论(0) 推荐(0) 编辑
标准盒模型-怪异盒模型
摘要： 以前我一直以为 border-box 包含了 margin... 阅读全文
posted @ 2020-06-30 09:59 jaiodfjiaodf 阅读(137) 评论(0) 推荐(0) 编辑
脑图——CSS 技术栈
摘要： ![](https://img2020.cnblogs.com/blog/1735070/202006/1735070-20200630091538450-667971814.png) 阅读全文
posted @ 2020-06-30 09:16 jaiodfjiaodf 阅读(168) 评论(0) 推荐(0) 编辑
脑图——redux 流程图
摘要： ![](https://img2020.cnblogs.com/blog/1735070/202006/1735070-20200630152531592-1496798472.png) 阅读全文
posted @ 2020-06-30 09:15 jaiodfjiaodf 阅读(295) 评论(0) 推荐(0) 编辑
2020年6月29日
获取所有的 CSS 标准
摘要： 首先我们打开 w3c 官网，有关 CSS标准的标准和草稿都在这里：https://www.w3.org/TR/?tag=css， 然后我们直接使用 JS 从浏览器里面获取 var lis = document.getElementById("container").children; var res 阅读全文
posted @ 2020-06-29 21:04 jaiodfjiaodf 阅读(195) 评论(0) 推荐(0) 编辑
知识的完备性、连贯性很重要
摘要： 过去喜欢加群，喜欢看别人各种分享的文章，然后这些文章的知识点很零散，都没有穿成一串，自己看完也经常就会忘。 事实上，知识的连贯性非常重要，就像现在学 JavaScript、CSS、HTML，都是先搭建起大致的框架，然后在框架下对每个知识点细分的学习，每个知识点都有相关性，这些知识点都学完了，这个完备 阅读全文
posted @ 2020-06-29 17:06 jaiodfjiaodf 阅读(667) 评论(0) 推荐(0) 编辑
2020年6月22日
POST 与 PUT 的区别
摘要： 网上看了啰里嗦嗦的一大推，结果这两句话就完了。。。 PUT 请求：如果两个请求相同，后一个请求会把前面的一个请求覆盖掉。（所以 PUT 用来更新资源） POST 请求：后一个请求不会把第一个请求覆盖掉。（所以 POST 用来新增资源） 阅读全文
posted @ 2020-06-22 11:36 jaiodfjiaodf 阅读(842) 评论(0) 推荐(1) 编辑
一个浏览器是如何工作的？
摘要： 1. 过程 浏览器首先使用 HTTP 协议 或者 HTTPS 协议，向服务端请求页面。 把请求回来的 HTML 代码经过解析，构建成 DOM 树。 计算 DOM 上的属性。 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图。 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度。 阅读全文
posted @ 2020-06-22 10:58 jaiodfjiaodf 阅读(222) 评论(0) 推荐(0) 编辑
2020年6月18日
相等表达式
摘要： ‘==’ 又是一个JavaScript 中一个著名的失误，许多的编程规范甚至要求完全避免用 == 运算，使用 ‘ 来替代 ‘==‘。 对于 ‘==’, 它在ECMA262 中写的非常的复杂，但是归根结底，类型不通的变量比较的时候也只有三条规则： undefined 与 null 相等 字符串和 bo 阅读全文
posted @ 2020-06-18 16:42 jaiodfjiaodf 阅读(161) 评论(0) 推荐(0) 编辑
来看几段特殊JavaScript的代码（写成这样会被打死）
摘要： 12.toString 为什么会报错。 中间涉及到许多的词法分析，具体可以去看 winter 老师的重学前端、前端进阶训练营，再具体你可以直接去啃 ECMA-262去。 对于 12.toString 为什么会报错？ 我们来看，我们写一个 NumberLiteral 的时候，有这些写法。 12 Num 阅读全文
posted @ 2020-06-18 15:36 jaiodfjiaodf 阅读(240) 评论(0) 推荐(0) 编辑
JavaScript执行运行时 再解（四）
摘要： Completion function foo(){ try{ return 0; } catch(err) { } finally { console.log("a") } } console.log(foo()); // return 执行 console 输出 虽然 return 执行了，但是 阅读全文
posted @ 2020-06-18 11:24 jaiodfjiaodf 阅读(177) 评论(0) 推荐(0) 编辑
JavaScript执行运行时 再解（三）
摘要： 函数 分类 function foo() { // code } const foo = () => { // code } class C { foo() { // code } } function* foo() { // code } class Foo { constructor() { / 阅读全文
posted @ 2020-06-18 10:51 jaiodfjiaodf 阅读(143) 评论(0) 推荐(0) 编辑
JavaScript执行运行时 再解（二）
摘要： 闭包 作用域链 执行上下文 this 闭包（closure） 闭包分为两个部分 环境部分 环境：函数的词法环境（执行上下文的一部分） 标识符列表：函数中用到的未声明的变量 标识符部分：函数体 执行上下文（处于环境当中） lexical environment：词法环境，当获取变量或者 this 值的 阅读全文
posted @ 2020-06-18 10:30 jaiodfjiaodf 阅读(264) 评论(0) 推荐(0) 编辑
2020年6月17日
JavaScript执行运行时 再解（一）
摘要： 浏览器拿到一段 JavaScript 代码，是如何运行的？ 设想一下，如果你是chrome 浏览器的开发者（这些人是真的666），如何使用Java Script 引擎执行 JavaScript？ 其实当浏览器收到一段 JavaScript 的代码的时候，浏览器首先做的，就是传递给 JavaScrip 阅读全文
posted @ 2020-06-17 15:53 jaiodfjiaodf 阅读(613) 评论(0) 推荐(0) 编辑
JavaScript Object 对象 再解（五）
摘要： JavaScript 中的对象分类 我们可以把对象分为以下的几类。 宿主对象（host Objects）：由JavaScript 宿主环境提供的对象，它们的行为完全由宿主环境决定。 宿主对象千奇百怪，前端最熟悉的就是浏览器环境里面的宿主了。在浏览器里面，我们都知道全局对象是 window，windo 阅读全文
posted @ 2020-06-17 10:16 jaiodfjiaodf 阅读(408) 评论(0) 推荐(0) 编辑