目录
行内元素 span b strong u ins del …
H5C3和Html，css相比有什么变化
Html 5新增特性
1--语义化标签: 如header、nav、footer、aside、article、section等。
2--音频（audio）、视频（video）
3--表单属性: placeholder、autofocus、required、maxlenght、minlength、novaildate、autocomplete
4--输入框类型: email、url、number、search、range、color、time、date、month
CSS 3新特性
1--选择器: 属性选择器、伪类选择器、伪元素选择器
2--颜色: rgba、hsla表示方式
3--阴影: 盒子阴影（box-shadow）文字阴影（text-shadow）
4--边框: 圆角border-radius
5--怪异盒子模型: box-sizing
6--背景剪切: 背景色剪切: background-clip 背景图剪切: background-origin
7--渐变: 线性渐变: linear-gradient 径向渐变: radial-gradient
8--转换: transfrom 缩放拉伸scale 扭曲skew 平移translate 旋转rotate
9--过渡: transition可以实现动画
10--动画: animate
标签元素分类和特点
行内元素 span b strong u ins del …
不可设置宽高
相邻的行内元素或行内块元素在同一行显示
只可容纳行内元素与内容
水平方向上的内外边距可以设置，垂直方向无效
块状元素 div p h1-h6 header footer …
有默认的宽高,宽是父元素的100%,高是内容撑起来的
宽高和内外边距的四个方向都可以设置
独占一行
可以容纳任何元素(hn,p元素不能容纳块状元素)
行内块元素 img audio input button …
有默认的宽高,宽高均可设置
宽高和内外边距的四个方向都可以设置
相邻的行内元素或行内块元素在同一行显示
不容纳其他元素
圣杯布局（双飞翼布局）有哪几种实现方式
浮动
全部左浮动,两边盒子设置负的外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-浮动</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding: 0 200px;
overflow: hidden;
}
.left,
.middle,
.right {
/* position: relative; */
float: left;
height: 500px;
}
.left {
margin-left: -200px;
width: 200px;
background-color: pink;
}
.middle {
width: 100%;
background-color: #ddd;
}
.right {
margin-right: -200px;
width: 200px;
background-color: skyblue;
}
</style>
<body>
<div>1111111</div>
<div class="container">
<div class="left">
我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧
</div>
<div class="middle">
我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间
</div>
<div class="right">
我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧
</div>
</div>
<div>2222222</div>
</body>
</html>
左右盒子一个左浮动一个右浮动，中间盒子设置绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-浮动</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
/* padding: 0 200px; */
overflow: hidden;
}
.left,
.middle,
.right {
/* position: relative; */
/* float: left; */
height: 500px;
}
.left {
float: left;
/* margin-left: -200px; */
width: 200px;
background-color: pink;
}
.middle {
position: absolute;
margin: 0 200px;
/* width: 100%; */
background-color: #ddd;
}
.right {
float: right;
/* margin-right: -200px; */
width: 200px;
background-color: skyblue;
}
</style>
<body>
<div>1111111</div>
<div class="container">
<div class="left">
我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧
</div>
<div class="middle">
我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间
</div>
<div class="right">
我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧
</div>
</div>
<div>2222222</div>
</body>
</html>
三个盒子均浮动,中间盒子宽度设置calc()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-浮动</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
/* padding: 0 200px; */
overflow: hidden;
}
.left,
.middle,
.right {
/* position: relative; */
float: left;
height: 500px;
}
.left {
/* float: left; */
/* margin-left: -200px; */
width: 200px;
background-color: pink;
}
.middle {
/* position: absolute; */
/* margin-left: 200px; */
width: calc(100% - 400px);
background-color: #ddd;
}
.right {
/* float: right; */
/* margin-right: -200px; */
width: 200px;
background-color: skyblue;
}
</style>
<body>
<div>1111111</div>
<div class="container">
<div class="left">
我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧
</div>
<div class="middle">
我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间
</div>
<div class="right">
我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧
</div>
</div>
<div>2222222</div>
</body>
</html>
定位
左右盒子绝对定位absolute，中间盒子加对应的的左右内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-浮动</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
/* padding: 0 200px; */
overflow: hidden;
}
.left,
.middle,
.right {
/* position: relative; */
float: left;
height: 500px;
}
.left {
position: absolute;
left: 0;
/* float: left; */
/* margin-left: -200px; */
width: 200px;
background-color: pink;
}
.middle {
padding: 0 200px;
/* position: absolute; */
/* margin-left: 200px; */
/* width: calc(100% - 400px); */
background-color: #ddd;
}
.right {
right: 0;
position: absolute;
/* float: right; */
/* margin-right: -200px; */
width: 200px;
background-color: skyblue;
}
</style>
<body>
<div>1111111</div>
<div class="container">
<div class="left">
我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧
</div>
<div class="middle">
我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间
</div>
<div class="right">
我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧
</div>
</div>
<div>2222222</div>
</body>
</html>
弹性盒模型
左右盒子宽度固定，中间盒子加上弹性因子flex:1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>02-弹性盒模型实现圣杯布局</title>
</head>
<style>
.container {
display: flex;
}
.left {
width: 200px;
background-color: pink;
}
.middle {
flex: 1;
background-color: #ddd;
}
.right {
width: 200px;
background-color: skyblue;
}
</style>
<body>
<div>1111111</div>
<div class="container">
<div class="left">
我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧
</div>
<div class="middle">
我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间我是中间
</div>
<div class="right">
我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧
</div>
</div>
<div>2222222</div>
</body>
</html>
弹性盒模型有哪些属性和属性值，什么效果
容器：container，弹性布局的父元素，相关属性有：
1. display: flex 表明当前的容器时弹性父容器
2. flex-direction 设置项目排列方向 主轴默认为水平方向；交叉轴垂直于主轴
1. row（默认值）主轴是从左到右的
2. row-reverse 主轴是从右到左的
3. column 主轴是从上到下的
4. column-reverse 主轴是从下到上的
3. justify-content 设置项目在主轴方向上的对齐方式
1. flex-start（默认值） 沿着主轴开始位置对齐
2. flex-end 沿着主轴结束位置对齐
3. center 沿着主轴居中对齐
4. space-between 沿着主轴间距相等，第一个项目主轴起点和最后一个项目离主轴终点的距离都为0
5. space-around 沿着主轴间距相等，第一个项目主轴起点和最后一个项目离主轴终点的距离都是项目间间距的1/2
6. space-evenly 沿着主轴间距相等，第一个项目主轴起点与最后一个项目离主轴终点的距离和项目间距离相等
4. align-items 设置项目在交叉轴方向上的对齐方式
1. stretch（默认值）如果项目没有高度 将会拉申到容器高度
2. flex-start
3. flex-end
4. center
5. baseline 项目位于容器的基线上
5. flex-wrap 设置查出容器的项目是否换行
1. nowrap（默认值）不换行
2. wrap 换行
3. wrap-reverse 反转换行
6. align-content
1. stretch
2. flex-start
3. flex-end
4. center
5. space-between
6. space-around
7. space-evenly
项目：item，弹性布局的子元素，相关属性有：
1. order 设置项目主轴上的排列顺序，数值越小，排列越靠前。属性值为整数，默认值为0。
2. align-slef 设置项目在行中交叉轴方向上的对齐方式。
1. stretch
2. flex-start
3. flex-end
4. center
5. space-between
6. space-around
7. space-evenly
其中项目属性中的flex是flex-grow, flex-shrink 和 flex-basis的简写
flex-grow(扩张因子)取值有0，1（定义项目放大比例）： 0表示项目宽度小于容器宽度时不放大，1表示项目宽度小于容器宽度时放大，默认为0
flex-shrink(收缩因子)取值有0，1（定义项目缩小比例）： 0表示项目宽度大于容器时突破容器宽度，1表示项目宽度大于容器时不突破容器宽度，默认为1
flex-basis(指定了 flex 元素在主轴方向上的初始大小)取值方式可以是百分比，也可以是px，如50%，100px
其中flex-grow与flex-shrink的取值只有0，1。如果是其它值我在测试的过程中似乎没用，并没有显示相应的倍数，测试的环境是chome浏览器
常见的盒子模型有哪些，有什么区别
标准盒模型
设置的宽度就等于内容的宽度
会因内外边距和边框的设置而改变大小
box-sizing: content-box;
怪异盒模型（怪异盒模型、IE盒模型）
内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
不会因设置内外边距和边框而改变盒子的大小
box-sizing: border-box;
写一个网易云播放动画，图片旋转+撞针来回拨动
图片旋转
<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>
说一下对浮动的理解
浮动
元素脱离标准流，漂浮到指定位置的过程，设置浮动的初衷是实现文字环绕图片的效果
作用
使块级元素相邻
使用
float：left左浮动 right右浮动
问题
浮动后的子元素撑不开父元素的高度
清除浮动
(1) 额外标签法:
给子元素添加额外的兄弟元素，给兄弟元素添加 clear: both 属性
(2) 为父级元素添加 overflow: hidden;
原理：overflow: hidden; 形成了BFC块(块级格式上下文)，从而清除浮动带来的影响
(3) 伪元素清除浮动
.clearfix::after{
content:"",
clear:both,
height:0,
display:block,
}(4) 双伪元素清除浮动
.clearfix::after,
.clearfix::before{
content:"",
display:block,
clear:both
}伪类有哪些，作用和书写顺序
伪类
:link,:visited,:hover,:active
(单冒号---伪类 双冒号---伪元素)
作用
:link 未被访问
:visited: 已被访问过
:hover 鼠标悬停
:active 被鼠标点击时
书写顺序
link visited hover active
如何去掉相邻两个图片中间的白边
原因
多个图片展示的时候, 将换行符解析成了空格, 所以出现了白边
解决方法
父元素字体大小font-size属性为0
img添加display:block;转化为块级元素
给图片img设置浮动
如何实现文字垂直水平居中，盒子垂直水平居中
文字水平居中
text-align:center;
文本的垂直居中
设置line-height:父盒子的高度
盒子垂直水平居中
1--绝对定位居中（最常用、好用）
就是利用绝对定位，使它的top、left、right、bottom都为0并且margin:auto就可以实现居中
.box {
/* 盒子长为200，宽为100 背景为海蓝色*/
height: 100px;
width: 200px;
background-color: aquamarine;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
html,
body {
position: relative;
height: 100%;
margin: 0;
}2--负margin居中（传统方法）
利用负的margin来进行居中，需要知道固定宽高，限制比较大。
3--margin固定宽高居中
这种定位方法，得需要知道宽高，不灵活。
4--flex居中
display: flex;
justify-content: center;
align-items: center;5--transform + 定位
IE9 以下不支持
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);6--table-cell居中
将父元素转换成表格单元格显示，然后使用垂直居中实现
display: table-cell;
vertical-align: middle;7--不确定宽高居中（绝对定位百分数）
这种较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。
单行文本溢出显示省略号，多行文本溢出显示省略号
1. 单行文本溢出显示省略号
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;2. 多行文本溢出显示省略号
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;