H5C3常见面试题

H5C3

1. H5C3和Html，css相比有什么变化

H5新增：音频视频：audio、video，语义化标签：header、footer、section、nav、aside、article

新增表单属性：

1、placeholder：输入框的提示信息 （用于input）

2、autofocus：当页面加载后自动获取焦点 （用于input，不用加属性值）

3、required：输入框的值不能为空，在表单提交时判断 （用于input，不用加属性值）

4、maxlength:最大长度

5、minlength:最小长度（输入时或者提交表达时提示）

6、novalidate ：不验证表单（用于form，不用加属性值）

7、autocomplete ：设置是否自动完成，用于form，on 自动完成。off：关闭自动完成）

CSS3新增属性：

box-shadow(阴影效果)

border-colors(为边框设置多种颜色)

boder-image(图片边框)

text-shadow(文本阴影)

text-overflow(文本截断)

border-radius(圆角边框)

opacity(不透明度)

box-sizing(控制盒模型的组成模式):指定两个boxes接壤

resize(元素缩放):指定一个div元素，允许用户调整大小

outline(外边框)

background-origin(指定背景图片从哪里开始显示)

background-clip(指定背景图片从什么位置开始裁切)

background(为一个元素指定多个背景)

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

分为块元素，行内元素，行内块元素

块元素特点是独占一行，宽高内外边距可以设置，默认宽度为父元素100%

行内元素特点是一行显示多个，不能设置宽高，默认宽度是本身的宽度，行内只能有文本，行高内外边距部分有效

行内块元素特点是一行显示多个，默认宽度是本身宽度，宽高内外边距可以设置

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

方法1：flex布局，方法2：float浮动，方法3：定位

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

主轴是水平从左到右

      flex-direction: row;

      主轴水平从右到左  

      flex-direction: row-reverse;

      主轴垂直从上到下

      flex-direction: column;

      主轴垂直从下到上

      flex-direction: column-reverse;

      沿着主轴开始位置对齐

      justify-content:flex-start;

      沿着主轴结束位置对齐

      justify-content:flex-end;

      沿着主轴居中对齐

      justify-content:center;

      沿着主轴项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。  

      justify-content: space-between;

      沿着主轴项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半

      justify-content: space-around;

      沿着主轴项目间间距相等， 第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距

      justify-content: space-evenly;

     stretch 默认值，如果项目没有高度，会拉伸至容器高度

      align-items: stretch;

      沿着交叉轴开始位置对齐

     align-items: flex-start;

      沿着交叉轴结束位置对齐  

      align-items: flex-end;

      着交叉轴居中对齐  

      align-items: center;

     nowrap（默认值）不换行  

      flex-wrap: nowrap;

     换行  

      flex-wrap: wrap;

      flex-wrap: wrap-reverse;

      首行在交叉轴起点开始排列，行间不留间距。

      align-content: flex-start;

      尾行在交叉轴终点开始排列，行间不留间距

      align-content: flex-end;

     align-content: center;

      align-content: space-between;

      align-content: space-around;

      align-content: space-evenly;

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

标准盒模型和怪异盒模型

区别：盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，

而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和 height 都

不会生效，而在 quirks 模式下，则会生效。

设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如

果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平

居中，但在 quirks 模式下却会失效。

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

通过使用 transform-origin来设置旋转轴心，用transform: rotate(-10deg)来控制旋转角度

 transform-origin: left top;

 transform: rotate(-10deg);

1. 说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）

浮动：元素脱离标准流，漂浮到指定位置的过程，左浮动：float:left    右浮动：float:right

浮动会造成元素塌陷，需要清除浮动，清除浮动的方法1：overflow:hidden,2额外标签法：clear:both，3：after伪元素，4：before和after清除浮动

1. 伪类有哪些，作用和书写顺序

:first-child    获取指定选择器的第一个元素

:last-child    获取指定选择器的最后一个元素

:nth-child(n) 获取指定选择器的第n个元素

:nth-last-child(n) 获取指定选择器的第n个元素

:nth-of-type(n)  获取指定选择器的第n个元素

1. 如何去掉相邻两个图片中间的白边

将图片设置成块元素，display：block

1. 如何实现文字垂直水平居中，盒子垂直水平居中

文本居中：text-align: center;line-height设置行高居中

盒子居中：margin: auto;

1. 单行文本溢出显示省略号，多行文本溢出显示省略号

p {

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}单行超出显示省略号

多行：display: -webkit-box !important;

        overflow: hidden;

        word-break:break-all ;

        text-overflow: ellipsis;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 2;