CSS

CSS初识

css是什么

css:Cascading Style Sheets 层叠样式表
用来定义页面元素的样式：设置字体和颜色，设置位置和大小，添加动画效果等

页面中使用css的方法

外链：<link rel="stylesheet" href="...">
嵌入：<style>...</style>
内联：<p style="margin:lem 0">example content</p>

css是如何工作的

浏览器加载HTML->解析HTML->加载CSS->解析CSS->添加样式到DOM树中的DOM节点，形成渲染树->展示页面

选择器Selector

作用

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素：

按照标签名/类名/id
按照属性
按照DOM树中的位置通配选择器: * {...}
标签选择器:p{...}
id选择器：给元素添加id属性，#+id属性值
类选择器：给元素添加class属性，·+class属性值
属性选择器：

<input value="zhao" disabled />
<style>
  [ disabled ] {
      background: #eee;
      color: #999;
  }
</style>

//属性值为一个特殊值时才选中
<input type="password" value="123456" />
<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

<a href="#top">回到顶部</a>
<a href="a.jpg">查看图片</a>
<style>
  a[href^="#"] {...} //href值以#开头会被选中
  a[href$=".jpg"] {...} //href值以.jpg结尾会被选中
</style>

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

伪类

不基于标签和属性定位元素
分类:

状态伪类：根据元素状态来选中元素
结构性伪类:在父级节点中的相对位置。E:first-child E:nth-child E:last-child或 E:first-of-type E:nth-of-type E:last-of-type等 nth-child(n),n可以是数字，关键字和公式 n是数字时，选择第n个元素，从1开始 n可以是关键字，even偶数，odd奇数 n是公式，从n=0开始计算，但是第0个元素或者超出了元素的个数会被忽略 2n偶数，2n+1奇数，5n（5，10，15，...），n+5从第五个开始（包括第五个）到最后，-n+5前五个（包括第五个）区别：nth-child会把所有的盒子都排列序号，执行的时候先看nth-child(n)，再看指定的是什么元素 nth-of-type会把指定元素的盒子排列序号，执行的时候先看指定的是什么元素，再看nth-child(n)

//状态伪类
<style>
  a:link {
    color:black;
  } //链接的默认状态字体黑色
  a:visited {
    color: gray;
  } //访问过后链接字体灰色
  a:hover {
    color: orange;
  } //鼠标悬停时链接字体橙色
  a:active {
   color: red;
  } //点击链接使其响应时字体红色
  :focus {
   ...
  } //哪个元素获取焦点后都应样式变化
</style>

伪元素选择器 ::before 在父元素内容的前面插入内容 ::after 在父元素内容的后面插入内容 element::before/after {} 伪元素选择器和标签选择器一样，权重为1 必须有content属性

组合

直接组合 AB 满足A同时满足B eg:input:focus
后代组合 A B 选中B,如果他是A的子孙 eg:nav a //选中nav下的所有a标签
亲子组合 A > B 选中B,如果它是A的子元素 eg:section > p
兄弟选择器 A ~ B 选中B，如果它在A后且和A同级 eg:h2 ~ p
相邻选择器 A + B 选中B,如果它紧跟在A的后面 eg:h2 + p
多个选择器设置相同的样式时，可将其放在同一个选择器组中

颜色

RGB

指定红、绿、蓝三原色数量多少（比例）来改变颜色，范围都是0~255
#8fac87 #开头，每两位分别是红、绿、蓝对应数量的十六进制表示
不足之处：颜色和对应编码难以记忆、关联

HSL

Hue:色相是色彩的基本属性取值范围0 ~ 360 红色值为0
Saturation:饱和度是色彩的鲜艳度值越大颜色越鲜艳取值范围0 ~ 100%
Lightness:亮度是颜色的明亮程度值越大颜色越亮取值范围0 ~ 100%

字体 font

font-family

多个值用,分隔，根据设备拥有的字体依次匹配

通用字体族

Serif:衬线体如Georgia、宋体
Sans-Serif：无衬线体如Arial、Helvetica、黑体、微雅软黑
Cursive:手写体如Caflisch Script、楷体
Fantasy:较夸张的有设计感艺术感的一些字体如Comic Sans MS、Papyrus
Monospace：等宽字体编程中编译器常用字体如Consola、Courier、中文字体 font-family值最后一定要加上通用字体族中一种，通常英文字体写在中文字体前

font-size

px像素，em、%都是相对父级元素的百分比

font-weight

取值100~900 值越大字体越粗
400-normal
700-bold
font-decoration:none //文字取消下划线
font-indent: 2em //首行缩进两个字的距离

line-height

行高取值无单位时行高为自身字体大小的多少倍 line-height和元素height值相同时可保证元素内容垂直居中

white-space

用于控制空白符，换行等

normal:默认将多个空格合并成一个空格展示
nowarp:强制不换行
pre:保留空格且保留换行
pre-wrap:保留空格，一行显示不下时会自动换行
pre-line:合并空格，保留换行

调试CSS

右键点击页面，选择'检查' 或者使用快捷键 Ctrl+Shift+I

深入理解CSS

选择器的特异度 Specificity

按#(id) .(（伪）类) E(标签)的顺序来比较
根据特异度不同可以进行一些属性的覆盖

背景

//装饰性的图片，一些比较小的图标或者比较大的展示图片用背景图片去做较为合适而不是<img>插入图片
background-color:背景颜色，默认值transparent(透明色),可根据16进制颜色值，或RGB,HSL设置颜色 background-image:url("images/logo.png") 设置为url路径下的背景图片, 默认值为none
background-repeat:no-repeat //背景图片不平铺，默认值为repeat,repeat-x:沿着x轴平铺(取决于宽度),repeat-y:沿着y轴平铺(取决于高度)

background-position:x y;//改变图片在背景中的位置,参数代表的意思是x坐标和y坐标，可以使用方位名词(top,center,bottom,left,right)或者精确单位(如10px,20%等)

若参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，如left top和top left效果一样
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标，第一个参数一定是x坐标，第二个参数是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

background-attachment:scroll/fixed //设置背景图像随着页面其余部分滚动还是固定，可用于后期制作视差滚动的效果
background复合写法：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

css特性

层叠性：相同的选择器设置相同的样式，此时一个样式就会层叠(覆盖)另一个冲突的样式。遵循就近原则来执行,只层叠发生冲突的属性。
继承性：某些属性会自动继承其父元素的计算值，除非显示指定一个值，一般font,color属性会继承。inherit关键字显示继承父元素某属性计算值。 font复合属性写法：``` font: font-size/line-height 字体。若行高是1.5这种时，子元素继承父元素时，行高是当前font-size的1.5倍。
优先级：!important(无穷大) > 行内样式style=""1000 > id选择器100 > 类、伪类选择器10 > 元素(标签)选择器1 > 继承或者*、>、+为0 注意：

子元素继承父元素，权重为0
对于a标签，浏览器默认指定了样式：蓝色，带下划线
复合选择器权重可以叠加，但没有进位，也就是说id选择器永远大于类选择器，无论多少个类选择器叠加，优先级也不会大于id选择器
一般来说，选择器越具体，优先级越高

都是继承的情况

div p {
  color: red;
}
.father {
  color: blue;
}
<div class="father">
  <p class="son">
    <span>文字</span>
  </p>
</div>

最终结果文字是蓝色。因为div p直接选中p，里面的文字单层继承，而.father需要两层继承

初始值

CSS中每个属性都有一个初始值，如background-color初始值transparent,margin-left初始值0
可以使用initial关键字显示重置为初始值

CSS求值过程

浏览器拿到HTML后将其解析成一个DOM树，将link/style等样式搜集起来形成样式规则，为了布局、渲染界面，遍历所有元素所有属性值；首先需要对页面规则进行筛选(filtering)：选择器匹配，属性有效，符合当前media等，拿到元素属性声明值（可能会有多个），然后层叠(cascading),根据来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值，得到了层叠值（层叠过程中优先级最高的值），当层叠值为空时使用继承或初始值(defaulting)，经过层叠和defaulting过程指定值唯一且不为空，将一些相对值或者关键字化成绝对值(resolving)（em转化为px,相对路径转化为绝对路径），此时得到计算值，将计算值进一步转换(formatting)（关键字，百分比等都转换为绝对值），得到使用值（浏览器进行实际布局时使用的值），constraining过程将使用值中小数转化为整数，最终得到实际值，即渲染时实际生效的值。

布局

三要素：盒子模型，浮动和定位

常规流：行级，块级，表格布局，FlexBox,Grid布局
浮动
绝对定位 tips:margin-left:auto margin-right:auto元素居中显示

盒子模型：

content、padding、border、margin

border:border-width border-style border-color border-width:一般以px为单位 border-style:实线还是虚线还是点线(solid/dashed/dotted) 可以四条边分开设置样式：border-top,border-bottom,border-left,border-right border-collapse:collapse; //相邻边框合并边框是会影响盒子大小的，盒子的实际大小应为宽/高加上双倍边框宽度
padding: padding: 5px，代表上下左右都是5px的内边距 padding: 5px 10px，代表上下5px内边距，左右10px内边距 padding: 5px 10px 20px,代表上5px内边距，左右10px内边距，下20px内边距 padding: 5px 10px 20px 30px,代表上5px,右10px，下20px,左30px的内边距（顺时针） padding也会影响盒子的实际大小，因为padding指定了内容和边框的距离;但是不指定盒子宽度/高度属性,padding不会横向/纵向撑开盒子
margin：外边距可以让块级盒子水平居中，盒子必须指定宽度，盒子左右的外边距都设置为auto 行内元素或者行内块元素水平居中，给其父元素添加text-align:center即可

块级 | 行级

块级：block,不和其他盒子并列放置，适用所有盒模型属性，可以设置高度和宽度外边距以及内边距，宽度默认是父级元素宽度的100%
行级：inline,和其他行级盒子一起放在一行或拆开成多行，盒模型中width height不适用,默认宽度就是它本身内容的宽度，行内元素只能容纳文本或其它行内元素
块级元素：生成块级盒子，body article div main section h1-6 p ul li等，display:block
行级元素：生成行级盒子，内容分散在多个行盒中，a span em strong cite code b i s u ins del等，display:inline
行内块元素：img input td，他们同时具有行级和块级的特点 display:inline-block

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流内(in-flow),常规流中的盒子在某种排版上下文中参与布局

行级排版上下文：IFC,盒子在一行内水平摆放，一行放不下就换行显示，text-align决定一行内盒子的水平对齐，verticle-align决定一个盒子在行内的垂直对齐，避开浮动元素
块级排版上下文:根元素，浮动、绝对定位、inline-block,Flex子项和Grid子项，overflow值不是visible的块盒，display:flow-root这些都会创建BFC,BFC内排版规则：盒子从上到下摆放,垂直margin合并，BFC内盒子的margin不会与外面的合并，BFC不会和浮动元素重叠行盒嵌套块盒时行盒会被块盒拆分
FlexBox:display:flex,可以控制子级盒子的摆放流向，摆放顺序，盒子宽度和高度，水平和垂直方向的对齐，是否允许拆行。对齐分为主轴和侧轴两个方向上，主轴方向上通过设置justify-content值，侧轴方向上设置align-items值。flexibility来设置子项弹性，flex-grow,flex-shrink,flex-basis,flex综合三个属性，flex:2 1 100px->flex-grow:2,flex-shrink:1,flex-basis:100px
Grid布局：网格布局，通过grid-template-colomuns和grid-template-rows改变网格划分的大小,通过指定grid-column-start,grid-row-start,grid-column-end,grid-row-end指定网格区域

外边距合并：

相邻块元素垂直外边距合并：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，它们之间的垂直间距是两个值中较大者解决办法：只给一个盒子添加下外边距或者上外边距
嵌套块元素塌陷：对于嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷二者值中较大的外边距值解决办法：
为父元素定义上边框,颜色取transparent（透明）
为父元素定义上内边距
为父元素添加overflow:hidden属性避免外边距合并（塌陷）问题 √ 浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距

*{
  margin:0;
  padding:0;
}

是css第一行代码行内元素只设置左右内外边距，不要设置上下内外边距，转换为块级和行内块元素后可以设置上下内外边距。

布局总结

标题用<h>，大量文字段落用<p> 给盒子起类名 margin和padding按需使用

圆角边框！！！

border-radius: length; 用于设置元素的外边框圆角，length为px或% 实现原理：以length为半径作圆，四个圆与边框的交集形成圆角，length越大弧度越大 length其实是简写属性，后面可跟一个两个三个四个不同的值赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角可分开写成border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius 常见使用场景：

正圆：正方形盒子(width=height)设置圆把border-radius数值修改成width/height的一半或直接写成50%
胶囊按钮：矩形盒子把border-radius数值修改成height的一半

盒子阴影！！！

box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]; h-shadow和v-shadow必需，分别为水平/垂直阴影的位置正（负）值水平向右（左）&垂直向下（上）平移 blur：可选模糊距离阴影虚实数值越大越模糊 spread：可选阴影的尺寸 color：可选阴影的颜色 css颜色值 inset：可选将外部阴影(outset)改为内部阴影因为默认是外部阴影但不能写outset 否则阴影失效 ！！！阴影不占用空间！！！

文字阴影

text-shadow: h-shadow v-shadow [blur] [color] 参数含义同上

浮动布局

传统网页布局：

标准流（普通流/文档流）标签按照规定好默认方式排列块级元素独占一行，从上向下顺序排列 div hr p h1~h6 ul ol dl form table 行内元素会按照顺序从左到右顺序排列 span a i em
浮动
定位

浮动使用场景：

让多个块级盒子水平排列成一行且盒子间无间距
实现两个盒子的左右对齐

网页布局准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
先设置盒子大小，再设置盒子位置

什么是浮动？

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘 选择器 {float: none/left/right;} 元素不浮动（默认值）/元素向左浮动/元素向右浮动

浮动特性！！！

浮动元素会脱离标准流（脱标），浮动的盒子不再保留原先的位置比如原来两个上下排列的块级元素，如果一个加float: left,另一个不设置float则会产生两个盒子叠加的效果
浮动的元素会一行内显示并且元素顶部对齐。浮动的元素间不会有缝隙，如果一行显示不下会另起一行按顺序浮动显示
浮动的元素会具有行内块元素的特性，可以直接给高度和宽度。块级盒子没有设置宽度默认和父级一样宽，但是添加浮动后，默认它的宽度由内容来决定浮动元素搭配标准流的父元素：先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置注意：一个盒子里面有多个盒子，其中一个盒子浮动了，其他兄弟也应该浮动浮动的盒子只会影响后面的标准流而不会影响前面的标准流

清除浮动

父级盒子不方便给出固定高度值，但是子盒子浮动脱标，父盒子高度就为0，不会被撑开盒子如果父盒子本身有高度则不需要清除浮动清除浮动后，父级会根据浮动的子盒子自动调整高度

选择器 {
  clear: left/right/both;
}

left：清除左侧浮动的影响 right：清除右侧浮动的影响 both：同时清除左右两侧浮动的影响一般使用clear: both; 清除浮动的策略：闭合浮动清除浮动的方法：

额外标签法（隔墙法） W3C推荐做法在最后一个浮动元素后面添加一个空标签，为这个空标签起一个类名，添加clear: both;属性要求新的空标签必须为块级元素
[父级]添加overflow属性给父元素添加overflow: hidden/auto/scroll，常用overflow: hidden
[父级]添加after伪元素

<div box clearfix></div> 
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear:both;
  visibility: hidden;
}
.clearfix {
  <!-- IE6、7专有 -->
  *zoom: 1;
}

[父级]添加双伪元素

<div box clearfix></div> 
.clearfix:before, 
.clearfix:after {
  content: "";
  display: table;
}
.clear:after {
  clear: both;
}
.clearfix {
  *zoom = 1;
}

定位

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式，边偏移决定元素的最终位置

定位模式：position: static/relative/absolute/fixed

static:静态定位，默认值，无定位的意思。静态定位按照标准流特性摆放位置，没有边偏移。
relative:相对定位，是元素在移动位置的时候相对其原来的位置偏移，不脱标，保留原来的位置
absolute：绝对定位，是元素在移动位置的时候相对其最近的非static定位祖先元素偏移，脱标，不再保留原来的位置
fixed:固定定位，固定于浏览器可视区的位置，脱标，不再保留原来的位置。应用场景：在浏览器页面滚动时元素位置不发生改变。跟父元素没有任何关系，不随滚动条滚动。
sticky: 以浏览器的可视窗口为参照偏移，保留原来的位置，必须指定top/bottom/left/right其中一个才有效。需要跟页面滚动搭配使用。兼容性差，IE不支持

边偏移： top 定义元素相对其参考位置上边线的距离 bottom 定义元素相对其参考位置下边线的距离 left 定义元素相对其参考位置左边线的距离 right 定义元素相对其参考位置右边线的距离

子绝父相：子元素使用绝对定位需要父元素采用相对定位，子元素使用绝对定位不会影响其他兄弟元素，父元素相对定位为了保留位置且限制子元素在父元素内定位
固定盒子在版心右侧：先让固定定位的盒子top:50%,再让其margin-left: 版心宽度的一半
定位叠放次序：z-index: auto（默认值）/正整数/负整数/0 数值越大，盒子越靠上。属性值相同则按照书写顺序，后来者居上。数字后面不能加单位。只有定位的盒子才有z-index属性
绝对定位的盒子居中：

水平居中：先让绝对定位的盒子left:50%,再margin-left: 盒子本身宽度一半取负值 //transform: translate(-50%)
垂直居中：先让绝对定位的盒子top:50%,再margin-top: 盒子本身高度一半取负值 //transform: translate(0,-50%)
垂直、水平都居中：left: 50%; top: 50%; transform: translate(-50%,-50%);//水平、垂直位移自己高度的一半，这样只需更改盒子宽度，而不用自己手动计算margin-left(top)值

行内元素添加绝对定位或固定定位可以直接设置高度和宽度
块级元素添加绝对定位或固定定位，如果不给宽度或者高度，默认大小是内容大小
绝对定位和固定定位的盒子不会引起外边距塌陷问题
绝对定位和固定定位的盒子会完全压住下面标准流所有的内容，但是浮动的盒子只会压住他下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
固定定位的盒子要给宽度

垂直对齐

vertical-align: baseline/top/middle/bottom; baseline 基线对齐，默认值 top 顶部对齐 middle 中部对齐 bottom 底部对齐处理行内块元素和文字对齐或行内块元素和行内块元素对齐都用vertical-align: middle;。

父级盒子只指定了宽度，为指定高度，内容为img，浏览器中显示父级盒子会比图片多出来一点，是由于img是行内块元素会基线对齐，多出来一块。解决方法为给img添加vertical-align: middle;或给img添加display: block;
让图片相对父盒子垂直居中显示：给父盒子添加line-height: 父盒子高度值，给img添加vertical-align: middle;
图片水平居中：给父级添加text-align: center;。因为浏览器解析行内块元素都当文字同理处理

光标样式

用于设置鼠标光标在元素上时显示的样式。cursor: default/pointer/text/move; default 默认值箭头 pointer 小手效果提示用户可以点击 text 工字形提示用户可以选择文字 move 十字光标提示用户可以移动

溢出部分显示效果

overflow: visible/hidden/scroll/auto; visible:默认值，溢出部分可见 hidden:溢出部分隐藏 scroll:无论是否溢出，都显示滚动条 auto:根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

场景：让某元素本身在屏幕中不可见。鼠标hover时显示

visibility: hidden 要显示时，指定visibility: visible;
display: none; 更常用要显示时，指定a:hover {display: block;} 区别： display隐藏元素后，不再占有原来的位置，且可以搭配js做很多网页特效，应用更广泛。 visibility隐藏元素后，继续占有原来的位置。

元素整体透明度

场景：让某元素整体（包括内容）一起变透明 opacity: 0~1之间的数字; 1:表示完全不透明 0：表示完全透明配合js做一些交互效果

CSS精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图优点：减少服务器发送/接收请求次数，减轻服务器的压力，提高页面加载速度使用步骤：

创建一个盒子，设置盒子的尺寸和要用的小图尺寸相同
将精灵图设置为盒子的背景图片 background: url(path);
修改背景图位置。通过测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y; 注意：精灵图的标签都用行内标签，如span b i等,然后转换display: inline-block;或display: block;。

CSS三角

.box {
  width: 0;
  height: 0;
  <!-- 需要哪个方向的三角就让其他三个方向边框颜色transparent -->
  border-top: 10px solid pink;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

表单相关

outline: none;,取消输入时默认的蓝色外框线 resize: none; ,防止文本域被拖拽

溢出文字省略号显示

单行文字

先强制一行内显示文本：white-space: nowrap;
超出的部分隐藏：overflow: hidden;
文字用省略号代替超出的部分：text-overflow: ellipsis;

多行文字

overflow: hidden;
text-overflow: ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display: -webkit-box;
<!-- 限制在一个块元素内的显示的文本的行数 -->
-webkit-line-clamp: 2;
<!-- 设置或检索伸缩盒子对象的子元素的排列方式 -->
-webkit-box-orient: vertical;

布局技巧

margin负值应用：解决浮动的盒子边框重叠问题：

让每个盒子margin往左侧移动-1px，正好压住相邻盒子边框，边框是几px就margin-left负几px
鼠标经过某个盒子时，提高当前盒子的层级。如果没有定位时就给添加position: relative;。有定位时让当前盒子z-index: 1;

文字围绕浮动元素：浮动可以实现文字环绕效果，给装图片的盒子添加float属性即可实现文字环绕。

CSS3盒子模型

box-sizing: content-box/border-box; content-box盒子大小为width+padding+border。默认值 border-box盒子大小为width

图片模糊处理

filter: blur(5px); 对元素做blur模糊处理，数值越大越模糊 filter: 函数;可以将模糊或颜色偏移等图形效果应用于元素

calc函数

声明CSS属性时执行一些计算 eg.width: calc(100% - 30px); 让子盒子永远比父盒子小30px 括号里可以使用+ - * /进行计算

CSS3新增过渡属性transition

实现过渡动画效果：从一个状态渐渐过渡到另一个状态。常搭配:hover使用 transition: 要过渡的属性花费时间运动曲线何时开始; 过渡属性：想要变化的CSS属性，所有属性都需要的话写all 花费时间：单位是秒s，必须写单位运动曲线：默认是ease，可以省略。linear（匀速）/ease（逐渐慢下来)/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）何时开始：单位是秒s，必须写单位。可以设置延迟触发时间，默认是0s，可以省略 eg.

div {
  width: 200px;
  height: 100px;
  backgroundcolor: pink;
  transition: width .5s ease 1s;
}
div:hover {
  width: 400px;
}

eg.transition: width .5s ease 1s, height .5s ease 1s;或transition: all .5s ease 1s;

CSS | bit笔记

CSS