Css3常见技术面试题
1 Canvas和SVG图形的区别是什么
1.1 Canvas
通过js绘制2D图形
逐像素进行渲染
位置发生改变会重新进行绘制
1.2 SVG
一种使用XML描述的2D图形的语言
SVG继续XML意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加js事件处理器
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
1.3 区别
Canvas依赖分辨率,SVG不依赖
Canvas不支持事件处理器,SVG支持
Canvas弱的文本渲染能力,SVG适合带有大型渲染区域的应用程序(比如谷歌地图)
Canvas最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG不适合游戏应用
Canvas能够以 .png 或 .jpg 格式保存结果图像
SVG复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
2 Css如何实现水平居中
1、行内元素水平居中:text-align: center;
2、固定宽块状元素水平居中:margin:0 auto;
3、不固定宽块状元素水平居中:
(1)设置display:inline 然后给父元素设置text-align:center
(2)绝对定位让元素向右偏移50%,然后向左偏移自身的50%
(3)弹性布局1
(4)弹性布局2
CSS3的fit-content配合左右margin为auto实现水平居中方法
3 清除浮动的几种方法
1、在浮动元素下方加空div,设置clear:both
2、给浮动元素的父元素设置高度
3、以浮制浮(父元素同时浮动) 缺点:浮动多了容易出问题
4、结尾处加br 设置clear:both
5、给父级添加overflow:hidden
6、给父元素加overflow:auto
7、给父元素定义display:table
8、父级div定义伪类 :after和zoom
使用 zoom:1触发 hasLayout