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
4 img标签上alt和title的区别
alt是图片不显示时显示的文字
title是鼠标放在图片上提示的文字
5 绝对定位和相对定位的区别
1、参照物不同，绝对定位的参照物是父元素，相对定位的参照物是元素本身
2、绝对定位将元素脱离文档流，因此不占空间。相对定位不破坏正常文档流顺序，依然占用空间
6 实现布局中间自适应宽度，左右两栏固定宽度
6.1 浮动
左右两边浮动，使元素脱离文档流，中间元素正常在文档流中
缺点：顺序问题，中间元素必须放在最后。当浏览器窗口很小时，右边元素会被挤到下一行
6.2 绝对定位
三块都加display：absolute;
然后左右加宽高left：0/right：0就可以了
6.3 flex布局
给父元素设置 display：flex;
左右设置宽高，中间设置 flex：1;
6.4 表格布局
给父元素设置 display：table;
三块都加上display: table-cell;
6.5 网格布局
给父元素设置
display：grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
7 动效
让页面更加生动
为什么要用：简单说就是为了有趣、美观。
7.1 原理
动效是元素的移动、形状大小等随时间的变化
7.2 动效能解决什么问题
1、流畅
用动画效果可以使app、手机产品等操作更平滑，用户体验效果更好
2、高效反馈
让用户有操纵感、知道当前app的浏览状态 是等待加载还是正在下载或其他变化，通过各种动效给用户做出及时的反馈
3、引导作用
通过动效指导用户，使用户快速熟练应用app
4、层级显示
一款APP无论是简单还是复杂，都有自己的逻辑架构和逻辑层级，那当逻辑比较多的时候、层级比较深的时候，我们就需要让用户在APP使用过程当中不迷路，能够让用户知道自己处于哪一个层级，这个页面和下一个页面是什么层级关系。也可以通过动效的方法来展现。
5、增强操作
模拟现实，不需要提示，增强用户代入感
6、创新体验
在可用性良好的情况下，增加一些细节
7、吸引用户注意力
7.3 Css3动效
transition： 对元素设置transition时间（单位s）。
transform：
1、translate(0px,0px) 元素位置左右或者上下移动
2、rotate(30deg)元素在自身的位置上逆时针或者顺时针旋转
3、scale(2) 元素本身缩小放大的效果 （常用）
4、skew以x、y轴为中心旋转
下面是transform的四个栗子：
7.4 动画（animation）
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
7.5 多列
8 伪类的使用
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：
selector:pseudo-class {property:value;}
常用伪类：
:link 未访问
:visited 已访问
:hover 鼠标悬停
:active 鼠标按下
:not(s) 匹配不含s选择器的元素
:frist-child 父元素的第一个元素
:last-child 父元素的最后一个元素
:only-child 父元素的唯一一个元素
:checked 选中 :checked+伪元素
