CSS基础知识
1.简介
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
CSS文件后缀名为.css
CSS用于HTML文档中元素样式的定义，让网页具有美观一致的页面。
2.语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器：需要改变样式的HTML元素
每条声明由一个属性和一个值组成。属性是设置样式属性，每个属性有一个值，属性和值被冒号分开，每个属性用分号隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3{
color: aqua;
font-size: 30px;
}
</style>
</head>
<body>
<h3>标题</h3>
</body>
</html>3.CSS的引入方式
（1）内联（行内）样式：在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。缺点：缺乏整体性和规划性，不利于维护，维护成本高。
<p style="color: aqua; font-size: 30px;">行内样式</p>
（2）内部样式 ：单个文档需要特殊样式时，使用内部样式表，使用<style>标签在文档头部定义内部样式表。单个页面内的CSS代码具有统一性和规划性，便于维护，但是多个页面之间容易混乱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3{
color: aqua;
font-size: 30px;
}
</style>
</head>
<body>
<h3>内部样式</h3>
<h3>yangshi</h3>
</body>
</html>（3）外部样式：当样式要用于很多页面时，外部样式表将是最优选。使用外部样式表，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接样式表，<link>标签在文档的头部（ <head>标签内）。
<link rel="stylesheet" href="样式表名.css" />
4.选择器
（1）全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化
*{
margin: 0;
padding: 0;
}
（2）元素选择器
元素选择器：HTML文档中的元素，p、b、div、a、img、body等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常教书“共性”。
所有的标签，都可以是选择器，比如ul、li、label、dt、dl、input、div等。
无论这个标签藏得多深，一定能够被渲染上。
选择的所有，而不是一个。
（3）类选择器
规定用圆点.来定义，针对你想要的所有标签使用。 优点：灵活
class属性特点：
类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器，用空格隔开
（4）ID选择器
针对一个特定的标签来使用，只能用一次。CSS中的ID选择器以#来定义。
ID是唯一的
ID不能以数字开头
（5）合并选择器
作用：提取共同的样式，减少重复代码。
选择器的优先级：
CSS中权重用数字衡量
元素选择器的权重为：1
class选择器的权重为：10
id选择器的权重为：100
行内样式的权重为：1000
优先级从高到低：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择武器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 全局选择器 */
* {
margin: 0;
padding: 0;
}
/* 标签选择器 */
p{
color: aqua;
}
/* 类选择器 */
.content{
color: aquamarine;
}
/* ID选择器 */
#myfor{
color: darkorchid;
font-size: 20px;
}
#mypro{
color: deeppink;
font-size: 20px;
}
/* 合并选择器 */
.mytext,.my{
color: coral;
font-size: 25px;
}
.contentail{
color: cyan !important;
}
</style>
</head>
<body>
<p>我很好</p>
<p>我非常好</p>
<hr />
<p class="content">我emo!</p>
<p class="content">我很伤心</p>
<hr />
<p id="myfor">我很好</p>
<p id="mypro">我非常好</p>
<hr />
<h3 class="mytext">我是三级标签</h3>
<i class="my">我是i标签</i>
<hr />
<p class="contentail" style="color: chartreuse;">hello</p>
</body>
</html>5.字体属性
CSS字体属性定义字体，颜色，大小，加粗，文本样式
（1）color
规定文本的颜色。
<div>字体属性</div>
div{ color: aqua; }
div{ color: #f259fc; }
div{ color: rgb(225, 0, 0); } //数字0~225
div{ color: rgba(225, 0, 0, 0.5); }// 前三个数字0~225，最后一位数字0~1，代表透明度，0全透明，1不透明
（2）font-size
设置文本的大小。
<p>字体属性</p>
p{ font-size: 30px; }
chrome浏览器接受最小字体是12px
注：不能通过调整字体大小使段落看上去像标题，也不能使标题看上去像段落。
（3）font-weight
值 | 描述 |
bold | 定义粗体字符 |
bolder | 定义更粗的字符 |
lighter | 定义更细的字体 |
100~900 | 定义由细到粗 400等同于默认，而700等同于bold |
（4）font-style
值 | 描述 |
normal | 默认值 |
italic | 定义斜体字 |
（5） font-family
指定一个元素的字体
font-family: "Microsoft YaHei","Simsun","SimHer"; //Microsoft YaHei 微软雅黑默认字体
每个值用逗号分开
如果字体名称包含空格，它必须加上引号
6.背景属性
CSS背景属性主要有以下几个
值 | 描述 |
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background-size | 设置背景图片大小属性 |
（1）background-color
<div class="box"></div>
.box{
width: 400px;
height: 400px;
background-color: #ffff00;
}
（2）background-image
<div class="box2"></div>
.box2{
width: 400px;
height: 400px;
background-image: url(""); //双引号内图片路径
}
（3）background-repeat
值 | 说明 |
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
（4）background-size
值 | 说明 |
length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
percentage | 设置相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
contain | 保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 |
7.文本属性
（1）text-align
指定元素文本的水平对齐方式
值 | 描述 |
left | 文本居左排列，默认值 |
right | 把文本排列到右边 |
center | 把文本排列到中间 |
<p>我是一段文字</p>
p{ text-align: center; }
（2）text-decoration
规定添加文本的修饰，下划线、上划线、删除线等
值 | 描述 |
underline | 定义下划线 |
overline | 定义上划线 |
line through | 定义删除线 |
<p>我是一段文字</p>
p{ text-decoration: underline; }
（3）text-transform
控制文本的大小写
值 | 描述 |
capitalize | 定义每个单词开头大写 |
uppercase | 定义全部大写字母 |
lowercase | 定义全部小写字母 |
<p>我是一段文字</p>
p{ text-transform: underline; }
（4）text-indent
规定文本块中首行文本的缩进
p{ text-indent: 30px; }
注：负值是允许的。如果值是负数，将第一行左缩进。
8.表格属性
（1）表格边框：指定CSS表格边框，使用border属性。
table,td{ border: 1px solid #ffff00; } //大小，线，线的颜色
（2）折叠边框：border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
table,td{ border: 1px solid #ffff00;}
table{ border-collapse: collapse; }
（3）表格宽度和高度：width和height属性定义表格的宽度和高度
（4）表格文字对齐：表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式，向左，右，或中心
td{ text-align: center/left/right; } //默认向左
垂直对齐属性设置垂直对齐
td{vertical-align: center/top/bottom;} //居中/上/底部 默认居中
（5）表格填充：如果在表的内容中控制表格之间的边框，应使用td和th元素的填充属性
td{ padding: 40px; }
（6）表格颜色：指定边框的颜色，和th元素的文本和背景颜色
td{ background-color: aqua; }
9.关系选择器
关系选择器分为后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器。
（1）后代选择器：选择所有被父元素包含的子元素，中间用空格隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul li{
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<p>这是一个段落</p>
<ol>
<li>列表四</li>
<li>列表五</li>
</ol>
</div>
</ul>
</body>
</html>（2）子代选择器：选择所有作为父元素的直接子元素，对更深一层的元素不起作用，用>表示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div>p{
color: deeppink;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
<ul>
<li>单元格</li>
</ul>
</div>
</body>
</html>（3）相邻兄弟选择器：选择紧跟A元素的B元素，用+表示，选择相邻的第一个兄弟元素，只能向下选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3+p{
color: aquamarine;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是一个段落</p>
<p>我是一段话呢！</p>
</body>
</html>（4）通用兄弟选择器：选择A元素之后的所有兄弟元素，作用于多个元素，用~隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3~p{
color: aquamarine;
}
</style>
</head>
<body>
<p>asdddd</p>
<h3>我是标题</h3>
<p>我是一个段落</p>
<p>我是一段话</p>
<em>水蜜桃</em>
</body>
</html>10.CSS盒子模型（Box Model）
概念：所有HTML元素可以看作盒子，在CSS中，"Box Model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），实际内容（content）
外边距（margin） | 清除边框外的区域，外边距是透明的 |
边框（border） | 围绕在内边距和内容外的边框 |
内边距（padding） | 清除内容周围的区域，内边距是透明的 |
内容（content） | 盒子的内容，显示文本和图像 |
padding: 20px; 一个值：上下左右；
padding: 20px 20px; 两个值：第一个值上下，第二个值左右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: #9bfff9;
border: 2px solid #ff55ee;
/* padding: 50px; */
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 50px;
/* margin: 50px; */
margin-left: 50px;
margin-right: 50px;
margin-top: 30px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>11.弹性盒子模型
定义：
弹性盒子是CSS3的一种新的布局模式。
CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
目的：提供一种更有效的方式来对一个容器的子元素进行排列、对齐和分配空白空间。
内容：
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成
弹性容器通过设置display属性的值为flex将其定义为弹性容器
注：默认弹性盒里内容横向摆放
弹性容器内包含一个或多个弹性子元素
弹性容器外以及弹性子元素内时正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
}
.box1{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.box2{
width: 100px;
height: 100px;
background-color: #ff0000;
}
.box3{
width: 100px;
height: 100px;
background-color: #ff46f6;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>父元素上的属性
display属性
display:flex 开启弹性盒子
display:flex 属性设置后子元素默认水平排列
（1）flex-direction
指定了弹性子元素在父容器中的位置
值 | 描述 |
row | 横向从左到右排列（左对齐），默认的排列方式 |
row-reverse | 反转横向排列（右对齐，从后往前排，最后一项排在最前面） |
column | 纵向排列 |
column-reverse | 反转纵向排列，从后往前排，最后一项排在最上面 |
（2）justify-content
内容对齐。（垂直方向上 居上/居下/居中）
应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
值 | 描述 |
flex-start | 弹性项目向行头紧挨着填充。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放 |
flex-end | 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 |
conter | 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出） |
（3）align-items
内容对齐。（水平方向上 居左/居右/居中）
设置或检索弹性子元素在侧轴（纵轴）方向上的对齐方式
值 | 描述 |
flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 |
flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 |
conter | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box1{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.box2{
width: 100px;
height: 100px;
background-color: #ff0000;
}
.box3{
width: 100px;
height: 100px;
background-color: #ff46f6;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>子元素上的属性
flex
flex根据弹性盒子元素所设置的扩展因子作为比率分配剩余空间
默认为0（如果存在剩余空间，也不放大）
如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box1{
width: 100px;
height: 100px;
background-color: #ff9d9f;
flex: 2;
}
.box2{
width: 100px;
height: 100px;
background-color: #ff0000;
flex: 1;
}
.box3{
width: 100px;
height: 100px;
background-color: #ff46f6;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>12.浮动
增加一个浮层来放置内容
定义：float属性定义元素在哪个方向浮动，任何元素都可以浮动
值 | 描述 |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动原理
浮动以后使元素脱离了文档流（脱离文档流后，元素相当于在页面上面增加一个浮层来放置内容。即有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折射现象。）
浮动只有左右浮动，没有上下浮动
元素向左（右）浮动
未脱离文档流 脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #ff69f0;
float: left; //向左浮动
/* float: right; //向右浮动 */
}
.container{
width: 200px;
height: 200px;
background-color: #ffc1cb;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
</html>所有元素向左浮动
当所有元素同时浮动的时候，会变成水平摆放，向左或者向右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
float: left;
}
.box1{
background-color: #ff0000;
}
.box2{
background-color: #fff000;
}
.box3{
background-color: #a5ffff;
}
ul li{
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<ul>
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
</ul>
</body>
</html>注：当容器不足以横向摆放内容时，会在下一行摆放
清除浮动
浮动副作用
浮动元素会造成父元素高度塌陷
后续元素会受到影响
浮动的副作用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
background-color: aqua;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
margin: 5px;
float: left;
}
.text{
width: 50px;
height: 50px;
background-color: #ffff00;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="text"></div>
</body>
</html>清除浮动
1.父元素设置高度
2.受影响的元素增加clear属性
3.overflow清除浮动
4.伪对象方式
父元素设置高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
height: 400px;
background-color: aqua;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
margin: 5px;
float: left;
}
.text{
width: 50px;
height: 50px;
background-color: #ffff00;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="text"></div>
</body>
</html>父级元素增加高度，撑开元素本身大小，可以解决父级元素塌陷问题
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div> 如果这样编写代码，会出现叠加现象
受影响的元素增加clear属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
height: 400px;
background-color: aqua;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
margin: 10px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: #ffff00;
clear: both; //清除浮动
/* clear: left; //清除左浮动 */
/* clear: right; //清除右浮动 */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div>
<div class="text"></div>
</body>
</html>overflow清除浮动
如果父级塌陷，且同级元素也受到影响，可以使用overflow清除浮动
父布局不能设置高度，父级标签的样式里加：overflow: hidden; clear: both;
受到影响的子元素也要加clear: both;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 400px;
background-color: aqua;
overflow: hidden;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
margin: 10px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: #ffff00;
margin: 5px;
clear: both; //清除浮动
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div>
<div class="text"></div>
</body>
</html>伪对象方式
如果父级塌陷，且同级元素也受到影响，可以使用伪对象方式处理
为父级标签添加伪类，设置空的内容，并且使用clear: both;
父级不能设置高度 受到影响的子元素也要加clear: both;
.container{
width: 400px;
background-color: aqua;
}
.container::after{
content: ;
display: block;
clear: both;
}::after{} 伪对象格式
13.定位
position属性，指定元素的定位类型
值 | 描述 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
其中，绝对定位和固定定位定会脱离文档流
设置定位后，可以使用四个方向值进行调整位置：left、top、right、bottom
（1）相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: blueviolet;
position: relative;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>（2）绝对定位
每定位一次，就会出现一层，随页面滚动而滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
left: 100px;
top: 100px;
}
.box2{
width: 300px;
height: 300px;
background-color: #ffff00;
}
.box3{
width: 200px;
height: 200px;
background-color: #ff0000;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>（3）固定定位
不会随页面滚动而滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #ffff00;
position: fixed;
right: 50px;
bottom: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: blueviolet;
}
h2{
height: 400px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<h2>chhoehvw</h2>
<h2>chhoehvw</h2>
<h2>chhoehvw</h2>
<h2>chhoehvw</h2>
</body>
</html>注：设置定位后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上级逐级寻找，直到顶层文档
（4）z-index
设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素的前面，值越大越在上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #ffff00;
position: absolute;
left: 50px;
top: 50px;
z-index: 20;
}
.box3{
width: 100px;
height: 100px;
background-color: #ff0000;
position: absolute;
left: 100px;
top: 100px;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box3"></div>
</body>
</html>14.CSS3
（1）圆角border-radius
border-radius属性设置“圆角”
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 左上角 右上角和左下角 右下角;
border-radius: 左上角和右下角 右上角和左下角;
border-radius: 四个角;
border-radius: 100%; 圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 100%;
}
.box2{
margin: 5px;
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 18px 18px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>（2）阴影box-shadow
box-shadow向框添加一个或多个阴影
box-shadow: h-shadow v-shadow blur color;
h-shadow v-shadow 正数，阴影在下方和右方，负数相反
值 | 描述 |
h-shadow | 必选，水平阴影的位置 |
v-shadow | 必选，垂直阴影的位置 |
blur | 可选，模糊距离 |
color | 可选，阴影的颜色 |
（3）动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的次数
用百分比来规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%
0%是动画的开始，100%是动画的完成
@keyframes创建动画
使用@keyframes规则，创建动画
@keyframes name {
from | 0%{
}
percent{
}
to | 100%{
}
}name：动画名称，自己命名
percent：百分比值，可以添加多个百分比值
animation执行动画
animation: name duration timing-function delay iteration-count direction fill-mode;
值 | 描述 |
name | 设置动画的名称 |
duration | 设置动画的持续时间 |
timing-function | 设置动画的速率（如下） |
delay | 设置动画的开始时间（延时执行） |
iteration-count | 设置动画循环的次数，infinite为无限次数的循环 |
direction | 设置动画播放的方向（如下） |
animation-play-state | 控制动画的播放状态；running代表播放，而paused代表停止播放 |
timing-function值 | 描述 |
ease | 逐渐变慢（默认） |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
direction值 | 描述 |
normal | 默认值为normal表示向前播放 |
alternate | 动画播放放在第偶数次向前播放，第奇数次向反方向播放 |
div:hover{
animation-play-state:paused;
}:hover 鼠标碰到事件
opacity 透明度属性 0~1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
animation: mymain 5s linear 0s infinite;
}
div:hover{ //鼠标事件
animation-play-state:paused;
}
@keyframes mymain {
from{
width: 200px;
background-color: aqua;
}
25%{
width: 300px;
background-color: darkorange;
}
50%{
width: 400px;
background-color: blueviolet;
75%{
width: 300px;
background-color: darkorange;
}
to{
width: 200px;
background-color: chartreuse;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>（4）呼吸效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
margin: 40px auto;
background-color: aqua;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
animation: breathe 3s ease-in-out infinite alternate;
}
@keyframes breathe{
0%{
opacity: 0.2;
box-shadow: 0 1px 2px rgba(225, 225, 225, .1);
}
50%{
opacity: 0.5;
box-shadow: 0 1px 2px rgba(18, 190, 84, .76);
}
100%{
opacity: 1;
box-shadow: 0 1px 2px rgba(59, 225, 225, 1);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>（5）媒体查询
媒体查询能使页面在不同的终端设备下达到不同的效果
会根据设备的大小自动识别加载不同的样式
设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
width=device-width 宽度等于当前设备的宽度
initial-scale=1.0 初始的缩放比列（默认设置为1.0）
maximun-scaie 允许用户缩放到的最大比列（默认设置为1.0）
user-scaiable 用户是否可以手动缩放（默认设置为no）
媒体查询语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
}
@media screen and (max-width:768px){
.box{
background-color: #ff0000
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: #ffa0f8
}
.p1{
display: none;
}
.p2{
display: none;
}
}
@media screen and (min-width:768px){
.box{
background-color: #fffca4
}
.p1{
display: none;
}
.p2{
display: block;
}
}
@media screen and (min-width:996px){
.box{
background-color: aquamarine;
}
.p1{
display: block;
}
.p2{
display: block;
}
}
</style>
</head>
<body>
<div class="box"></div>
<p class="p1">哈哈哈</p>
<p class="p2">你好啊！</p>
</body>
</html>（6）雪碧图
CSS Sprite也叫CSS精灵图，CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。
优点：
减少图片的字节
减少网页的http请求，从而大大的提高页面的性能
原理：
通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.icon1{
display: block;
width: 35px;
height: 35px;
background-image: url(1.png); //图片QQ聊天截取小黄脸
border: 1px solid red;
background-position: -13px -4px;
}
.icon2{
display: block;
width: 35px;
height: 35px;
background-image: url(1.png);
border: 1px solid #ffff00;
background-position: -108px -4px;
}
</style>
</head>
<body>
<span class="icon1"></span>
<span class="icon2"></span>
</body>
</html>（7）字体图标
常用的字体图标库：阿里巴巴矢量图标库
优点：
轻量型：加载速度快，减少http请求
灵活性：可以利用CSS设置大小颜色等
兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标：
注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择font-class引用
或者：下载成图片，再用CSS样式修改
