CSS
CSS概念
CSS（Cascading Style Sheet），CSS样式表或层叠样式表（级联样式表）
作用
设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
css以html为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
引入CSS的三种方法
(1)行内式（内联样式）
概念
行内样式、行间样式
通过标签的style属性来设置元素的样式
基本语法
<标签名 style="属性1:属性值1;属性2:属性值2;"> 内容 </标签名>多组属性值之间使用";"隔开
(2)内部样式表（内嵌样式表）
概念
内嵌式
将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义
基本语法
<head>
<style type="text/css"[可省略]>
选择器 {
属性1:属性值1;
属性2:属性值2;
}
</style>
</head>只能控制当前页面
(3)外部样式表（外链式）
概念
链入式
将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文件中
基本语法
<link rel="stylesheet" type="text/css" href="css文件路径">- 单标签
- link标签放在head头部标签中，并指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，"stylesheet"表示一个样式表文件 |
| type | 定义所链接文档的类型，"text/css"表示css样式表 |
| href | 定义所链接外部样式表文件的URL |
CSS选择器
作用
找到特定HTML页面元素
CSS基础选择器
标签选择器
概念
HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法
标签名 {属性1:属性值1; }作用
把某一类标签全部选择出来
类选择器
使用"."（英文点号）进行标识，后面紧跟类名
- 类名选择器
.类名 {
属性1:属性值1;
}- 标签
<p class="类名"></p>多类名选择（一个标签内部只能有一个class）
<span class="G font100">G</span>
<span class="two_o font100">o</span>
<span class="three_o font100">o</span>
<span class="G font100">g</span>
<span class="l font100">l</span>
<span class="e font100">e</span>.font100 {
font-size: 100px;
}
.G {
color: blue;
}
.two_o {
color: red;
}
.three_o {
color: orange;
}
.l {
color: green;
}id选择器
使用#进行标识，后面紧跟id名
- id选择器
#id名 {属性1:属性值1;}标签
<p id="id名"></p>
元素的id值是唯一的
通配符选择器
用*号标识
基本语法
* {属性1:属性值1;}会匹配页面所有的元素，降低页面响应速度
- 尽量少用通用选择器*
- 尽量少用ID选择器
- 不使用无具体语义定义的标签选择器div span
CSS文字文本样式
font字体
1.字体风格
.line_2 {
font-style: italic;
}| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| Italic | 浏览器会显示斜体的字体样式 |
2.字体粗细
.line_2 {
font-weight: 700;
}| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的）400 |
| bold | 定义粗体（加粗的）700 |
| 100~900 | 400 等同于 normal，而 700 等同于 bold |
3.字号大小
body {
font-size: 16px;
}
4.字体
.line_1 {
font-family: "宋体";
}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
p {
font-family: Arial,"Microsoft Yahei","微软雅黑";
}中文字体需要加英文状态下的引号，英文字体一般不需要加引号；
当需要设置英文字体时，英文字体名必须位于中文字体名之前；
若字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号
Unicode字体
- 文件编码(GB2312、UTF-8）不匹配会产生乱码
- xp系统不支持 类似微软雅黑的中文
解决
（1）使用英文代替 font-family:"Microsoft Yahei"
（2）使用Unicode编码代替 font-family:"\5FAE\8F6F\96C5\9ED1"
| 字体名称 | 英文名称 | Unicode编码 |
|---|---|---|
| 宋体 | SimSum | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
基本语法
选择器 { font: font-style font-weight font-size/line-height font-family;}.p {
font: italic 700 20px "微软雅黑";
}注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
CSS外观属性
文本颜色
作用
color属性用于定义文本的颜色
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
文本水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
行间距
line-height属性用于设置行间距（行与行之间的距离）（字符的垂直距离）行高
单位
line-height常用属性值单位分别为像素px，相对值em和百分比%
一般情况下，行距比字号大7，8像素
首行缩进
text-indent属性用于设置首行文本的缩进
属性值
可为不同单位的数量，em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值
/*1em就是一个字的宽度*/
p {
text-indent:2em;
}文本修饰
text-decoration通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
文字阴影
text-shadow为文字添加阴影。可以为文字与text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
背景透明
opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。
因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
<number>
<number> 是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。
| 值 | 解释 |
|---|---|
| 0 | 元素完全透明 (即元素不可见). |
| 任何一个位于0.0-1.0之间的 number | 元素半透明 (即元素后面的背景可见). |
| 1 | 元素完全不透明(即元素后面的背景不可见). |
css复合选择器
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
后代选择器
概念
后代选择器又称为包含选择器
作用
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
语法
.class h3 {
color:red;
font-size:16px;
}
子元素选择器
作用
子元素选择器只能选择作为某元素子元素(亲儿子)的元素
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法
.class>h3 {
color:red;
font-size:14px;
}
交集选择器（不常用）
条件
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点
交际选择器 是并且的意思。即…又…的意思
p.one是类名为one的段落标签并集选择器
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明链接伪类选择器
类选择器是一个点
.demo {}伪类选择器用2个点（冒号）
:link {}作用
用于向某些选择器添加特殊的效果
顺序【lvha】不要颠倒！！！
未访问的连接
a:link
已访问的连接
a:visited
鼠标移动到链接上
a:hover
选定的链接
a:activea链接具有默认样式，需要给链接单独指定样式
标签的显示模式
标签的分类
html标签一般分为块标签和行内标签（块元素和行内元素）
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器内可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
块级元素block-level
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
块级元素的特点
（1）独占一行
（2）高度，宽度、外边距以及内边距都可以控制
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素
注意：
只有 文字才 能组成段落 因此p 里面不能放块级元素，特别是 p里面不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素
行内元素inline-level
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
行内元素的特点
（1）相邻行内元素在一行上，一行可以显示多个
（2）高、宽直接设置是无效的
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素
注意：
链接里面不能再放链接
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素inline-block
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
行内块元素的特点
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度
（3）高度，行高、外边距以及内边距都可以控制
标签显示模式转换
块 --> 行内
display: inline;行内 --> 块
display: block;块、行内元素 --> 行内块
display: inline-block;<div>块级元素</div>
<div>块级元素</div>
<span>行内元素</span>
<span>行内元素</span>
<a href="#">百度</a>
<a href="#">新浪</a>
span {
/* 行内-->块 */
display: block;
width: 100px;
height: 100px;
background-color: blueviolet;
}
div {
/* 块-->行内 */
display: inline;
width: 200px;
height: 200px;
background-color: orange;
}
a {
/* 行内，块-->行内块 */
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
}
单行文本垂直居中
文字的行高等于盒子的高度
行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
行高 = 高度 文字会 垂直居中
如果行高 > 高度 文字会 偏下
如果行高 < 高度 文字会 偏上
<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">汽车</a>
a {
/* 行内，块-->行内块 */
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: pink;
text-decoration: none;
color: #fff;
font-weight: 700;
/* 行高==高度让单行文字垂直居中 */
line-height: 30px;
}
a:hover {
background-color: red;
color: yellow;
}css背景
背景颜色
background-color: 颜色值; 默认transparent 透明的背景图片
background-image: none | url(地址);地址不要加引号
背景平铺
background-repeat: no-repeat | repeat | repeat-x | repeat-y;| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
背景位置
background-position : length || length
background-position : position || position| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
注意：
（1）必须先指定background-image属性
（2）position 后面是x，y坐标；可以使用方位名词 或 精确单位
（3）若指定两个值都是方位名词，则前后顺序无关，效果一致
（4）若只指定一个方位名词，另一个值默认居中对齐
（5）若position后面是精确坐标，第一个为x，第二个为y
（6）若指定一个精确坐标，则数值为x坐标，另一个默认垂直居中
（7）若指定两个值为精确单位和方位名词混合使用，则第一个值为x坐标，第二个值为y坐标
背景附着
背景是滚动/固定
background-attachment: fixed | scroll;| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
背景简写
无强制标准
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: #fff url(image.jpg) repeat-y scroll center top;背景透明
background: rgba(0, 0, 0, 0.3);（1）最后一个参数alpha 透明度 取值范围 0~1
（2）可以省略0.3的0
（3）盒子里面的内容不受影响
css三大特性
层叠性
概念
多种CSS样式的叠加
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则
样式冲突，遵循的原则是就近原则
样式不冲突，不会层叠
继承性
概念
子标签会继承父标签的某些样式，如文本颜色和字号
想要设置一个可继承的属性，只需将它应用于父元素
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
优先级
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上
（1）选择器相同，则执行层叠性
（2）选择器不同，就会出现优先级的问题
权重计算公式
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的（样式属性后面添加） | ∞ 无穷大 |
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
权重叠加
注意
数位之间没有进制
比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况
继承的权重为0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中
（1）如果选中了，那么以上面的公式来计权重。谁大听谁的
（2）如果没有选中，那么权重是0，因为继承的权重为0
<div class="demo">
<p>胡梓卓</p>
</div>
div {
color: red;
}
p {
color: green;
}
.demo {
color: blue;
}
/* 21 */
.c1 .c2 div{
color: blue;
}
/* 101 */
/* 101 */
#box1 div {
color:yellow;
}
/* 就近原则 */
div #box3 {
color:green;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>盒子模型
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
盒子模型box-sizing
content-box
默认值，标准盒子模型。width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式：
width = 内容的宽度
height = 内容的高度宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
尺寸计算公式：
width= border + padding +内容的宽度
height= border + padding +内容的高度盒子边框
border : border-width || border-style || border-color| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位：px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框的样式：
（1）none：没有边框（忽略所有边框的宽度[默认值]）
（2）solid：边框为实线
（3）dashed：边框为虚线
（4）dotted：边框为点线
简写形式
border: 1px solid red; 没有顺序| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
用户名:<input type="text">
<br />
密码:<input type="password">
input {
/* border-top: 2px solid green;
border-left: 1px dashed #000;
border-right: 1px dashed #000;
border-bottom: 3px dotted blue; */
border: none;
border-bottom: 2px solid red;
}表格的细线边框
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过表格属性：
table{ border-collapse:collapse; }collapse 单词是合并的意思
border-collapse:collapse; 表示相邻边框合并在一起
内边距padding
padding属性用于设置内边距 是指 边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
当我们给盒子指定padding值之后， 发生了2件事情：
- 内容和边框 有了距离，添加了内边距。
- 盒子会变大了
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
内盒尺寸计算（元素实际大小）
宽度 Element Height = content height + padding + border （Height为内容高度）
高度 Element Width = content width + padding + border （Width为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
padding不会影响盒子大小的情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子
外边距margin
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
块级盒子水平居中
可以让一个块级盒子实现水平居中必须：
- 盒子必须指定了宽度（width）
- 然后就给左右的外边距都设置为auto
常用三种写法：
文字居中和盒子居中区别
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
插入图片和背景图片区别
插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}注意：
行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距
外边距合并
(1) 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
解决方案：尽量给只给一个盒子添加margin值
(2) 嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案：
- 可以为父元素定义上边框
border-top: 1px solid transparent;可以为父元素定义上内边距
padding-top: 1px;可以为父元素添加
overflow:hidden
盒子模型布局稳定性
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）
width > padding > margin
原因：
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用
width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做
ps基本操作以及常用快捷键
- 文件--打开 -- 可以打开 我们要测量的图片
ctrl+r可以打开标尺 或者 视图 -- 标尺- 右击标尺， 把里面的单位改为 像素
- ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图
- 按住
空格键， 鼠标可以 变成小手 ，拖动 ps 视图 - 用选区 拖动 可以 测量 大小
- ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区
去掉列表默认的样式
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }圆角边框(CSS3)
语法
border-radius:length;其中每一个值可以为 数值或百分比的形式。
技巧： 让一个正方形 变成圆圈
border-radius: 50%;矩形就只用 用 高度的一半就好
<p class="test">今日特价</p>
.test {
margin: auto;
width: 120px;
height: 30px;
background-color: red;
color: white;
text-align: center;
line-height: 30px;
border-radius: 7px;
}圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;里面数值不同，我们也可以按照简写的形式，具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;盒子阴影
/*语法*/
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
前两个属性是必须写的。其余的可以省略
外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
css布局的三种机制
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位
- 普通流（标准流）
块级元素会独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等
- 浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
- 定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
浮动
浮动？
它可以实现多个元素一行显示，但是中间会有空白缝隙 它不能实现盒子左右对齐
概念
元素的浮动是指设置了浮动属性的元素会
（1）脱离标准普通流的控制
（2）移动到指定位置
作用
让多个盒子(div)水平排列成一行，可以实现盒子的左右对齐等等
浮动最早是用来控制图片，实现文字环绕图片的效果
在 CSS 中，通过float中文， 属性定义浮动，语法如下：
选择器 { float: 属性值; }| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动——特性float属性会改变元素display属性
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
给浮动的元素添加一个标准流的父亲，最大化的减小了对其他标准流的影响
浮动(float)的扩展
（1）浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
（2）浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流
建议
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动防止引起问题
清除浮动
总结
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题
清除浮动之后， 父级就会根据浮动的子盒子自动检测高度
父级有了高度，就不会影响下面的标准流了
清除浮动的方法
在CSS中，clear属性用于清除浮动
语法
选择器{clear:属性值;} clear 清除| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
Why?清除浮动
父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了
额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如
<div style=”clear:both”></div>或则其他标签br等亦可
<div class="one">
<div class="damao"></div>
<div class="ermao"></div>
<div class="clear"></div>
</div>
<div class="two"></div>
/*清除浮动*/
.clear {
clear: both;
}- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差
父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现
overflow: scroll;优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
使用方法
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}/* IE6、7 专有 */优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
代表网站： 百度、淘宝网、网易等
使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
代表网站： 小米、腾讯等
常用图片格式
1. jpg图像格式：
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
2. gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果
3. png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
4. PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿PS切片工具
切图插件
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手
官网: http://www.cutterman.cn/zh/cutterman
注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本
CSS属性书写顺序
布局定位属性
display / position / float / clear / visibility / overflow
（建议 display 第一个写，毕竟关系到模式）自身属性
width / height / margin / padding / border / background文本属性
color / font / text-decoration / text-align / vertical-align / white- space / break-word其他属性（CSS3）
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ….jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}布局流程
（1）必须确定页面的版心（可视区）， 我们测量可得知
（2）分析页面中的行模块，以及每个行模块中的列模块；其实页面布局，就是一行行罗列而成
（3）制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要
（4）然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块chrome调试工具
F12 或者 ctrl+shift+I
Chrome提示的常见布局错误
定位
将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 )
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
定位 = 定位模式 + 边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
注意：
边偏移需要和定位模式联合使用，单独使用无效
top和bottom不要同时使用left和right不要同时使用
定位模式
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
静态定位（static）
静态定位是元素的默认定位方式，无定位的意思
静态定位 按照标准流特性摆放位置，它没有边偏移
静态定位在布局时我们几乎不用的
相对定位（relative）
相对定位是元素相对于它 原来在标准流中的位置 来说的
相对定位的特点
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
绝对定位（absolute）
绝对定位是元素以带有定位的父级元素来移动位置
- 完全脱标 —— 完全不占位置；
- 父元素没有定位，则以浏览器为准定位（Document 文档）
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
image-20220222174318626 绝对定位的特点
- 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
- 不保留原来的位置，完全是脱标的
定位口诀 —— 子绝父相
绝对定位盒子的居中
注意：绝对定位/固定定位的盒子不能通过设置
margin: auto设置水平居中
image-20220222174412134 left: 50%;：让盒子的左侧移动到父级元素的水平中心位置
margin-left: -100px;：让盒子向左移动自身宽度的一半
image-20220222174434756 固定定位（fixed）
固定定位是绝对定位的一种特殊形式
- 完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置
跟父元素没有任何关系；单独使用的
- 不随滚动条滚动
image-20220222174531724
堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
定位改变display属性
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等
同时注意
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了
元素的隐藏与显示
（1）dispaly显示
设置或检索对象是否及如何显示
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思
特点
隐藏之后，不再保留位置
（2）visibility可见性
设置或检索对象是否及如何显示
visibility：visible ; 对象可视
visibility：hidden ; 对象
特点
隐藏之后，继续保留原有位置
（3）overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
css用户界面样式
- 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
- 表单轮廓等。
- 防止表单域拖拽
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>轮廓线outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
取消轮廓线
outline: 0; 或者 outline: none;防止拖拽文本域resize
<textarea style="resize: none;"></textarea>vertical-align垂直对齐
- 有宽度的块级元素居中对齐，是margin: 0 auto;
- 让文字居中对齐，是 text-align: center;
它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom通常用来控制图片表单与文字的对齐
图片、表单和文字对齐
默认的图片会和文字基线对齐
去除图片底侧空白缝隙
原因
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐
就是图片底侧会有一个空白缝隙
解决
- 给img
vertical-align:middle | top| bottom等等； 让图片不要和基线对齐 - 给img 添加
display：block;转换为块级元素就不会存在问题了
溢出的文字省略号显示
white-space
设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal; 默认处理方式
white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行text-overflow 文字溢出
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
CSS精灵技术（sprite)
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图
- background-image
- background-repeat
- background-position属性进行背景定位
- 其中最关键的是使用
background-position属性精确地定位
css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置
给盒子指定小背景图片时， 背景定位基本都是 负值
div{
background:url(../images/abcd.jpg)no-repeat;
float:left;
}
.h{
width:101px;
height:106px;
background-position:-220px-141px;
}
.z{
width:115px;
height:97px;
background-position:-485px-560px;
}
png格式为透明背景
72px为网页显示像素
滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术
核心技术
利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏
总结
- a 设置 背景左侧，padding撑开合适宽度
- span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度
- 之所以a包含span就是因为 整个导航都是可以点击的
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>公众平台</span>
</a>
</li>
<li>
<a href="#">
<span>开发平台</span>
</a>
</li>
</ul>
</div>
</body>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
margin: 5px;
float: left;
}
li a {
text-decoration: none;
font-size: 14px;
color: #fff;
line-height: 33px;
}
body {
background: url(../images/wx.jpg) repeat-x;
}
.nav {
margin-top: 20px;
}
.nav a {
display: inline-block;
height: 33px;
background: url(../images/to.png) no-repeat;
padding-left: 15px;
}
.nav a span {
display: inline-block;
height: 33px;
background: url(../images/to.png) no-repeat top right;
padding-right: 15px;
}
.nav a:hover {
background-image: url(../images/ao.png);
}
.nav a:hover span {
background-image: url(../images/ao.png);
}margin负值
负边距+定位：水平垂直居中
压住盒子相邻边框
margin-left:-1px;
margin-top:-1px;使用div盒子鼠标经过样式会出现问题
div:hover {
border:1px solid #f40;
}
使用相对定位-保留位置
div:hover {
border:1px solid #f40;
position: relative;
}
如果已经存在相对定位，使用z-index: 1CSS三角形
width:0;
height:0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为
transparent透明就好了为了照顾兼容性 低版本的浏览器，加上
font-size:0; line-height: 0;
过渡
过渡（transition)
是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
经常和 :hover 一起 搭配使用
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;| 属性 | 描述 | css |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称 | 3 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 "ease" | 3 |
| transition-delay | 规定过渡效果何时开始，默认是 0 | 3 |
属性
属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以
如果想要所有的属性都变化过渡， 写一个all 就可以
花费时间
transition-duration 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线
默认是 ease
何时开始
默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/*如果有多组属性，使用逗号隔开*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */获得焦点元素
:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素
:hover
语法：
.total input {
border: 1px solid #ccc;
height: 30px;
width: 40px;
transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
width: 80px;
border: 1px solid skyblue;
}css3
属性选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性、且属性值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性、且属性值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性、且属性值中含有val的E元素 |
类选择器、属性选择器、伪类选择器 权重=10
结构伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
n可以是数字、关键字、公式
- 关键词[even]偶数 odd 奇数
- n为公式，则从0开始计算
- 第0个元素或超出元素的个数会被忽略
伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
- before和after必须有 content属性
- before和after创建一个元素，但是属于行内元素
- 在dom看不见创建的元素，被称为伪元素
- 伪元素和标签选择器一样，权重=1
2D转换 transform
转换（transform）：可以实现元素的位移、旋转、缩放等效果
- 移动：transform
- 旋转：rotate
- 缩放：scale
2D转换：改变标签在二维平面上的位置和形状的一种技术
移动 translate
可以改变元素在页面中的位置，类似定位
语法
transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
盒子居中对齐，可使用transform:translate(-50%, -50%)来代替盒子尺寸改变外边距固定的写法
旋转 rotate
让元素在二维平面内顺时针旋转或逆时针旋转
语法
transform: rotate(度数);重点
- rotate里面跟度数，单位是deg rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
转换中心点 transform-origin
设置元素转换的中心点
语法
transform-origin: x y;重点
- 注意后面的参数x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 （50%，50%）
- 可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
缩放 scale
可以放大和缩小
语法
transform: scale(x,y);注意
- x和y用逗号分隔
- transform：scale(1,1) 宽和高都放大一倍，相对于没有放大
- transform：scale(2,2) 宽和高都放大了2倍
- transform：scale(2) 只写一个参数，相当于第二个参数和第一个一样
- transform：scale(0.5,0.5) 缩小
- 优点：可以设置转换中心点，默认以中心点缩放，不影响其他盒子
综合写法
- 同时使用多个转换，其格式为
transform: translate() rotate() scale();其顺序会影响转换的效果（先旋转会改变坐标轴方向）
同时有位移和其他属性时，要把位移放到最前面
动画 animation
动画（animation）可通过设置多个节点来精确控制一个或一组动画
动画的基本使用
基本使用
- 定义动画
- 调用动画
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 300px;
}
}元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,100px);
}
75% {
transform: translate(0px,100px);
}
100% {
transform: translate(0,0px);
}
}
div {
width: 200px;
height: 200px;
background-color: palegreen;
animation-name: move;
animation-duration: 3s;
}动画序列
（1）0% 是动画的开始，100% 是动画的完成
（2）在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
（3）动画是使元素从一种样式逐渐变化为另一种样式的效果；可以改变任意多的样式和次数
（4）用百分比规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%
动画属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | @keyframes动画的名称【必要】 |
| animation-name | @keyframes动画的名称【必要】 |
| animation-duration | 动画完成一个周期所花费的秒或毫秒，默认是0【必要】 |
| animation-timing-function | 动画的速度曲线，默认是"ease"   |
| animation-delay | 动画何时开始，默认是0 |
| animation-iteration-count | 动画被播放的次数，默认是1，还有infinite(∞) |
| animation-direction | 动画是否在下一个周期逆向播放，默认是"normal"，alternate(逆播放) |
| animation-play-state | 动画是否正在运行或暂停，默认是"running"，还有"paused" |
| animation-fill-mode | 动画结束状态，保持forwards 回到起始backwards |
简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画次数或者结束的状态;热点图
放大时会向四周扩散
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);添加多个动画，用逗号分隔
animation: w 5s steps(6) infinite forwards,move 3s forwards;3D转换
三维坐标系
立体空间，由3个轴组成
3D移动 translate3d
transform: translateX(100px); /*仅在x轴移动*/
transform: translateY(100px);/*仅在y轴移动*/
transform: translateZ(100px);/*仅在x轴移动（注意：translateZ一般用px单位）*/
transform: translate3d(x,y,z);/*x、y、z分别指要移动的轴的方向的距离*/透视 perspective
透视写在被观察元素的父盒子上面
d：视距，人眼睛到屏幕的距离
z：z轴，物体距离屏幕的距离，z轴越大（正值）看到的物体越大
3D旋转 rotate3d
让元素在三维平面沿着x轴，y轴，z轴或者自定义轴进行旋转
transform: translate3d(100px,100px,-800px);
transform: rotateX(45deg);/*沿着x轴正方向旋转45度*/
transform: rotateY(45deg);/*沿着y轴正方向旋转45度*/
transform: rotateZ(45deg);/*沿着z轴正方向旋转45度*/
transform: rotate3d(x,y,z,deg);/*沿着自定义轴旋转deg角度（了解）*/
transform: rotate3d(1,1,0,45deg);矢量3D呈现 transform-style
控制子元素是否开启三维立体环境
transform-style：flat；子元素不开启3d立体空间 默认
transform-style：preserve-3d；子元素开启立体空间
写给父级，影响子盒子
浏览器私有前缀
为了兼容老版本
私有前缀
- -moz-：firefox浏览器私有属性
- -ms-：ie浏览器私有属性
- -webkit-：safari、chrome私有属性
- -o-：Opera私有属性
提倡写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;背景线性渐变 gradient background
语法
background: linear-gradient(left, #FA5A55, #FFCE51);
background: -webkit-linear-gradient(left top, #FA5A55, #FFCE51);
background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2, ...);背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词 或者 度数，如果省略默认为top
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
/*从#DAECF9开始到#DAECF9结束，#DAECF9从40%开始，#DAECF9从80%开始*/
background: -webkit-linear-gradient(top, #DAECF9, #DAECF9, #C6E3F8 40%, #DAECF9 80%);
