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

常见的面试官问法:

  • 你用CSS3实现过哪些动画,如何实现?
  • 你做过的那些CSS3的效果啊?
  • 你知道CSS3里面的盒模型不?
  • 说说你对伸缩布局是怎么了解的?......
  • 你能解释一些CSS3中的文本效果么?(text-shadow:文字阴影,word-warp:自动换行。)
对于这些等等问题,我们只有背和记忆,以及对应我们平时的案例讲解!这.... 
 以下重点掌握 标红 的部分!!

1、浏览器私有前缀

谷歌(苹果):webkit
火狐:-moz-
欧朋:-o-
IE:-ms-

2、CSS3介绍
CSS3是CSS2 “进化”版本
优点:新增了一些特性,使得web开发变得高效便捷。
缺点:  1、浏览器支持程度差,需要添加私有前缀
2、移动端支持优于PC
3、不断改进中

3、新增选择器
属性选择器
伪类选择器
伪类目标:target
伪类空:empty
伪类:not
伪元素选择器
::before
::after

4、文字阴影
text-shadow:2px 1px 3px #ccc;

5、边框
边框圆角
border-radius:2px 3px 6px 4px;
边框阴影
border-shadow:1px 2px 3px #ccc;

6、边框背景图片
border-image:
设置的图片将会被“切割”成九宫格形式,然后进行设置
round和repeat 的区别
round会自动调整尺寸,完整显示边框图片
repeat 单纯平铺多余部分,会被“裁切”而不能完整显示。
更改裁切尺寸
background-slice: 34 36 27 27
7、盒子模型
1.box-sizing: border-box  计算方式为content = width – border - padding
2、box-sizing: content-box  计算方式为content = width

8、透视
概念
通过屏幕2d平面,通过一种视觉呈现,显示3d 的效果。必须给父元素设置
属性
perspective
值越小离眼睛越近反之越大
perspective有两种写法
作为一个属性,设置给父元素,作用于所有3D转换的子元素
作为transform属性的一个值,做用于元素自身 并且写在最前面

9、3D呈现(transform-style属性)
概念:设置内嵌的元素在 3D 空间如何呈现,这些子元素必须为变形原素。
浏览器默认:flat:所有子元素在 2D  平面呈现
perserve-3d:preserve-3d :保留3D 空间

10、立方体案例
六个面旋转
先旋转,后位移
位移都是z轴
定位
通过定位,使得div脱离标准流,在旋转的同时,坐标轴也发生变化。
旋转:当六个面旋转完成了,还要对整个立方体盒子旋转。
加入3d效果:transform-style preserve-3d

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、渐变
线性渐变
linear-gradient():指向一个方向产生渐变
注意:1.方向 2. 开始颜色2. 终止颜色3. 距离
径向渐变
radial-gradient:指从中心向四周渐变
注意:1.渐变半径(半径可以不等) 2. 渐变圆心(中心位置参照的是盒子的左上角) 3.  开始颜色 4.  终止颜色
好处:css3中渐变绚丽的效果,减少在网页中图片的使用

14、过渡
祯动画
补间动画
效果:实现元素不同状态间的平滑过渡
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
过渡属性
transition-property:设置过渡属性
transition-duration:设置过渡持续时间
transition-timing-function:设置过渡速度
transition-delay:设置过渡延时

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、背景
属性
background-size设置背景图片的尺寸
可以设置长度单位或百分比
设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
background-origin设置背景定位的原点
border-box以边框做为参考原点
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
background-clip设置背景区域裁切
border-box裁切边框以内为背景区域
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
注意:背景图片尺寸在实际开发中应用十分广泛

17、3D 转换
透视
perspective:1000px
3D效果
transform-style:preserve-3d;
属性
移动
translate(x,y,z
旋转
rotate(Xdeg,Ydeg,Zdeg)
倾斜
skew(deg,deg)
缩放
scale(0-1)

18、2D  转换
属性
移动
translate(x,y
旋转
rotate(deg)
倾斜
skew(deg,deg)
缩放
scale(0-)
transform:转换

transform-origin:转换原点


需要文章中链接的可以加我QQ 2832281573   领取

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值