黑马程序员技术交流社区

标题: 【长沙校区】2017最新web前端经典面试题之C3新特性？ [打印本页]
作者: 长沙-小知姐姐    时间: 2017-4-13 11:47
标题: 【长沙校区】2017最新web前端经典面试题之C3新特性？
C3新特性


常见的面试官问法：


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

     以下重点掌握标红的部分！！{:8_486:}

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、盒子模型

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、动画

12、颜色

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、伸缩布局

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:转换原点
作者: 长沙-小知姐姐    时间: 2017-4-13 16:48
沙发
作者: 彭小豆    时间: 2017-4-14 09:12
作者: @晓哥    时间: 2017-5-17 00:22
内容不错，提前了解下内容
作者: dashen_sq    时间: 2017-6-12 15:01
css3css3css3css3css3css3css3css3
作者: zx111111    时间: 2017-7-19 10:15
111111111111111111111
作者: 1326580471    时间: 2017-7-19 23:24
看一看瞧一瞧
作者: ✎NaN.挂兄♫    时间: 2017-7-25 01:13
撒按时按时
作者: 397445844    时间: 2017-7-25 17:13
看一看瞧一瞧
作者: Axjy    时间: 2017-7-26 21:18
1111111111111
作者: 丶啄木鸟    时间: 2017-7-30 12:13
谢谢楼主
作者: learning2017    时间: 2017-7-31 09:25
     盒子模型
作者: 111cctv19    时间: 2017-8-15 14:37
不错,看看盒子模型
作者: 开发笑成许    时间: 2017-8-16 08:59
111111111111111111111111
作者: 123341234    时间: 2017-8-16 23:42
123432313131
作者: 人生如梦~    时间: 2017-8-24 07:28
沙发是什么鬼
作者: hhh999    时间: 2017-8-30 16:09
谢谢分享
作者: eq361    时间: 2017-8-31 12:26
hello world
作者: 柠檬不酸    时间: 2017-9-7 13:11
加油，希望顺利
作者: xaiochenge    时间: 2017-9-9 17:15
内容。。。。。。。。。。
作者: 大Z    时间: 2017-9-9 21:08
11111111111
作者: 幸运的小猪    时间: 2017-9-9 22:38
谢谢分享
作者: xiaozhuzhu    时间: 2017-9-11 09:40
开心可持续
作者: evading    时间: 2017-9-11 16:34
学习~~~~~~~~~~~~~
作者: 了尘123    时间: 2017-9-12 22:23
很棒很里哦哈
作者: lchlch0000    时间: 2017-9-13 16:35
啊大事发生
作者: 黄胜洪    时间: 2017-9-16 11:13
要看要看要看要看要看
作者: snowyi    时间: 2017-9-17 18:21
1111111111111111111111111111111
作者: Y_G_G    时间: 2017-9-21 22:31
回复回复
作者: 1726664097    时间: 2017-9-22 17:26
盒子模型是理想化的
作者: waqr    时间: 2017-9-23 11:22
撒旦发生
作者: 繁华落尽的凄凉    时间: 2017-9-27 15:00
通过屏幕2d平面，通过一种视觉呈现，显示3d的效果。必须给父元素设置
作者: a1010166    时间: 2017-10-11 23:05
xiexiefenxiang
作者: bbaaoo    时间: 2017-10-12 13:36
回个复
作者: 1161304910    时间: 2017-10-14 14:52
666666666…………
作者: sssvip    时间: 2017-10-16 20:39
撒地方服务还是天然柔和境外人士挺好
作者: 榕树长枫叶    时间: 2017-10-17 09:17
还要学习啊
作者: HEIMI    时间: 2017-10-17 09:28
沙发，不错噢噢噢噢哦哦哦哦哦哦
作者: 爱你的宝    时间: 2017-10-18 09:24
666666666666666666666
作者: shellyao    时间: 2017-10-18 19:25
看看，快找工作了
作者: 半路码农    时间: 2017-10-19 23:44
6666666666
作者: 哈哈哈哈哈1234    时间: 2017-10-20 11:45
非常非常非常棒
作者: suny_smile    时间: 2017-10-20 16:54
我想看，大哭
作者: liuiiu    时间: 2017-10-21 09:49
盒子模型
作者: 独树一帜    时间: 2017-10-21 11:08
谢谢分享
作者: 魏聪    时间: 2017-10-23 15:51
回复是一种美德
作者: zmalqp1101    时间: 2017-10-24 15:50
学习还是学习！！
作者: GUOJM    时间: 2017-10-24 17:13
卡6666666
作者: 尤丽喜    时间: 2017-10-27 09:56
快要面试了
作者: 星芒背刺    时间: 2017-10-29 19:17
6666666666666
作者: 事在人为    时间: 2017-11-1 10:01
谢谢楼主分享
作者: cc886    时间: 2017-11-4 10:30
学习学习
作者: 特别关心    时间: 2017-11-14 09:52
666666666666666666666666666
作者: qq963944275    时间: 2017-11-15 06:45
66666666666666666666666666666666666
作者: kzzier    时间: 2017-11-15 11:46
6666666666666666666
作者: 王大可    时间: 2017-11-15 21:10
棒棒棒
作者: aaxjl123    时间: 2017-11-17 10:20
看看了，谢谢了
作者: zhu2018zhu    时间: 2017-11-17 13:10

hello world
作者: HiDarker    时间: 2017-11-18 15:02
好好好好好好好好好好好
作者: 赛文凹凸曼    时间: 2017-11-20 16:10
666666666666666
作者: xiaofang123    时间: 2017-11-29 21:48
a三大飒飒吓死
作者: zhulei123    时间: 2017-11-30 00:16
发生的粉色发的发的发媳妇
作者: 噬魂勇者    时间: 2017-11-30 14:15
谢谢黑马程序员相关人员的分享
作者: JMmamaLi    时间: 2017-12-11 13:43
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
作者: 努力努力ing    时间: 2017-12-12 14:48
学习学习
作者: 1404932287    时间: 2017-12-12 17:06
学习了,谢谢
作者: via123    时间: 2017-12-13 09:47
楼主很棒棒哦1111111111111
作者: wjmm    时间: 2017-12-16 21:29
111111111111111111111111111111111
作者: jjjt    时间: 2017-12-17 19:57
GFDGFDHGFHGFH
作者: 黄春松    时间: 2017-12-24 14:25
好想看看
作者: 孝宇兄    时间: 2017-12-29 20:40
感谢分享
作者: andylz    时间: 2017-12-31 21:28
好人一生平安
作者: wang121231    时间: 2018-1-4 09:48
6666666666666666666
作者: 六度Zero    时间: 2018-1-9 18:51
11111111111111
作者: 维克多噗噗    时间: 2018-1-10 19:55
width:200px; *width:220pxwidth:200px; *width:220px
作者: CC_SHENG    时间: 2018-1-15 22:20
学习了学习了，谢谢
作者: bbaaoo    时间: 2018-1-16 17:27
```````````````
作者: albenlee    时间: 2018-1-17 14:33
感谢大神的分享
作者: ktqhkhl    时间: 2018-1-23 16:29
C3新特性
作者: 吴吴大哥    时间: 2018-1-24 16:48
很好，限制申万
作者: 随便啦哈哈哈    时间: 2018-1-25 17:32
我要看我要看
作者: fengyun123    时间: 2018-1-25 23:25
想知道盒子模型重点
作者: 米酱    时间: 2018-1-26 21:36
收收收
作者: Kylin2017    时间: 2018-1-29 17:54
时光如水，转眼间，已是2017年已经悄悄地离我们而去
作者: jinglan    时间: 2018-1-31 14:08
学习学习
作者: addddddddddddd    时间: 2018-2-15 00:01
sssssssssssssssssssssssss
作者: NICKhh    时间: 2018-2-28 14:08
1dadasdasdasdadasd
作者: shuihorizon    时间: 2018-3-2 06:43
面试准备了
作者: sarylee    时间: 2018-3-5 11:11
学习学习，谢谢分享！！！！！
作者: lzg_346    时间: 2018-3-10 10:46
看一看瞧一瞧，感谢~
作者: FengHanC    时间: 2018-3-13 17:43
6666666666666
作者: lch86560    时间: 2018-3-13 22:17
感谢支持
作者: 番茄炒鸡蛋    时间: 2018-4-5 10:49
学习一下！！
作者: 全站工程师    时间: 2018-4-8 09:08
盒子模型
作者: aichai3000    时间: 2018-4-17 11:24
66666666666666666
作者: 凌可语    时间: 2018-4-27 19:52
感动啊 谢谢分享 啊啊啊啊·····
作者: 藏在手心    时间: 2018-5-3 13:28
感谢分享
作者: hcyin    时间: 2018-6-14 14:47
66666666666666666666666666666666666666666666666666
作者: 2048    时间: 2018-6-16 13:00
回复回复
作者: 球球球球    时间: 2018-6-17 06:24
6666666666666



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2