解析:
css 的 transition 允许 css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠
标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性
值 注意区别 transform,transform 是进行 2D 转换的 如移动,比例化,反过来,旋转,和
拉伸元素。
解析:
moveto 是移动到某个坐标, lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”,那么 MoveTo()把笔要画的起始
位置固定了(x,y)然后要固定终止位置要用到 LineTo函数确定终止位置(xend,yend),这样
一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是
黑色。
<!DOCTYPE HTML5>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画布</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
//三角形
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
//正方形
var cxt2=c.getContext("2d");
cxt2.moveTo(60,10);
cxt2.lineTo(100,10);
cxt2.lineTo(100,50);
cxt2.lineTo(60,50);
cxt2.lineTo(60,10);
cxt2.stroke();
</script>
</body>
</html>
解析:
父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义 伪类:after 和 zoom
父级 div 定义 overflow:hidden
父级 div 定义 overflow:auto
父级 div 也一起浮动
父级 div 定义 display:table
解析:
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始
化往往会出现浏览器之间的页面显示差异。
解释下 CSS sprites,以及你要如何在页面或网站中使用它。
解析:
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS 的
“background-image”,“background- repeat”,“background-position”的组合进行背景定位,
background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请
求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是 6
个。对于未来而言,就不需要这样做了,因为有了`http2`。