HTML/CSS

  •  backstopjs-css自动化回归测试的工具

    backstopjs-css自动化回归测试的工具

    backstopjs什么是backstopBackstopJS就是一个能够实现css自动化回归测试的工具,BackstopJS是一个基于比较网站快照的变化的回归测试工具,非常适合给项目中的样式做回归测试,可以确保我们在重构网站样式的时候样式不发生变化,而且他支持设置多种浏览器尺寸,可以测试响应式布局。比较下resemble.js 和phantomCss,backstop算是比较容易上手使用的,方便配置,phantomCss配合casper进行截图回归测试还是挺不错的,但是两张图diff的话不是很稳定,并且慢,目前p...

    HTML/CSS 2018-10-11 331 0
  • 移动端布局功能css整理

    移动端布局功能css整理

    全局标签格式化/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126    License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, ...

    HTML/CSS 2017-05-18 538 0 移动端开发cssrem
  • css伪元素的小技巧

    css伪元素的小技巧

    伪元素    伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?    伪元素和伪类一样,添加到选择器,但是不是描述状态,他允许我们为元素某些部分设置样式;利用伪元素,我们可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素,是因为他修饰不在文档树中的部分;不是真实存在的。伪元素实用小技巧1.清除浮动何谓清除浮动—?一个父元素的...

    HTML/CSS 2017-01-12 757 0
  • CSS布局总结

    CSS布局总结

    css 布局文档流(normal-flow)了解什么是文档流,就是先了解下流的概念,我们可以比喻成河流从上而下流下来…… 文档流呢,由于这是显示在浏览器上面的,显示在电脑屏幕前的。如果我们将屏幕的两侧想象成河道,将屏幕的上面作为流的源头,将屏幕的底部作为流的结尾的话,那我们就抽象出来了文档流 !像水流,流动的是水,那文档流流动的是什么呢??? <font size=100>就是元素!</font> 文档流是文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行显示,并在...

    HTML/CSS 2016-11-10 270 0
  • CSS兼容性处理方案

    CSS兼容性处理方案

    双倍浮动BUG:描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大; 解决方案:给float的元素添加 display:inline;将其转换为内联元素; 表单元素行高不一致:解决方案:   ①、给表单元素添加vertical-align:middle;   ②、给表单元素添加float:left; IE6(默认16px为最小)不识别较小高度的标签(一般为10px):解决方案:   ①、给标签添加overflow:hidden;   ②、给...

    HTML/CSS 2016-03-25 272 0
  • canvas高级部分--事件,阴影,渐变,图片操作

    canvas高级部分--事件,阴影,渐变,图片操作

    canvas事件canvas画出来的图形都是一堆的像素点,因此事件都是以检测像素点的方式添加。矩形:坐标和四个边检查,判断当前点是否在矩形上圆:距离和半径作比较矩形检测<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     &l...

    HTML/CSS 2016-01-03 798 0 html5canvas
  • canvas中级部分--运动,弧度,文字,变形

    canvas中级部分--运动,弧度,文字,变形

    canvas运动 本质是一堆像素点的运动,需要用到定时器setInterval及gd.clearRect(x,y,w,h); 原理是先擦除,在重新绘画,这不需要考虑性能,因为canvas的性能相当高。定时器这里给的时间是60fps,保证canvas运动基本流畅*帧频高帧   1000/60 =16 ms低帧    30ms此处是关于运动的演示:<!DOCTYPE html> <html lang="en"&...

    HTML/CSS 2016-01-02 2280 0 canvashtml5
  • canvas基础

    canvas基础

    今天整理了一份canvas的学习心得,具体请看下列代码及知识点。canvas是一种html5新增的绘图标签,类似于img,兼容IE9+,chrom,FF等主流浏览器。主要是通过js来进行绘图 canvas定义宽高必须用属性的方式写不能使用css基础画笔:var gd = oC.getContext('2d');//所有和绘图有关的属性,方法都在这里面路径:(特别类似于ps,选取)------->必须描边,填充gd.moveTo(x,y);  //移动到哪里去gd.moveTo(x,y...

    HTML/CSS 2016-01-01 687 0
  • 什么是BFC?BFC的布局规则是什么?如何创建BFC?

    什么是BFC?BFC的布局规则是什么?如何创建BFC?

    Box 是 CSS 布局的对象和基本单位,页面是由若干个Box组成的。元素的类型 和 display 属性,决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。 BFC布局规则 BFC内,盒子依次垂直排列。BFC内,两个盒子的垂直距离由 margin 属性决定。属于- 同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】BFC内,每个盒子的左外边缘接触内部盒子的左边缘(对于从右到左的格式,右边缘接触)。即使...

    HTML/CSS 2015-12-18 260 0
  • 去除网页横向滚动条的方式

    去除网页横向滚动条的方式

    如何去掉网页的横向滚动条,竖向滚动条 有时候特别需要,个别网页要去掉横向滚动条和竖向滚动条,那该怎么去掉呢,很简单,看代码:  让竖条没有: <body style=`overflow:-Scroll;overflow-y:hidden` >   </body>   让横条没有: <body style=`overflow:-Scroll;over...

    HTML/CSS 2015-04-02 792 0 滚动条css