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>
