最全面的css基础 纯干货吧抓紧收藏

最全面的css基础 纯干货吧抓紧收藏

CSs概述 

cascading style sheets  层叠样式表  简称为样式表  2.作用  用来去设置html网页元素的样式

css与html的关系    html是标记  是搭建网页主体结构的·内容  是 内容的展示  css是负责修饰页面内容  即负责修饰页面的样式  尽量用css属性去替代html的属性 

1.内联样式：即是行内样式  <any  style=' color：red'></any>  样式申明  就是由样式的属性名称和值组成 

属性名称与值之间用  冒号连接   

常用的样式：用来设置文本颜色的属和值    属性：color  只要是合法的颜色值   

设置文字的大小  以px或p为单的大小 

内控样式 ：网页的头元素中去增加一对style标记  在·style中去声明该网页的样式

选择器是什么  专门用来规范页面哪些元素能够去使用声明好的样式  就是把声明好的样式给元素  有选择器决定   

基础选择器：元素选择器  指的就是由元素的名称来作为选择器的   

选择器{

样式的声明 

}

写在头元素中 

外部样式  在。css外部文件中声明文件规格 

使用步骤：1.创建样式表文件

2.在样式表中创建样式规格  3.

在网页中去对样式引入

css的样式特征：

1.继承性；

必须是父子结构，即层叠关系  大部分的css的样式  是可以被直接继承的   

css的样式特征 

不仅仅限于一级嵌套  也可以是多嵌套   

2.层叠性：

给一个元素去定义多个样式规格

如果不冲突，name可以同时应用到当前格式 

默认优先级  由低到高 

浏览器和默认级别低    外部和内部就近原则；

即内联样式 行内样式 优先级最高   

！important原则  显示优先级    样式属性：值  ！important ；  这个值一定优先使用 

选择器：css中基础选择器 

规范了页面中哪些元素能够使用声明好的样式 

用来匹配页面所有元素的选择器叫做通用选择器 

*{样式声明}  效率低  尽量少用  用body{}

只匹配页面中的某一种或某一类元素 

3.类选择器 ：定义页面上某个或者某些元素的样式  是公共样式  声明.名称类名  {样式声明}  注意：1

点不能省略  2.类名称不能以数字开头3.不能包含特殊字符

_ -可以包含  多个类名用空格  连接 

id选择器  设置指定id元素的样式  #id{样式声明 }

群组选择器  将多个选择器放在一起进行样式的选择声明 

选择器1，选择器2，选择器3{样式声明}     

4.后代选择器 

通过元素的后代关系来匹配元素 

也就是数哦嵌套关系    一级或者是多余一级的嵌套关系  语法结构  选择器1 选择器2{样式声明}    多级嵌套

一级嵌套是子代选择器  用>号连接 

伪类选择器

:link访问之前

：visited访问之后

：hover悬停状态

：active点击状态

：focus匹配元素获取焦点的状态 

权值标识当前选择器的重要程度  权值越大  优先级越高  元素选择器1    类选择器10  伪类10  id100  内联  1000   

i 选择器的·权值加在一起  大的优先  如果  相同  则以 靠近的·为主 

尺寸与边框：

px,pt：一般描述文字的大小   

in英寸 

1in=2.54cm 

pt磅值  1pt=1/72 in  1p=2.54/72cm

cm  mm      em相对于父元素去乘以倍数 rem相对于根元素的字体大小乘以倍数 即是相对于body或html    一般做移动端来控制  %相对于父元素来说所占的百分比

描述颜色的取值 ：

1.颜色的英文单词 

2.rgba  rgb（r,g,b,a）  0-255之间的数字  rgb里也可以加%  a取值是0-1之间的数字  1是无透明度· 

3. 十六进制的表示方法 

#cccc  #   

#rrggbb  0-或a-f组成 

直接用#rgb  ​

2.尺寸的属性 

作用：改变元素的看度和高度 

width  min-width

max-width

height

min-height

max-height

块及元素：div p span h1 ul ol dl  header ....结构标记 

行内块元素：  表单控件  除了单选按钮和复选框之外  其他的都可以设置尺寸 

本身具备width和height属性的元素 

image 

大部分的行内元素都无法修改尺寸 

关于溢出的处理 

当内容多二区域小就会产生溢出  默认溢出方向都是纵向  属性：overflow; overflow-x;overflow-y;  第一个同时处理xy 方向的 

取值：visible 可见的  溢出可见 

hidden隐藏  溢出的内容全部隐藏起起来 

3.scroll  滚动溢出时出现滚动条

4.auto 自动  指的是溢出的·1时候自动出现滚动条 

一般用的最多的是auto   

border的width指的是边框的·宽度  以px为单位 

style用来描述边框的样式     

取值：solid  dotted虚线    dashed虚线 断断续续仙桥

color指的是边框的颜色    特殊的颜色：transparent 透明的   

取消input边框  border值为none或为0 

设置单边框 

只设置某一条边框的属性  border-top，bottom，left，right

单属性的设置 ：指的是设置一条边的某一个属性 

border-width/style:solid/color/ 

修改四条边样式为dashed

border-top-color:red  定义某一条边的某一个属性 

边框boreder-radius  指将元素的四个直角可以倒成圆角

取值：以px为单位的数值

单角设置border-top-left

边框的阴影  属性：指的是box-shadow ；取值：h-shadow:表示阴影在水平方向的偏移距离 是个必须值 取值可为证未负向左偏移，v-shadow：垂直方向，指阴影在垂直方向的偏移值是必须值 正表示下 负表示上 blur：描述阴影的模糊的距离 取值越大  模糊的效果越明显 一般情况都是px为单位的数值  spread描述阴影的尺寸  即大小  指定要在阴影的基础上扩充出来的距离color阴影的颜色 inset ：将默认的外阴影改成内阴影效果   

7.轮廓：指的是边框的边框 

pre是预格式化 

块及元素垂直外边距相遇  合并以大的值为主    行内元素    外边距溢出  父元素没有上边框    可能会 

第一个子元素的位置增加<table> 

padding会改变边框所增加的范围

box-sizing：border-box默认框模型计算方法啊   

content-box默认的计算方式 

border元素的尺寸包含border以及padding的值 

占地  width+margin  width包含了border和padding

background-color：专门定义背景色 

背景颜色默认从边框位置开始填充

background-image：url（）；

background-repeat  norepeat 

repeat默认平铺  repeat-x横向平铺

repeat-y 纵向平铺

no-repeat  不平铺   

图片大小  background-size：width height

100%  专门设置背景图像的大侠 

cover 取值是覆盖的意思  将图片等比放大  直到背景图完全覆盖到所有区域 为止 

contain包将背景图进行等比的放大  直到背景图喷到某一个边缘为止   

5.背景图像的固定

属性 background-attachment将背景图固定在某个人位置  一直定在可视化范围内    取值：fixed    默认scroll

改变背景图在元素中的位置 ：background-position

取值方式：1.relative 

2.absolute

3.fixed

1.x y  x水平方向的偏右  取值为证  向右偏移    y垂直偏移 取值为证  向下偏移 

可以取值为%比或者px    ​

margin-right=

7.背景属性的简写方式    backgroung：  color  url  repeat attachment position 

注意  如果不设置其中某个值的话 该位置  将采用默认值  三、渐变填充

1.渐变：指的是多种颜色平缓变化的变换效果

色标：一种颜色及其出现的位置  一个渐变一般都是有多重色标组成 

分分类：1.线性渐变  以直线的方向来填充渐变色

2.径向渐变  以圆形的方式来实现填充效果

3.重复渐变  将线性渐变和径向渐变重复几次来实现渐变效果 

线性渐变：属性background-image：

取值：关键词 linear线性-gradient剃度（angle，color-point1）

angle的取值：to top      从上下向上去进行填充渐变  2.to bottom从上到下  to left to right 从左向右来填充渐变      2.可以用具体角度值  0deg  0度  相当于to top 

.color-point ：指的是色标  表示得是颜色以及位置的组合  中间用空格隔开 

red 0%  在填充位置的开始处为个红色

green %50  到填充一半的位置处颜色为绿色 

blue 200px  到填充方式向的200px的位置处颜色变为蓝色

径向渐变  background-image 

取值 ：radial-gradient  （[size at position],color-point1）  size表示圆的半径  以px为单位的数字    positi​on圆心的位置 

1.具体数字：xy

2.x%，y%：元素宽的高的占比

3.可以用关键词    left center right    y top center. bottom

background-image:repeating-linerar-gradient（angle，color-point）   

径向渐变 background-image:repeating-radial-gradient（size at position，color-point）   

重复时color-point一定要给绝对数字加颜色单位 

webkit谷歌兼容性处理

在低版本浏览器中加前缀：

对于不支持的浏览器可以增加浏览器前缀  来让浏览器增加前缀  chrome/safari:-webkit-

firefox:-moz-

opera:-a- 

ie:-ms- 

4.文本格式化的属性  ：

1.字体的属性：font-family：取值是去指定字体的类型  一般用逗号隔开      '微软雅黑'，‘Arial’，‘宋体’，'黑体'

font-size:字体小    取值一般是px为单位的数字  或pt 

3.字体加粗情况

font-weight ：bold  加粗  正常normal    3.value值：是具体的数字  没有单位  400-900整百倍 

字体的样式 font-style：normal    italic 《i》 

小型的大写字符    指的是将小写字母变为大写  1

大小于小写字母一致  font-variant 取值：normal

2.small-caps；

6.简写形式 ： 

字体属性的简写 ；属性font： style ，variant weight size  family 

注意;使用简写形式必须要设置family值 你否则无效 

格式化的属性：1.color属性    合法的颜色值

2.文本的排列方式  指的是水平方向

tex-align：center left  right    /justify(表示两端对齐)

设置行内或者行内块 

3.线条修饰 ：

text-decoration：none ； 无任何的线条修饰  2.普通的文本  下划线· underline      下划线  上划线  overline  line-through​ 

4.line-height 

定义一行文本所占的高度  有一个特点是行高大于文字本身的大小那么该函行文本将在指定的横线内呈现一个垂直居中的效果  line-height 

取值是以px为单位的数字 

一般设置行高和div盖度一致 

4.首行文本缩进

text-indent  取值是以px为单位的数字   

文本阴影 text-shadow  取值  h-shadow  v-shadow  blur  color       

表格的属性修饰 

vertical-align：单元格中数据的垂直对齐方式  top/middle/bottom 

表格中除了margin之外都适用 

表格里面特有的睡醒 

css里面设置表格的特有属性

边框合并

border-colapse   

默认情况下是分离边框的模式 

sparate    collapse 表示边框合并 

边框边距  border-spacing 是用来设置单元格与单元格之间或者是单元格与表哥之间的距离 

给定一个值表示水平和垂直相同

若是两个值  第一个表示水平间距  第二个表示垂直间距  若要设置边距必须在边框分离的情况下才能起作用  不然没有任何作用

表格标题 

位置是在表格的上方     

caption  表示标题

属性  caption-side  取值    top  下方bottom

关于表格显示规则的属性    指的是用来帮助浏览器 

来指定如何布局一张表格

也就是指定单元格的计算方式i

table-layout：fixed  来固定表格的布局  单元格td的尺寸由已设定的值为准   

1.定位：指的是去改变元素在页面中默认的位置 

定位的效果分类：

1.普通流定位  指的是元素默认的显示方式 

又称文档流定位 

2.浮动定位 相对定位  绝对定位  固定定位 

每个元素默认都是从其父元素的左上角开始显示

块及是由上到下排列  并且每个元素独占一行 行内块元素嗾使按照从左到右的顺序进行排列的 

一旦元素浮动起来  它将不占页面空间  脱离了原本的定位方式  即是脱离了文档流定位  其他的元素会向前补位

浮动元素会停靠着在=再父元素的左边或右边  或其他已经浮动元素的边缘   

float：left/right   

left:停靠在父元素的左边或者·停靠在左边已经浮动的元素  当父元素显示不下浮动元素  将会换行  有可能被卡主

2.元素一旦浮动  他的宽度将以内容为主  前提是未指定宽度  元素一旦浮动起来  行内元素将变成块及 

能设定尺寸  并且可以正常的设定垂直外边距

文字包括行内元素包括行内块元素，不会被浮动元素压在下边   

3.如何清除浮动岁其他元素的影响 

即是后续元素会上前补位

若后续元素不箱站位 可以通过清除浮动的方式来解决这个问题

clerar：left  清除当前元素前面元素带来的影响

right  both   

默认值：none    ​​

子元素一旦浮动起来 父元素高度就会在不设定的情况下 等于0 

元素的高度都是以未浮动的高度为准

解决方案：1

给父元素设定高度  缺点：不是每一次都知道父元素的固定高度

2.设置父元素也浮动 缺点：不是任何时候父元素都需要浮动

3.位父元素设置over flow

如果没有溢出内容可以实现 如果有内容需要溢出显示就会一同被隐藏起来 

4.在父元素里去追加一个空标记  指的是父元素最后一个子元素位置处 追加元素最好是块及元素 社会中clear：both  无论什么情况都不会影响别人

显示方式的改变 ：

显示方式就是  决定了元素在页面中的表现形式    （块及  行内  行内快 table ）

属性:DISPLAY

取值：none  不显示元素  -相当于隐藏元素 

block：块级  表现的与块级元素一致  3.inline行内 

让元素表现的与行内元素一致  并且

inline-block让元素表现的与行内快一致  允许修改尺寸 

多个元素在一行里显示  可以修改高宽 

table：让元素表现的与表格一致 尺寸实际上以内容一致  本身具有高宽属性    显示效果的设置：

显示/隐藏  属性  visibility

取值：visible默认值  默认元素都是可见的 

hidden隐藏 

实现隐藏的方式  display：none 

visibility：hidden  这个情况隐藏依然占据页面空间  不会脱离文档流  依然占据页面空间 

display：none  不占据页面空间  会脱离文档流  不占据页面的空间 

3.opacity：透明度 

取值1.0-1.0之间的小数  越靠近0越透明 

opacity除了作用于元素以及元素内容的透明度

而rgba只做用于背景颜色或者是只作用于文字颜色  只是单一透明度的设置 

4.垂直对齐方式

属性：vertical-align：

适用场合：表格中使用    top middle buttom 

图片的对齐 ：控制图片两边的文本垂直对齐方式 

取值：top  middle bottom  baseline默认的基线对齐  用于图片与文字对齐方式   

光标的设置 

改变鼠标悬停在元素上时 鼠标的状态

属性：cursor

1.default：箭头

2.pointer 小手

3.crosshair 十字准心 

4.text：表示文本文档  I

5.wait      等待 

6.help：帮助文档 

列表：list-style-type:用来修饰列表项的标识 

1.none    2.disc  3.circle  4.square   

list-style-image 取值url（图片路径 ）

3.列表项的位置  list-style-position ：取值1

outside在外边的  将标识放置于内容区之外  inside  将标识放置于内容区之内 

4.简写形式 list-style：none  简写  type标识  url  position 

可以通过列表横向排列·

定位：

position

相对定位：取值relative 

1.什么是相对定位：指的是元素相对于他原来的位置去偏移某个距离 相对于元素自己 使用场合：元素位置的微调 时使用 position：relative  必须要配合偏移属性一起使用实现位置的微调

绝对定位 取值绝对定位  absolute 

固定定位  fixed 

4.static静态的    指的是元素的默认选择方式

配合偏移属性  数字加单位    top buttom left right 

top：150；一般情况下往下移动 left150px  元素向右移动 right：150px  向左移动

绝对定位：

1.语法position:absolute;

配合偏移属性使用 实现位置的修改 

1使用场合  有堆叠效果的元素

2.弹出菜单 默认情况父元素未定位得话 直接找body 

#d1:hover #d2{

display:block

}悬停显示子元素    hover以前 display：none    =》display：none   

绝对定位元素会相对于 离他最近的已定位的祖先元素  去实现位置的初始化  没有已定位的祖先元素 那么这个元素相对于body实现位置的初始化  绝对定位的元素会脱离文档流 不占用页面里空间

堆叠顺序： 

z-index改变堆叠顺序  所有的已定位元素 可能出现堆叠效果

如何改变对的顺序  取值：无单位数字  数字越大  就越靠上  如果父子关系  index也无法改变顺序

position：fixed  配合偏移属性使用 

fixed可以将行内转化为块及 

固定定位的元素会变成块及  也就是可以修改尺寸  fixed定位只是相对于  body  永远相对body实现位置的初始化  脱离了文档流  不占页面空间 

  css3高级

1.兄弟选择器 ：指的是具备相同父元素的平级元素 

1.相邻兄弟选择器    语法选择器1+选择器2 {样式声明}

都一律只能向后找  不能向前找  只找一个 

2.通用兄弟选择器：元素后的所有兄弟

选择器1~选择器2{样式声明} 

属性选择区 

属性作用：指的是允许去通过元素所附带的元素属性及值去匹配元素  语法：基本用法 

[attr]

匹配页面中所有附带attr的元素  【】【id】匹配页面中所有附带ID的元素   

element(attr)  element任意元素      attr人艺术性  div【class】  div[class]     

[attr1][attr2]    [id][class]表示同时附带id和class属性的元素  可以是多个属性 

[attr=value]匹配attr值为value 的元素  [id=d1]相当于  id选择器 

3.伪类选择器 ：

链接伪类：link visited  动态伪类：hover  active focus 

锚点  目标伪类：突出显示激活锚点元素  匹配被激活的锚点  点击锚点转换后就是宝激活状态 

语法：选择器  ：target  {样式声明}   

2.结构伪类：通过元素的·1结构关系来匹配元素 

1.：first-child    匹配的是元素时属于其父元素中的第一个子元素      p:first-child 

2.last-child:属于其父元素中的最后一个子元素 

P:last child{} 

3.:nth-child(n)匹配的是属于其父元素里第n个子元素  nth-child(2): 

tr:nth-child(2) td:nth-child(3){

background:pink;

}表示第二行 第三列

4empty

：empty  匹配没有子元素的元素 

注意：必须为空  没有任何内容 

5.only-child：匹配的元素是属于其父元素里得唯一的子元素 

否定伪类  ：将满足指定选择器的元素排除在外      ：not

(selector){样式} 

table td:not(:first-child){

color:blue;

font-size:30px;

}排除第一列的字体加粗 

伪元素选择器

1.：first-letter或 ：：first-letter  作用匹配的是某个元素的首个字符    first-line用来匹配某个元素的首行 

首字符选择器高于首行选择器 

3.选取中内容的背景颜色  ：：selection    作用就是 匹配被用户选取的内容 

注意：只能去修改背景颜色和字体的颜色  div：：selection{

background：

color：

此地方的伪元素必须是双：： 

}

内容生成：指的是使用css动态的向元素中插入一段内容 

使用伪元素选择器生成 

：：before 匹配到某元素·内容区域之前  ：：after  匹配到某元素·内容区域之后 

配合属性使用  属性content  用来去想要匹配到的位置处去增加内容  增加的内容写在content.属性里    取值  字符串    2.动态的插入图片的路径url     

伪元素解决外边距溢出 ：给子元素加margin  影响到父元素    父元素第一个子元素处加table 

空table标记可以用 父元素：before来代替  父元素：before即是 父元素内容的前面 

解决浮动使父元素失去高度问题的影响： 

给最后一个父元素的资源素处加个块元素 清除浮动 

父元素：afte

r{

display：block；

content：‘’；

clear：both；

} 

弹性布局：主要解决某元素中子元素的布局方式  为布局提供最大的灵活性 

弹性布局概念：

1.弹性布局容器

子元素的父元素叫做容器 

资源素叫做项目 

2.弹性布局的项目

横轴 有起点有终点 叫做主轴 左到右 纵轴叫做交叉轴  上到下       

3.主轴指的是项目排列方向的轴 

交叉轴：与主轴垂直交叉的轴叫做交叉轴 

有关弹性布局的属性的设置：

弹性布局的容器相关的舒心

弹性：flex

取值display：1.flex 将块及元素变为容器  2.inline-flex    将行内元素变为容器 

做布局时会自动分配空间 

元素变成容器的话  容器的text-align.属性将会失效 

元素变为容器后  子元素的浮动属性将会失效

clear属性及垂直对齐方式也失效了；

有关容器的属性：  1.flex-direction  指定容器的主轴以及他里面的排列方向  row 默认值  即主轴为x轴  起点默认在左边  row-reverse  起点进行反转  主轴为x起点在右边  取值纵向：column  主轴在  column-reverse 起点在底部 

flex-wrap：作用  当一个主轴排列不下所有普项目时

1.nowrap：默认值  空间不够吧项目缩小  也不换行

wrap一旦显示不下自动换行

换行并且反转：wrap-reverse；  .

flex-flow：同时指定排列顺序和换行  1. row nowrap；

4.justify-content  定义项目在主轴的对齐方式 

取值：flex-start  左 在主轴的起点对齐 

flex-end 中 在主轴的终点对齐  center 居中对齐

space-between  两端对齐的效果 

space-around 指的是每个项目两端的间距相同 

以上属于水平方向的对齐方式 

align-items  指的是子项的交叉轴上的对齐方式 

取值：flex-start：交叉轴的起点对齐  flex-end交叉轴上的终点对齐  center  交叉轴上中间对齐  baseline 交叉轴上的基线对齐 

stretch：若项目即子元素未设置尺寸  在交叉轴上占满父元素的空间

项目的属性：只能去控制某一个项目  不是对整个项目修饰  不影响别的项目和容器 

1.order 顺序： 值越小的话 就越靠近起点  默认情况下是0  取值方式是无单位 

2.flex-grow  定义项目的放大比例  当容器有足够的剩余空间  项目将按指定的比例进行放大  整数的数字  无单位  默认值是0  取值越大  占的剩余空间就越多   

flex-shrink  项目将按照指定的比列去缩小  默认值为1 空间不足的话等比缩小  默认值为1    取值0的话不缩小  值越大  缩小的比例就·越大   

align-self：用来控制单个项目在交叉轴上的对齐当时 

取值：flec-start  flex-end  baseline stretch  auto 自动继承父元素的align-items   

转换：对页面中的元素实现

改变元素在页面中的位置 大小  角度 或形状  这样的方式叫做转换   

2d转换 ：  在x轴和y轴上发生的转换效果   

3d转换：xyz轴上的转换     

有关转换的属性 

transform： 

取值：1.none  无效果 

translate-function 表示一个或者是多个转换函数  多个的话中间要用空格隔开   

2.转换原点 

属相；transform-origin  取值：数值/百分比  /关键词  2个值：表示的原点是在x轴和y轴上的位置 

3个值得话 表示原点在xyz轴上的位置   

默认原点都在元素的中心位置处  center center  /50% 50% 

2d转换：

1. 位移：改变元素在页面中的位置

属性：transform 

取值 translate（x）指定元素在x轴上的位移距离  取值正负都可以  取值为证向右移  反之向左   

translate（x，y）  表示指定元素在xy轴上的唯一距离  y正向下移 y负 向上移  translateX （x）  translate Y（y）只能给一个值 

实现缩放的是scale（value值）value表示横向或者是纵向的缩放比例  默认值是1  放大大于1  缩小小于1 

如果是负数是放大  将水平和垂直方向都翻转180度 

scale（x,y）x表示横向放大比例  y表示纵向的放大比例

也可以进行单项  缩放  scale-x（）scale-y（） 

旋转  ：改变元素在页面中的角度 

transform：rotate    取值为正顺时针旋转  取值为负 逆时针旋转  旋转是会连同坐标轴一起旋转    一定会影响旋转后的位移效果 

角度倾斜：   

改变元素在页面中的形状   

语法 属性：transform  skew（）

skewX （deg）元素向着x轴产生倾斜的效果 实际上改变的是y轴的角度  x为证是y轴逆时针  负为顺时针或skewY（deg）  让y轴产生倾斜  改变的是x的角度  y取值为正x顺时针  y为负逆时针 

skew（x,y）双轴倾斜

4.如何在网页中实现3d的转换 

透视距离：模拟人的眼睛到3d元素之间的距离

属性

perspective      该属性应该加在3d转换元素的父元素上 

3. 3d旋转  transform  取值 rotateX（ndeg）指的是以x为中心实现旋转 

rotate（y）以y.轴为中心旋转的角度 

rotateZ（deg）  以z轴为中心去旋转元素角度  方向盘  摩天轮 

rotate3D（x，y，z，ndeg）  xyz取值大于0的时候  表示该轴参与旋转  如果取值为0 则不参与旋转 

实现转换：过渡 

1.指的是使用css的属性将他的值在一段时间内去平缓变化的一个效果  把这个效果叫做过渡 

指定过渡属性 ：通过transition-property：取值1.具体属性的名称 transition-property：background；  指定哪个属性值在变化的时候需要使用过渡的效果来体现 

all代表所有能体现过渡的属性 

允许摄制1过渡效果的属性：所有跟颜色相关属性 

2.取值为数字的属性 

3.转换属性：位移 倾斜

4.渐变

4.visibility  显示/隐藏 

6.阴影属性 

一般用all 

2.指定过渡的时长 即指定咋多长时间内去完成过渡操作

trasition-duration： 以秒或毫秒为单位的数字 1000ms=1s 

3.指定速度的时间曲线函数

transition-timing-function用来指定过程变化  1.ease慢速开始 快速变快 慢速结束 linear：匀速 

ease-in慢速开始 加速结束 ease-out  快速开始慢速结束  ease-in-out 慢速开始和结束 中间是先加速 后减速  指定过渡的延迟时间    transition-delar ：秒或毫秒为单位的数字

注意：过渡属性的编写位置会影响最后的效果 如果将过渡属性放在元素声明样式里 既要管回又要管去 若放在触发操作中就只管去不管回 

简写方式：transition：property duration  timing-function delay  ；

属性时间必须写 其他=可以不写

css hack:兼容性处理 

c3高级动画 

属性：什么是动画：使元素从一种样式逐渐去转换到另一个效果  是将多个过渡效果放再一起  让他连贯   

通过关键帧实现  通过他控制动画的实行

关键帧·：

1.动画的时间点 

2.在改时间点上的样式改变 

二、动画相关的使用

1.声明动画          为动画起名  同时定义关键帧   

2.为元素去调用动画  指定元素调用动画名称

通过参数控制动画 

声明动画的具体方式： @keyframes 动画名{

0%{动画开始时元素的样式}

100%{画执行完成时元素的样式}

}

animation-name：name

        duration

动画执行得速度        timing-function:ease.ease-in ease-out  linear   

速度曲线函数：animation：delay  动画的延迟  取值也是以秒或毫秒为单位 

infinite 无限次播放   

animation-iteration-count:10;

6.animation-direction：normal；  默认的正常效果 

reverse  逆向播放 

alternate轮流播放    奇数正向  偶数逆向

简写方式：animation ：name duration timing-function  delay iteration-count  direction    前面两个必须给 

状态属性：animation-fill-mode播放前和播放后的状态  backwards 

动画播放前延迟时间内动画保持在第一帧的状态上 

forwards；动画播放后将保持在最后一帧的状态上 

3.both forward和backwards都有

暂停或播放的属性

animation-play-state：指定动画是属于播放还是暂停的状态上 

取值：  1.paused暂停    running播放 

{over-flow:hidden;

text-over-flow:ellipsis;

white-space:nowrap; ​

}