2020年9月25日
响应式布局和自适应布局详解
摘要： 响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说 阅读全文
posted @ 2020-09-25 17:03 尖子 阅读(1218) 评论(0) 推荐(0) 编辑
回流和重绘
摘要： 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN） 从上面这个图上，我们可以看到，浏览器渲染过程如下： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树 阅读全文
posted @ 2020-09-25 16:42 尖子 阅读(170) 评论(0) 推荐(0) 编辑
2020年9月23日
CSS中Position属性static、absolute、fixed、relative
摘要： 在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示 CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。 ◆position:static　无定位 元素框正常生成。块级元素生成一个矩形框，作为文档 阅读全文
posted @ 2020-09-23 15:39 尖子 阅读(733) 评论(0) 推荐(0) 编辑
2020年9月18日
CSS标准文档流
摘要： 1. 标准文档流 文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 2. 标准流的微观现象： 空白折叠现象。 // 比如，如果我们想让img标签之间没有空隙，必须紧密连接. <img src="img/0 阅读全文
posted @ 2020-09-18 15:19 尖子 阅读(325) 评论(0) 推荐(0) 编辑
2020年9月17日
CSS绘制三角形和箭头
摘要： <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title> </head> <style> .d2 { width: 0; height: 0; border-width: 100px; border-style: solid; b 阅读全文
posted @ 2020-09-17 17:57 尖子 阅读(313) 评论(0) 推荐(0) 编辑
关于各种Formatting context
摘要： Formatting context 我们把网页看作是由很多个盒子组成的，而这些盒子的展示方式，就是由display这个属性来决定的。 这里出现了一个概念，叫做Formatting context（格式上下文）： Formatting context 是 W3C CSS2.1 规范中的一个概念。它是 阅读全文
posted @ 2020-09-17 17:20 尖子 阅读(215) 评论(0) 推荐(0) 编辑
什么是BFC？
摘要： BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Fo 阅读全文
posted @ 2020-09-17 16:59 尖子 阅读(436) 评论(0) 推荐(0) 编辑
2020年9月14日
解构赋值
摘要： 数组的解构赋值 基本用法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 以前，为变量赋值，只能直接指定值。 var a = 1; var b = 2; var c = 3; ES6允许写成下面这样。 var [a, b, c] = [1, 阅读全文
posted @ 2020-09-14 11:30 尖子 阅读(1526) 评论(0) 推荐(0) 编辑
2020年9月11日
ES6 声明变量的六种方法
摘要： ES5 只有两种声明变量的方法： var 命令和 function 命令。 ES6 除了添加 let 和 const 命令， 后面章节还会提到， 另外两种声明变量的方法： import 命令和 class 命令。 所以， ES6 一共有6种声明变量的方法。 阅读全文
posted @ 2020-09-11 10:10 尖子 阅读(1014) 评论(0) 推荐(0) 编辑
2020年9月10日
let和const命令
摘要： var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); / 上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输 阅读全文
posted @ 2020-09-10 17:07 尖子 阅读(136) 评论(0) 推荐(0) 编辑