【前端高频面试题——精简系列1】H5C3Js面试知识点

1.H5C3新增了哪些

h5新增了画布Canvas/3D转化器/音视频/语义化/拖拽释放，c3新增了阴影/边框/过渡transtion/媒体查询meta/渐变-liner-gradient/自定义动画/边框

base 标签
base 可以设置整体链接的打开状态
base 写到 之间把所有的连接
都默认添加 target=“_blank”

<base target="_blank" />

2.标签元素分类，和特点

基本分为：行内标签，块级标签，行内块标签
行内标签(block)：不会独占一行，基本为内容撑起，和文本一行
不能设置宽高，上下内外边距不能设置，左右内外边距可以设置
常见的有：span/a/i/b/strong/lable

块级标签(inline)：会独占一行，不管内容多少，可以设置内外边距，宽高，宽度会自适应父级标签，高度由内容撑起。
常见的有：h1-h6/div/p/ul/ol/dl/table

行内块标签(inline-block)：可以设置内外边距/宽高，和行内标签在一行
常见的有：img/input/

3.圣杯布局（双飞翼布局）有哪几种实现方式

常见的有两种：1.弹性盒子布局2.定位
弹性盒子：利用扩张因子，基于父级设置成弹性盒子，左右两端对齐，实现三个在一行，
再给左右两个定宽后，中间部分设置flex=1的扩张因子。
定位：在基于父级相对定位后，左右两边绝对定位定位两边，中间盒子居中，左右两边边距设置成左右两边的宽度

4.弹性盒模型有哪些属性和属性值，什么效果

1.box-orient属性用于设置或者检索弹性盒模型对象的子元素的排列方式，但是使用弹性盒模型时，
需先把父容器的display属性设置为box或inline-box
2.justify-content=“space-between”决定子级对齐方向，默认左对齐left
3.flex=：“1”扩张因子，默认0
4.flex-direction决定主轴方向及项目其他方向，默认row水平对齐
5.align-items起点对齐方向，默认交叉对齐
6.flex-wrap决定是否换行，默认nowrap不换行

5.常见的盒子模型有哪些，有什么区别

有标准模型，和非标准模型（也叫怪异盒模型）
标准盒模型：1.给标签添加：box-sizing:content-box；(元素默认)
2.这个标签就转换为了标准盒模型
3.标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
非标准模型：
1.给标签添加：box-sizing:border-box；
2.这个标签就转换为了怪异盒模型
3.标签得实际宽度 = 设置的宽度
4.如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

6.写一个网易云播放动画，图片旋转+撞针来回拨动

<style>
.rotate360{
     
     
animation:rotate36020s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframesrotate360{
     
     
from{
     
     
rotate:0deg;