摘要：
canvas -像素操作 ImageData ImageData对象中存储着canvas对象真实的像素数据。包括width，height，data（rgba的一维数组，索引值从0到(高度×宽度×4)-1） createImageData(width,height[,imagedata]): 创建一个 阅读全文
摘要：
canvas-点击区域 & 支持性 支持 <canvas>...</canvas>标签里的内容被可以对一些不支持canvas的浏览器提供兼容。 <canvas> <h2>Shapes</h2> <p>A rectangle with a black border. In the background 阅读全文
摘要：
canvas优化 渲染相似的图像 myEntity.offscreenCanvas = document.createElement("canvas");myEntity.offscreenCanvas.width = myEntity.width;myEntity.offscreenCanvas. 阅读全文
摘要：
Object String Array properties proto length length 返回string,array的长度 methods defineGetter defineSetter lookupGetter lookupSetter a assign c create cha 阅读全文
摘要：
使用 CSS transforms CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。 tr 阅读全文
摘要：
兼容性 浏览器支持信息 https://caniuse.com/ 在css中构建回滚 如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略display: grid相关的属性，使用浮动布局。 Item One Item Two Item Three * { box-sizing: border- 阅读全文
摘要：
grid布局 grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? 阅读全文
摘要：
媒体查询 语法 @media media-type and (media-feature-rule) {/* CSS rules */} media-type: 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）； media-feature-rule: 一个媒体表达式， 阅读全文
摘要：
响应式布局 响应式网页设计的概念（responsive web design，RWD）：RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。 媒体查询 通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。 媒体 阅读全文
摘要：
使用transition转换 如果没有过渡延迟或持续时间，如果都为0或都未声明，则不存在过渡，并且不会触发任何过渡事件。 transition-property 应用过渡属性的名称 /* <attr-name>: [a-z|0-9|-|_] ，-后面不能是数字*/ /* 所有可被动画的属性 */ t 阅读全文
摘要：
dataset 允许我们在标准内于HTML元素中存储额外的信息 <article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article> /* 在article前面 阅读全文
摘要：
下载安装node 官网下载 传送门：http://nodejs.cn/download/ (这里我选的是 window-x64.msi) 记住安装路径(这里我安装在 D:\node\ ），最后一步”勾选自动下载必要的包“ 安装完node，查看环境变量path中是否有node环境变量,没有就添加D:\ 阅读全文
摘要：
@rule @charset 指定样式表中使用的字符编码。 /* @charset语法：一个空格，编码集用双引号括起来 */ @charset "utf-8"; @import 用于从其他样式表导入样式规则。 @import <url> | <media-query-list>; /* media- 阅读全文
摘要：
<meta> 属性 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。 如果设置了 charset 属性，meta 元素是一 阅读全文
摘要：
中断规则 break-inside 描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。 break-inside: auto | avoid-page | avoid-column; page-break-inside 调整当前元素内的分页符 page-break 阅读全文
摘要：
多列布局 Multi-column Layout body{ width: 100%; height: 100%; margin: 0; } header{ width: 100%; height: 30vh; background-color: powderblue; } #content{ wi 阅读全文
摘要：
图表导出成图片 toolbox: { feature: { // 图表保存为png saveAsImage: {show: true}, } } ps:也可以用canvas的toDataURL(): // toDataURL：将canvas对象转换为base64位编码 var echartImg = 阅读全文
摘要：
多列布局 Multi-column Layout body{ width: 100%; height: 100%; margin: 0; } header{ width: 100%; height: 30vh; background-color: powderblue; } #content{ wi 阅读全文
摘要：
position 指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。 position: static | relative | absolute | fixed | sticky; static 静态定位，正常流布局。· 此时top，ri 阅读全文
摘要：
函数 calc() calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； calc()函数支持 "+", "-", "", "/" 运算 #div1{ position: relative; width: cal 阅读全文