前端—每天3道面试题（四）

每天进步一点点，努力就会到终点!

一、CSS3 新特性有哪些?

1.颜色：新增 RGBA，HSLA 模式
2. 文字阴影:（text-shadow）
3.边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画 animate @keyfrom
9. 在 CSS3 中唯一引入的伪元素是 ：：selection
10. 媒体查询，多栏布局 @media screen and (width:800px){ … }
11.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
12. 3D 转换:
13. 字体图标 :font-face
14. 弹性布局 flex

二、CSS3 新增伪类有那些？

：first-child选择器 匹配父元素中的第一个子元素
：last-child选择器 匹配父元素中的最后一个选择器
：nth-child(number|odd|even|倍数) 第几个元素 odd表示奇数、even表示偶数、2n:2的倍数、 4n:4的倍数
:checked 单选框或复选框被选中

在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。

三、H5新增标签有那些？

1、结构标签
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。
2、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器
（6）search：搜索常规的文本域；
（7）color：颜色；
3、媒体标签
（1）video：视频
（2）audio：音频
（3）embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
H5新增属性
（1）manifest：定义页面需要用到的离线应用文件，一般放在标签里
（2）charset：meta属性之一,定义页面的字符集
（3）sizes： 新增属性，当link的rel="icon"时，用以设置图标大小
（4）base: 表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前
（5）defer：script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）
（6）async：script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）
（7）media： 超链接a元素属性：表示对何种设备进行优化
（8）hreflang： 超链接a 的属性，表示超链接指向的网址使用的语言
（9）ref：超链接a的属性,定义超链接是否是外部链接
（10）reversed:ol的属性，定义序号是否倒叙
（11）start：ol的属性，定义序号的起始值
（12）scoped：内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发