H5C3新增知识点总结

1. H5C3和Html，css相比有什么变化
   H5新增元素:
   header、footer、section、aside、nav、article、button、progress(进度条标签)
   H5新增表属性:
   placeholder(input输入框的提示信息)、
   autofocus(input页面加载后自动获取焦点)、
   required(输入框的值不能为空，表单提交时判断)、
   maxlength(最大长度)、
   minlength(最小长度)、
   novalidate(不验证表单)、
   autocomplete(设置是否自动完成)
   H5新增的表单输入框类型:
   email(提交时验证是否有@符号)、
   url(提交时验证是否含有http://或者https://)、
   number (只能输入数字)、
   search(右侧有×号，点击清空内容)、
   range(显示滚动条范围)、
   color(显示拾色器)、time(显示小时和分钟时间)、
   data(显示年月日)、month(显示年月)
   audio(音频):
   Controls:音频控件
   Loop:循环播放
   Muted:静音
   video(视频):
   Controls:视频控件
   Loop:循环播放
   Muted:静音
   Height：高度
   Width：宽度
   CSS3新增选择器:
   属性选择器
   选择所有带有x属性元素 [属性名]
   选择所有带有x属性=y属性的元素 [x=”y”]
   选择所有带有x属性=y-开头属性的元素 [x|=”y”]
   选择所有带有x属性=y属性值开头的元素 [x^=”y”]
   选择所有带有x属性=y属性值结尾的元素 [x$=”y”]
   选择所有带有x属性=包含y属性值子字符的元素 [x*=”y”]
   伪类选择器:
   伪类选择器
   :first-child 获取指定选择器的第一个元素
   :last-child 获取指定选择器的最后一个元素
   :nth-child(n) 获取指定选择器的第n个元素（所有子元素的顺序）
   :nth-last-child 获取指定选择器的第n个元素（从最后一个开始计数）
   :nth-of-type(n) 获取指定选择器的第n个元素（所有指定选择器的顺序）
   :nth-last-of-type(n) 获取指定选择器的第n个元素（从最后一个开始计数）
   伪元素选择器
   ::first-letter 选中文本内容的第一个汉字或者字母
   ::first-line 选中文本内容的第一行
   ::before 在当前元素的内部的前边添加
   ::after 在当前元素的内部的后边添加
   CSS3新增:
   CSS3颜色： 新增RGBA，HSLA模式
   CSS3阴影： box-shadow(盒子阴影)，text-shadow(文本阴影)
   CSS3圆角边框： border-radius
   CSS3盒子模型： box-sizing
   CSS3背景： background-size 设置背景图片的尺寸
   background-origin 设置背景图片的原点
   background-clip 设置背景图片的裁切区域
   CSS3渐变： linear-gradient(线性渐变)、radial-gradient(径向渐变)
   CSS3过渡： transition-property (css属性)
   transition-duration(过渡的周期)
   transition-timing-function(过渡的时间速度曲线)：ease(默认的)、linear(匀速的)
   transition-delay(过渡的延迟)
   CSS3自定义动画： animation-name动画的名称
   animation-duration动画的周期
   animation-timing-function动画的时间速度曲线
   animation-delay动画的延迟
   animation-iteration-count动画的次数（infinite无限）
   animation-paly-state:paused动画的暂停
   动画的开始：@keyframes动画的名称
   开始From{}
   结束to{}
   CSS3-2D转换： transform：translate(x，y)平移
   rotate(x，y)旋转
   skew(x，y)扭曲
   scale(x，y)缩放拉伸
   CSS3-3D转换： transform-style：preserve-3d；

2. 标签元素分类，和特点
   块状元素:
   hn/p/div/ul/ol/dl/li/dd/dt/table/thead/tbody/caption/tr/form/header/footer/section/nav/article/aside
   特点：（1）有默认的宽高，宽是父元素的100%，高是内容撑起来的实际高度（table除外，p标签不能包含块状元素）
   （2）宽高可以设置
   （3）可以包含任意元素
   （4）独占一行
   （5）四个方向的内外边距都是可以设置的
   行内元素:
   Span/a/b/strong/i/em/u/ins/s/del
   特点：（1）有默认的宽高，都是内容所撑起来的
   （2）设置宽高无效
   （3）一般只能包含行内元素和文本内容
   （4）相邻的行内元素在同一行上显示
   （5）水平方向的外边距可以设置，垂直方向设置无效。内边距四个方向都可以设置
   行内块元素：
   Img/audio/video/input/button/labe;/select/option/textarea
   特点：（1）有默认的宽高，由本身特点所决定
   （2）宽高可以设置
   （3）一般不包含其他元素
   （4）相邻的行内块元素在同一行显示
   （5）四个方向的内外边距都是可以设置的

3. 圣杯布局（双飞翼布局）有哪几种实现方式
   （1）calc ：中间盒子宽度设置为width：calc(100%-两边宽度之和),左中右三个盒子都 设置为float：left
   （2）浮动：左右两个盒子分别设置为float：left/float：right，中间盒子设置左右内边 距padding；
   （3）定位position：左右两个盒子设置为position：absolute；top：0；left：0/right:0; 中间盒子设置左右内边距padding；
   （4）弹性布局扩张因子：左右两个盒子设置固定宽度；body设置display：flex；中间 盒子设置flex-grow：1；

4. 弹性盒模型有哪些属性和属性值，什么效果
   display:flex 当前的容器时弹性父容器
   flex-directionsh设置项目排列方向（主轴） Row默认值从左向右
   Row-reverse从右向左
   Column从上到下
   Column-reverse从下向上
   justify-content设置项目在主轴方向上的对齐方式 flex-start（默认值）：左对齐；
   flex-end：右对齐；
   center： 居中；
   space-between：两端对齐，项目之间的间隔都相等；
   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍；
   align-items设置项目在交叉轴方向上对齐方式 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   flex-warp设置超出容器的项目是否换行 nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度;
   wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中;
   wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中;
   align-content设置项目换行的对齐方式 flex-start：与交叉轴的起点对齐。
   flex-end：与交叉轴的终点对齐。
   center：与交叉轴的中点对齐。
   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   stretch（默认值）：轴线占满整个交叉轴。
   Item项目的属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
   align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

5. 常见的盒子模型有哪些，有什么区别
   “box-sizing：content-box；（普通盒模型、默认） 标准盒模型：设置的宽度就等于内容的宽度
   box-sizing：border-box；（怪异盒模型、IE盒模型） 怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度”

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

7. 说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）
   浮动：元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片的效果
   有什么用: 块级元素相邻
   怎么用：float：left左浮动right右浮动
   问题：添加浮动后的子元素撑不开父元素的高度（因为浮动不占位置）
   清除浮动：
   （1）额外标签法：给子元素添加额外的兄弟元素（不规范。不够语义化）
   （2）为父级元素添加overflow：hidden；（局限于浮动类）
   （3）伪元素清除浮动（推荐）
   （4）双伪元素清除浮动、 .clearfix {* zoom：1；}
8. 伪类有哪些，作用和书写顺序
   ：link 未访问时的表现
   ：visited 访问过后的表现
   ：hover 鼠标移入的表现
   ：active 鼠标单机的表现
9. 如何去掉相邻两个图片中间的白边
   (1)转为块级元素在浮动
   (2)为父元素添加font-size：0；
10. 如何实现文字垂直水平居中，盒子垂直水平居中
    文字垂直居中：设置line-height的值和为div盒子的height值
    文字水平居中：text-algin:center;
    盒子垂直居中: 通过弹性布局改变主轴方向以及设置justify-content：center；
    盒子水平居中: margin：auto；
11. 单行文本溢出显示省略号，多行文本溢出显示省略号
    单行：white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    多行：height:auto;
    -webkit-line-clamp:3;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    Overflow:hidden;