HTML/CSS
-
backstopjs-css自动化回归测试的工具
backstopjs什么是backstopBackstopJS就是一个能够实现css自动化回归测试的工具，BackstopJS是一个基于比较网站快照的变化的回归测试工具，非常适合给项目中的样式做回归测试，可以确保我们在重构网站样式的时候样式不发生变化，而且他支持设置多种浏览器尺寸，可以测试响应式布局。比较下resemble.js 和phantomCss,backstop算是比较容易上手使用的,方便配置,phantomCss配合casper进行截图回归测试还是挺不错的,但是两张图diff的话不是很稳定,并且慢,目前p...
-
移动端布局功能css整理
全局标签格式化/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, ...
-
css伪元素的小技巧
伪元素 伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？ 伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素，是因为他修饰不在文档树中的部分；不是真实存在的。伪元素实用小技巧1.清除浮动何谓清除浮动—？一个父元素的...
-
-
CSS兼容性处理方案
双倍浮动BUG：描述：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大； 解决方案：给float的元素添加 display:inline;将其转换为内联元素； 表单元素行高不一致：解决方案： ①、给表单元素添加vertical-align:middle; ②、给表单元素添加float:left； IE6（默认16px为最小）不识别较小高度的标签（一般为10px）：解决方案： ①、给标签添加overflow:hidden; ②、给...
-
canvas高级部分--事件，阴影，渐变，图片操作
canvas事件canvas画出来的图形都是一堆的像素点，因此事件都是以检测像素点的方式添加。矩形：坐标和四个边检查，判断当前点是否在矩形上圆：距离和半径作比较矩形检测<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
-
canvas中级部分--运动，弧度，文字，变形
canvas运动 本质是一堆像素点的运动，需要用到定时器setInterval及gd.clearRect(x,y,w,h); 原理是先擦除，在重新绘画，这不需要考虑性能，因为canvas的性能相当高。定时器这里给的时间是60fps,保证canvas运动基本流畅*帧频高帧 1000/60 =16 ms低帧 30ms此处是关于运动的演示：<!DOCTYPE html> <html lang="en"&...
-
-
什么是BFC？BFC的布局规则是什么？如何创建BFC？
Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。元素的类型 和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。 BFC布局规则 BFC内，盒子依次垂直排列。BFC内，两个盒子的垂直距离由 margin 属性决定。属于- 同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】BFC内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使...
-
去除网页横向滚动条的方式
如何去掉网页的横向滚动条，竖向滚动条 有时候特别需要，个别网页要去掉横向滚动条和竖向滚动条，那该怎么去掉呢，很简单，看代码： 让竖条没有： <body style=`overflow:-Scroll;overflow-y:hidden` > </body> 让横条没有： <body style=`overflow:-Scroll;over...