H5C3部分面试题汇总

1. HTML和HTML5、CSS和CSS3相比，有什么变化？

HTML5中新增的内容有：

自定义属性:data-id
语义化更好的内容标签: header、nav、footer、aside、article、section
音频、视频标签：audio、video （浏览器不支持自动播放，谷歌浏览器不支持音频自动播放,但是视频支持自动播放)
数据存储 localStorage、sessionStorage
拖拽释放(Drag and drop) API
画布(Canvas) API
地理(Geolocation) API
新的 input 类型：calendar、time、month 、week 、date 、email、url、search 、number 、range 、 color
新的表单属性：fieldset、legent、placeholder、autofocus、required、maxlength、minlength、novalidate、autocomplete

CSS3中新增的内容有：

颜色：新增RGBA，HSLA模式
文字阴影（text-shadow）、rem 字体大小单位（相对于根元素 font-size 属性值，根元素字体大小设置为 62.5% 则 1rem 等于 10px）
边框：圆角（border-radius）边框阴影： box-shadow
怪异盒模型：box-sizing
背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
渐变：linear-gradient、radial-gradient
过渡：transition，可实现动画
自定义动画: animation
在CSS3中唯一引入的伪元素：selection.
媒体查询 : @media only screen and (max-width:800px) ===>除了screen还有print打印机、speech屏幕阅读器、all 所有媒体类型设备
border-image
2D转换：transform : translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
3D转换：transform-style : preserve-3d;
新增选择器：属性选择器、伪类选择器、伪元素选择器。
网格系统，把网页均分成12列进行布局

基于此文有所改动：H5C3新特性

2. 标签元素的分类和特点 (元素显示模式)

标签元素可以分成三大类：块状元素、行内元素、行内块元素，
对应的元素显示模式为：display:block; display:inline; display:inline-block;

块状元素：hn、p、div、ul、ol、dl、li、dd、dt、table、thead、tbody、caption、tr、form、header、footer、section、nav、article、aside
特点：

独占一行，宽、高和四个方向的内、外边距都可以设置；
默认宽度是父元素的100%，默认高度是其内容撑起来的实际高度，table标签除外；
可以包含任意元素（表格系除外、h标签不能包含h标签、p标签不能包含块状元素）；

行内元素：span、a、b、strong、i、em、u、ins、s、del
特点：

不独占一行，设置宽高无效；
默认的宽、高都是内容撑起来的；
水平方向的外边距可以设置，垂直方向设置无效；
四个方向的内边距皆可设置；
一般只能包含行内元素与文本内容

行内块元素：img、audio、video、input、button、label、select、option、textarea
特点：

不独占一行，宽高可以设置；
默认宽高由其本身特点决定；
四个方向的内外边距都可以设置；
一般不包含其他元素；

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

calc()函数 2. 左浮动、右浮动 3.绝对定位加内边距 4.弹性布局
详细写法在这里：CSS实现圣杯布局

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

属性名	属性值	效果
flex-direction	row、row-reverse、column、column-reverse	设置内部项目的排列方向
flex-wrap	nowrap、wrap、wrap-reverse	设置换行方式，wrap-reverse为第一行在最下面
flex-flow	flex-flow属性是flex-direction以及flex-wrap属性的简写形式，默认值为row nowrap	上面两种属性的简写
justify-content	flex-start、flex-end、center、space-between、space-around、space-evenly	项目在主轴（X轴）上的对齐方式
align-items	flex-start、flex-end、center、baseline、stretch（默认值）	项目在交叉轴（Y轴）上的对齐方式
align-content	flex-start、flex-end、center、space-between、space-around、stretch（默认值）	有多根轴线时的对齐方式。如果项目只有一根轴线，那么该属性不起作用
order	1、2、3…	项目的排列顺序，数字越小越靠前
flex-grow	flex-grow:1; …	项目放大的比例
flex-shrink	flex-shrink: 3; …	项目缩小的比例
flex-basis	flex-basis: 100px;	规定弹性项目的初始长度。
flex	flex: flex-grow flex-shrink flex-basis;	flex-grow，flex-shrink 和 flex-basis 的简写
align-self	start、end、stretch、center	设置个别项目在交叉轴（Y轴）上的对齐方式

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

W3C盒模型（标准盒模型）

给一个标签添加：box-sizing:content-box；(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度

怪异盒模型(又称ie盒模型)

给一个标签添加：box-sizing:border-box；
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

区别：

主要区别：对于宽高的定义不同
w3c盒模型：设置的宽度就等于内容的宽度
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

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

图片旋转动画：

<style>.rotate360 {animation: rotate360 20s;animation-timing-function: linear;animation-iteration-count: infinite;animation-fill-mode: forwards;animation-play-state: paused;}@keyframes rotate360 {from {rotate: 0deg;}to {rotate: 360deg;}}
</style>

撞针来回动画：

 <style>.needleGo {animation: needleGo 0.7s;animation-fill-mode: forwards;animation-timing-function: linear;animation-iteration-count: 1;}.needleBack {animation: needleBack 0.7s;animation-fill-mode: forwards;animation-timing-function: linear;animation-iteration-count: 1;}@keyframes needleGo {from {transform: rotate(0deg);}to {transform: rotate(-16deg);}}@keyframes needleBack {from {transform: rotate(-16deg);}to {transform: rotate(0deg);}}
</style>

7. 谈一谈你对浮动的理解

浮动可以使元素脱离标准流，漂浮到指定位置；（标准流：元素按照本身特性进行排列布局）
设置浮动的初衷是实现文字环绕图片的效果。

浮动的特点：

添加浮动后的元素与其他元素不在同一平面，会漂浮在其他元素之上；
添加浮动后的元素不占位置；
添加浮动后的多个元素会在同一行上显示；
添加浮动后的元素不会超出父元素的内容区域，即不会覆盖父元素的边框与内边距
添加浮动后的元素会有行内块元素的部分特性（比如默认内外边距、不再独占一行）

浮动带来的影响：添加浮动后的子元素撑不开父元素的高度；

怎么清除浮动带来的影响：

额外标签法：给子元素添加一个兄弟元素，为兄弟元素设置 clear:both; 或 clear:left; 、clear:right;（clear:both 的本质就是闭合浮动，让父盒子闭合出口和入口，不让子盒子出来）
这种方式增加了无意义的标签，使结构不规范、不够语义化；
给父元素添加 overflow:hidden; 通过触发BFC方式，实现清除浮动。
代码简洁，但内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示溢出的元素。
伪元素清除浮动：在父元素的末尾或者开头添加伪元素 ::after、::before ，在伪元素中设置以下属性：

<style>
#parent::after{content: "";display: block;clear:both;
}
</style>

但 IE6-IE7 不支持伪元素；

双伪元素清除浮动，和单伪元素一样：

<style>
#parent::after,
#parent::before{content: "";display: block;clear:both;
}
</style>

8.伪类有哪些，它们的作用和书写顺序是什么

转载自：简书

link 表示的是正常情况下链接的样式。
visited 代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式。
hover 在鼠标移到链接上时添加的特殊样式。
focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点。
active 在一个元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式。
hover 理论上任何元素都可以使用的， focus 多是针对表单的，如input等。而 active 多用于链接。

书写顺序：

各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。

通常都按照 link - visited - focus - hover - active 的顺序；

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

① 转换为块元素再浮动 ②为父元素添加 font-size:0;

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

万能flex布局：

<style>.allCenter {display:flex;justify-content:center;align-items:center;}
</style>

文字居中的另一种方式：

<style>.allCenter {text-align:center;line-height:盒子高度;}
</style>

盒子居中的另一种方式：

<style>.allCenter {margin:auto;display:flex;align-items:center;}
</style>

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

<style>.one_hidden {overflow: hidden;white-space:nowrap;text-overflow:ellipsis;}.N_hidden {overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; //最大限制为2行}
</style>