用 fabric.js 创建画布时，fabric.js 会在 canvas 元素外包一层 div 容器。
现象描述：有一个tabs选项卡，每个切换项A、B中都有使用echarts，默认展示的A项中的ecarts初始化和绘制都没问题。
浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
用css3的方法，使用transform translate(-50%,-50%)
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
我们在浏览网页时或者翻转页面时，经常会看到很多精美的效果的效果。其中，抽屉式网页效果比较常见，它主要由图片和文字通过添加js来实现。抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。
今天要写的H5朋友圈也是基于笔者开发的cms搭建的，我将仿照微信朋友圈，带大家一起开发一个能发布动态（包括图片上传）的朋友圈应用。有关服务端部分笔者在本文中不会细讲，如果感兴趣的朋友可以参考我的文章:
前言 在技术细节的内容开始之前，您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <
CSS常用实例 web前端开发中，会用到css实现各种网页布局，以下是我列出的几种常见实例，如果本文有错误的地方，也请指正。 PDF格式： http://demos.pxuexiao.com/flask_doc/css_demo01.html Author: lshxiao 一、常见左右布局 最常见的布局就是左右布局，这里只简单说一下，2列左右布局的情况 1、表格
当浏览器的网络线程收到html文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
今天本来想开源自己写的CMS应用的，但是由于五一期间笔者的mac电脑突然崩溃了，所有数据无法恢复，导致部分代码丢失，但庆幸的是cms的打包文件已上传服务器，感兴趣的朋友可以在文末链接中访问查看。
HTML(HyperText Markup Language, 超文本标记语言)，用于构建网页基本结构及其内容的标记语言
Html 标签学习 排版标签 标题 h1、h2、h3、h4、h5、h6只有这六个 段落标签 p标签 段落之间有空隙换行 换行标签 br 空换行 hr 下划线换行 文本格式化标签 根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线 媒体标签 图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示 width、height 很容易理解，控制图片宽高 路径 相对路径 绝对
2018搜狐前端笔试题 盒模型本质上是用以封装HTML元素的概念盒子，它包含了边距，边框，填充以及实际内容。 即由外向里是 margin, border, padding, content
canvas其实没有那么玄乎，它不外乎是一个H5的标签，跟其它HTML标签如出一辙： canvas 元素用于在网页上绘制图形。 那么什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着咱得
自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。本书将通过一系列深入浅出的方式，带你从入门到精通CSS，探索Web开发的奥秘。
当我们对一个页面进行布局时，性能瓶颈通常是 style、layout、paint。
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1. 固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，
“ 转眼间已经参与过好几个小程序的开发了，下面我将开发中的那些注意点和各位小伙伴们分享下，妥妥的干货一枚。 ” WXML 1 不要换行写 微信开发者工具不会对代码进行trim操作，如果代码中换行，页面也直接换行。 2 wx:if vs hidden 一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。 3 图片处理 1.大图片也会造成页面切换的卡顿有一部分小程序会在页面中引用大
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
css的盒模型本质是一个盒子，封装周围的HTML元素，包括：外边距、边框、内边距和实际内容。
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。
本文我们来聊聊组件化思想 好比我们的衣服 我们总不能一下子穿一套(内衣，内裤，袜子，棉裤，外套等等，我们总不能缝在一起穿吧，这样就只有这一套搭配了) 而且你做出来好看的衣服了，可以拿给别人去参考做衣服，衣服还可以染色改变大小啥的 我们之前练习的网页都是一下做好多件衣服缝在一起穿，现在我们来拆开分别制作，想穿什么穿什么，爱怎么搭配怎么搭配
今天发的文章是先行者计划成员-james的亲身经历，里面涉及很多前端开发及js的基础知识，相信对于新人面试会很有帮助。所以在取得原作者同意之后在公众号发出来，希望让更多的人看到。
问题描述 关于性能，确实是一个前端程序员应该特别注意的问题，我这个问题其实算是冰山一角。平时我们在使用动画的时候，可能经常使用 transition 做动画，但是如果动画的动作会使触发重绘和重排的话就要特别注意了。比如一个页面中占位元素的高度在动画过程改变的话，那么页面就会在动画的过程中不断的重排，会造成页面的卡顿，效果很不好。
HTML5学堂：在页面开发中经常会借助JS来书写大量的特效，以获得较好的页面感官效果。但是真正到了使用JS来操作的时候，往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响，我们今天就来尝试下不借助任何JS，转而使用CSS3过渡来书写出更好的动画效果。 本文主要内容 一、Transition是什么 二、Transition的语法 三、Transition的属性值 四、Transition的使用 五、总结 一、Transition是什么 W3C标准中对CSS3的transition是这样
1.通过ID获取元素 document.getElementById(“id”)
这篇文章是我在6年前刚进鹅厂时写的，虽显青涩，但不乏干货，其中的一些前端小技巧，在当时也帮助不少人打开视野，解决实际问题。这次翻出来重新润色，并对已过时的知识进行更新和补充，希望依然能帮到你们，尤其是刚入门的前端工程师。
这次的功能不用我介绍，是的，就是要做那个win7下窗口超级预览的功能。为了方便，我就做个demo来演示，就不用图里的例子来做讲解了。
可以知道，让一个元素水平居中可以使内容是inline或inline-block 非文本场景下，其实padding也可以实现相同效果。这个可以根据内容自适应，不然这样一来外层容器宽度就不固定了。
浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
在我们说box-sizing之前，我们先了解下前端经典的“盒子模型”，聪明的程序猿们巧妙的用盒子模型这一形象将枯燥的css代码表示出来：想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；这些加起来就是一个完整的元素。
居中那点事 最近碰到一些居中的问题需要处理，这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道，让一个元素水平居中可以使内容是inline或inlin
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
HTML5学堂：之前的文章与大家分享了SVG的一系列操作，但是SVG也是存在一些劣势，所以今天开始为大家分享介绍HTML5 Canvas的相关知识，Canvas是什么呢？又如何进行Canvas进行图像
首先渲染的前提是生成渲染树，所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。然后当浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。
前言 这个小练手旨在帮助刚上手学习JavaScript的同学练习最基本的Js知识，大神勿喷哈，由于这个是非常简易的计算器，可以完成的功能有加减乘除和AC（清屏），DEL（退格）等基本运算，所以代码也不复杂，我会先放出代码，然后再讲解我的思路，非常简单，只要你按照我的思路走，15分钟不到我保证你也可以敲出同样的代码，当然主要还是希望可以为入门的同学提供一种解决问题的思路，各位看完后可以自己动手敲一遍哈。 HTML代码部分 HTML这部分非常简单，没什么多说的，整个框架我利用
加粗边框，设置一个宽高为0的中心点，通过对角线划分的切割法，就得到了四个三角形，然后三个透明就可以得到一个三角形 。
做了几年的移动开发，写UI界面时，总是受移动端影响，喜欢拿屏幕的宽度-固定值，在刚开始写CSS样式时，适配各种屏幕大小总是在JS中来动态改变控件的宽高，用了calc()感觉很轻松！
今天帮一人写了个简单的轮播，工作不紧张，就顺便传上来分享给大家吧。源码，带部分注释。。。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
