2018年最新web面试题之C3新特性

常见的面试官问法：你用CSS3实现过哪些动画，如何实现？
你做过的那些CSS3的效果啊？
你知道CSS3里面的盒模型不？
说说你对伸缩布局是怎么了解的？......
你能解释一些CSS3中的文本效果么？（text-shadow:文字阴影，word-warp:自动换行。）

对于这些等等问题，我们只有背和记忆，以及对应我们平时的案例讲解！这.... 

 以下重点掌握标红的部分！！


1、浏览器私有前缀[align=left]谷歌（苹果）：webkit[/align][align=left]火狐：-moz-[/align][align=left]欧朋：-o-[/align][align=left]IE：-ms-[/align]
2、CSS3介绍[align=left]CSS3是CSS2的“进化”版本[/align][align=left]优点：新增了一些特性，使得web开发变得高效便捷。[/align][align=left]缺点：  1、浏览器支持程度差，需要添加私有前缀[/align][align=left]2、移动端支持优于PC端[/align][align=left]3、不断改进中[/align]
3、新增选择器[align=left]属性选择器[/align][align=left]伪类选择器[/align][align=left]伪类目标：target[/align][align=left]伪类空：empty[/align][align=left]伪类：not[/align][align=left]伪元素选择器[/align][align=left]::before[/align][align=left]::after[/align]
4、文字阴影[align=left]text-shadow:2px 1px 3px #ccc;[/align]
5、边框[align=left]边框圆角[/align][align=left]border-radius:2px 3px 6px 4px;[/align][align=left]边框阴影[/align][align=left]border-shadow:1px 2px 3px #ccc;[/align]
6、边框背景图片[align=left]border-image:[/align][align=left]设置的图片将会被“切割”成九宫格形式，然后进行设置[/align][align=left]round和repeat的区别[/align][align=left]round会自动调整尺寸，完整显示边框图片[/align][align=left]repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。[/align][align=left]更改裁切尺寸[/align][align=left]background-slice: 34 36 27 27[/align][align=left]7、盒子模型[/align][align=left]1.box-sizing: border-box  计算方式为content = width – border - padding
2、box-sizing: content-box  计算方式为content = width
[/align]
8、透视[align=left]概念[/align][align=left]通过屏幕2d平面，通过一种视觉呈现，显示3d的效果。必须给父元素设置[/align][align=left]属性[/align][align=left]perspective[/align][align=left]值[/align][align=left]值越小离眼睛越近反之越大[/align][align=left]perspective有两种写法[/align][align=left]作为一个属性，设置给父元素，作用于所有3D转换的子元素[/align][align=left]作为transform属性的一个值，做用于元素自身 并且写在最前面[/align]
9、3D呈现（transform-style属性）[align=left]概念：设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为变形原素。[/align][align=left]浏览器默认：flat：所有子元素在 2D 平面呈现[/align][align=left]perserve-3d：preserve-3d：保留3D空间[/align][align=left]
[/align]10、立方体案例[align=left]六个面旋转[/align][align=left]先旋转，后位移[/align][align=left]位移都是z轴[/align][align=left]定位[/align][align=left]通过定位，使得div脱离标准流，在旋转的同时，坐标轴也发生变化。[/align][align=left]旋转：当六个面旋转完成了，还要对整个立方体盒子旋转。[/align][align=left]加入3d效果：transform-style：preserve-3d；[/align][align=left]
[/align]11、动画
祯动画
补间动画
效果：使得页面中的元素动起来
必要元素：
通过@keyframes指定动画序列；
通过百分比将动画序列分割成多个节点；
在各节点中分别定义各属性
通过animation将动画应用于相应元素；
属性
animation-name设置动画序列名称
animation-duration动画持续时间
animation-delay动画延迟时间
animation-timing-function动画执行速度，linear、ease等
animation-play-state动画播放状态，running、paused等
animation-fill-mode动画执行完毕后状态，forwards、backwards等
参数顺序
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

12、颜色
颜色表示：
rgb(255,255,255)
R:是红色（red  取值：0-255）
G:是绿色（green  取值：0-255）
B:是蓝色（blue  取值：0-255）
hsl(色调，饱和度，亮度)
H:色调 0~360 圆环形式 以角度表示
S:饱和度0%-100%
L:亮度 0~1 之间的小数
透明表示
opacity()取值:(0-1)缺点：会继承
Alpha()取值:(0-1)
RGBA()
background:transparent;表示透明

13、渐变[align=left]线性渐变[/align][align=left]linear-gradient():指向一个方向产生渐变[/align][align=left]注意：1.方向 2.开始颜色2.终止颜色3.距离[/align][align=left]径向渐变[/align][align=left]radial-gradient：指从中心向四周渐变[/align][align=left]注意：1.渐变半径（半径可以不等） 2.渐变圆心（中心位置参照的是盒子的左上角） 3. 开始颜色 4. 终止颜色[/align][align=left]好处：css3中渐变绚丽的效果，减少在网页中图片的使用[/align]
14、过渡[align=left]祯动画[/align][align=left]补间动画[/align][align=left]效果：实现元素不同状态间的平滑过渡[/align][align=left]特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。[/align][align=left]过渡属性[/align][align=left]transition-property：设置过渡属性[/align][align=left]transition-duration：设置过渡持续时间[/align][align=left]transition-timing-function：设置过渡速度[/align][align=left]transition-delay：设置过渡延时[/align]
15、伸缩布局
概念
布局主要是解决页面中的对齐方式
主轴
Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴
与主轴垂直的轴称作侧轴，默认是垂直方向的
方向
默认主轴从左向右，侧轴默认从上到下
必要元素
指定一个盒子为伸缩盒子 display: flex
设置属性来调整此盒的子元素的布局方式 例如 flex-direction
明确主侧轴及方向
可互换主侧轴，也可改变方向
属性
flex-direction调整主轴方向
justify-content调整主轴对齐
align-items调整侧轴对齐
flex-wrap控制是否换行
align-content堆栈（由flex-wrap产生的独立行）对齐
flex-flow是flex-direction、flex-wrap的简写形式
lex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大

16、背景[align=left]属性[/align][align=left]background-size设置背景图片的尺寸[/align][align=left]可以设置长度单位或百分比[/align][align=left]设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。[/align][align=left]设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。[/align][align=left]background-origin设置背景定位的原点[/align][align=left]border-box以边框做为参考原点[/align][align=left]padding-box以内边距做为参考原点；[/align][align=left]content-box以内容区做为参考点；[/align][align=left]background-clip设置背景区域裁切[/align][align=left]border-box裁切边框以内为背景区域[/align][align=left]padding-box裁切内边距以内为背景区域；[/align][align=left]content-box裁切内容区做为背景区域；[/align][align=left]注意：背景图片尺寸在实际开发中应用十分广泛[/align][align=left]
[/align]17、3D 转换[align=left]透视[/align][align=left]perspective:1000px[/align][align=left]3D效果[/align][align=left]transform-style：preserve-3d;[/align][align=left]属性[/align][align=left]移动[/align][align=left]translate（x,y,z）[/align][align=left]旋转[/align][align=left]rotate(Xdeg,Ydeg,Zdeg)[/align][align=left]倾斜[/align][align=left]skew(deg,deg)[/align][align=left]缩放[/align][align=left]scale(0-1)[/align]
18、2D  转换[align=left]属性[/align][align=left]移动[/align][align=left]translate（x,y）[/align][align=left]旋转[/align][align=left]rotate(deg)[/align][align=left]倾斜[/align][align=left]skew(deg,deg)[/align][align=left]缩放[/align][align=left]scale(0-)[/align][align=left]transform：转换[/align]transform-origin:转换原点
需要文章中链接的可以加我QQ 2832281573   领取