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...