html, css
| html 是一种标记语言，标记语言是一套标记标签。************ |
|---|
| HyperText:图片,标题,链接,表格MarkupLanguage:文章标题 |
超文本：可以加入图片，多媒体。可以跳转。
margin和padding设置百分比，都是相对父元素的宽度而言
Doctype作用? 此标签可告知浏览器文档使用哪种 HTML或 XHTML规范，不指定的话，会以比较老旧的，怪异模式去渲染
data**-** 为 H5 新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 ****dataset属性获取， 不支持该属性的浏览器可以通过getAttribute 方法获取 :
src 是 source 的缩写，指向外部资源的位置 ，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。
href 是 Hypertext Reference 的 缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档 （链接）之间的链接，如果我们在文档中添加
组件库尤其要注意语义化，比如ui组件库支持键盘操作， serverworker也可以实现离线存储CascadlingStyleSheets层叠样式表
Alt用于图片无法加载时显示 。
Title为该属性提供信息，通常当鼠标滑动到元素上的时候显示
2, 说说选择器
4，使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。哪两种
5 ， ****浮动的作用，特点，为什么要清除浮动
6 ， 清除浮动
7 ， grid
8, 浮动，absolute, fixed都不会发生外边距合并和塌陷的问题
9，visibility（图片，表单跟文字的对齐方式是基线对齐）
14 ： 对盒模型的理解
| 15 ： BFC************ |
|---|
| 16: ， em, rem trasition, animation******** |
| 17 ： 三角及高级三角************ |
| 18 ： line-height如何继承************ |
| 19 ： 显示继承************ |
| 20 ： 网页视口尺寸******** |
| 21 ： flex******** |
| 22 ： Line-height和vertical-align的区别************ |
| 23 ： 三角及高级三角************ |
| 24 ： 水平垂直居中******** |
| 25 ： 三栏布局************ |
27 ： link和@import
| 28 ： css动画和js动画************ | |
|---|---|
| 29 ： 重排和重绘************ | |
| 30 ： 对WEB标准以及W3C的理解与认识?************ | |
| 31 ： 介绍一下你对浏览器内核的理解？******** | |
| 32 ： 用浮动时产生的问题（高度塌陷）************ | |
| 33 ： 上下定高，中间自适应******** | |
| 34 ： DOM树******** | |
| 35 ： input的新属性************ | |
| 36 ： 引用标签，em, storage************ | |
| 37 ： 纯css画一个宽度是父元素一半的正方形************ | |
| 38：css实现div高度自适应（css如何让页面div高度一致，小的适应大的） | |
| 39: meta************ | |
| 40 ： 伪类，伪元素******** | |
| 41: dom解析和js解析会阻塞dom渲染吗？************ | |
| 42 ： 如何显示小于12px的字体******** | |
| 43 ： css中哪些属性能被继承******** | |
| 44 ： js怎么获取元素************ | |
| 45 ： transition, trasform************ | |
| 46 ： css动画******** |
1
行内。span,a, strong，em。 宽高自己， 不能设置宽高， maigin和padding的left有效， top无
效
块级， div,h1-h6,p,ul,ol,li 默认宽度父元素100%，高度元素本身。不能直接top,使用top必须有定位。maigin和padding的left，top有效. maigin和padding的right，bottom无效.
行捏快,img,input, td maigin和padding的left, top有效
| 行内无效行内快input{width:100px;height:20px;margin: auto; //无效}块级元素：div{width:100px;height:20px;margin: auto; //水平居中} |
|---|
多个元素设置float不为none时， 会一排并列显示，行内块可以设置宽高。
多个元素设置position为absolute，fixed时， 会叠起来。行内块可以设置宽高。
定位 ( 给块级元素 absolute,fixed 以后。变为了行内块，宽 度变为了内容宽度。而 relative 不变 ) 浮动也是
当absoluet以后，宽度不设置，为内容宽度。设置了就不变同时给定left和right以后，就为剩余的了。同时给定top, bottom也满足
div {backgroung-color:blue}
div {backgroung-color:blue position: absolute}
div {backgroung-color:blue position: absolute
left:100px;}
div {backgroung-color:blue position: absolute
left:100px;
right:100px}
这是因为浮动和absolute,fixed脱离了文档流，不占据位置了。
千万不能给body设置absolute，这样整个页面都会出问题
static：默认值，元素没有开启定位
绝对定位，fixed后，可以使用top,bottom,left,right。如果没有祖先元素，则以document为主如果祖先元素有定位（relative， absolute， fixed），则以最近的为主。
只有定位元素才有 z-index
该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。
固定定位：固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动，
相对定位后，可以使用top,left。不能使用bottom和right。因为他还是在文档流里的该元素相对于自己原有位置，偏移一定距离。相对的是自己。
这也就是为什么子绝父相给子设置。
设置了宽高的块元素浮动或者定位，宽高不变
没设置宽高的块元素浮动或者定位，宽高变为内容本身。但此时设置宽高，就变成设置的宽高
2
选择器是 CSS规则的一部分且位于 CSS声明块前。
三大特性
继承性
子类继承父类
color, font开头，line开头， text开头可被继承
层叠性
子元素定义了和父元素相 同的属性，那么父类的会被子类覆盖，继承子类的。
优先性
选择器类型： id> 类 > 标签
样式表来源：内联 > 内部 > 外部
选择器可以被分为以下类别：
. 普通选择器（Simpleselectors）：用的比较多的是标签，类，id。优先级逐渐增加，这是因为id就好比身份证，一个标签只能有一个。针对具有相同样式的标签，可以设置相同的类，将样式写在类里，减少代码量。
. 伪类（Pseudo-classes）：link, visited,hover, active。f:first-child，f:nth-child(n)。匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM树中一父节点的第一个子节点。
| link:向未访问的连接添加样式visited:向已访问的连接添加样式hover:鼠标悬停在连接上添加的样式active:鼠标介于按下与松开之间的状态时 |
|---|
. 伪元素（Pseudo-elements）: after,before。匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
. 组合器（Combinators）：a,b 并集选择器. ab 直接組合，满足a的同时满足b
. ab 后代选择器
. a>b 子选择器
. a,b 并集说一下权重
!important
内联 1111
id 0111
类，伪类，属性 0011
元素，伪元素，标签 0001通配，继承
3
| *{margin: 0;padding: 0;list-style:none; } |
|---|
4
1.相邻块元素垂直外边距的合并
2.嵌套块元素垂直外边距的塌陷
5
作用：改变盒子的默认的排列方式，例如：让多个盒子排在一行，或者实现2个盒子左右排列。特点
1.浮动元素会脱离标准流(脱标)
2.浮动的元素会一行内显示并且元素顶部对齐
3．浮动的元素会具有行内块元素的特性.
- 什么元素都能浮动。行内元素浮动就可以设置宽高。
为什么
1 父盒子高度不方便确定，子盒子浮动又不占位置，导致父盒子height为0
2 子元素浮动，影响了下面的元素
6
| 2.qq{clear:both }<divclass='qq'> 3父元素::after{content:''height:0display:blockclear:both } |
|---|
7
constContainer=styled.div`
display: grid;
grid-template-rows: 6rem1fr 6rem;
grid-template-columns: 20rem 1fr20rem; grid-template-areas:
'headerheaderheader''navmainaside'
'footerfooterfooter';
grid-gap: 10rem(定义每一款之间的距离)
height:100vh;`;
分为容器和项目
容器
grid-template-row: 表示每一行的行高
grid-template-column: 表示每一列的列宽
1
grid-template-row: repeat:(2, 100px,20px) 等价于grid-template-row:100px,20px,100,20
2
grid-template-columns: repeat(auto-fill, 100px);
上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
3
fr：剩余
项目
设置一人一份
设置一人多份
要考虑，是一维布局还是二维布局
一般来说，一维布局用fLex,二维布局用grid
2.是从内容出发还是从布局出发?
从内容出发:你先有一组内容(数量般不固定) ,然后希望他们均匀的分布在容器中，由内容自己的大小决定占据的空
从布局出发:先规划网格(数量一般比较固定)，然后再把元素往里填充从内容出发，用flex
从布局出发，用grid
8
9
visible,,hidden
10
11
12
| /* 未访问的链接*/a:link{color: #FF0000;}/已访问的链接/a:visited{color: #00FF00;}/鼠标悬停链接/a:hover{color: #FF00FF;}/已选择的链接/ //按住不松开时a:active{color: #0000FF;}f:first-child // 父元素的第一个子元素f:nth-child(n) // 第n个 |
|---|
伪元素， before,after
伪元素，css给你提供了一种在页面上增加额外的元素，而不需要改变html结构的方法。或者是提供普通选择器无法选中元素的元素
13
HTML5 指的是包括 HTML 、 CSS 和 JavaScript 在内的一套 技术组合。它希望能够减少网页浏览器对于
需要插件的丰富性网络应用服务
1）增加了audio和video音频播放，抛弃了Flash
2）新增了canvas画布（绘画，制作动画（如小游戏开发等））
3）地理定位
4）增加了离线缓存
6）WebSocket（全双工通信）
7）增加了本地存储
8）新增了一些语义化标签，解决span和div没有语义的问题
语义化优点：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
border-radius，box-shadow
CSS3背景如background-size，background-origin等；
CSS32D，3D转换如transform等；CSS3动画如animation
14
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
content
padding
border
margin
默认w3c盒模型
W3C盒模型(标准盒模型)也就是box-sizing为content-boxwidth和height指的是内容区域的宽度和高度；
盒子的真实范围 = 宽度 + 左内边距 + 右内边距 +左边框+右边框
IE盒子模型（怪异盒模型）就是border-box,
width和height指的是内容区域、边框、内边距总的宽度和高度。
15
-
什么是BFC：BFC是BlockFormattingContext，块格式化上下文的缩写，简单的说BFC是一个完全独立的空间,这个空间里子元素的渲染不会影响到外面的布局。
-
如何创建：
| display: flex,griddisplay: inline-blockfloat: 不为noneoverflow: 不为visibleposition: absoluteposition:fixed |
|---|
3.BFC解决的什么问题?
1.清除浮动
1.垂直方向margin重叠的问题。
⒉.使用Float脱离文档流，父元素高度塌陷问题。
16
em是相对父级或自身的，rem相对根元素root
trasition一个点到另一个的，时间，快慢animation，连续
17
三角
| .a{width: 0;height: 0;border: 10pxsolid;border-color:red transparenttransparenttransparent;}<divclass='a'> |
|---|
三角高级
| .a{width: 0;height: 0;border-style: solid;border-width: 22px8px00;border-color: transparentred transparenttransparent;}以上的代码由下面的逐渐演化border-top: 10pxsolidred;border-right: 10pxsolidyellow;border-bottom: 10pxsolidblue;border-left: 10pxsolidblack;1，bottom变为02，top变为203，left变为04，top变为transparent |
|---|
18********
20********
21********
align-item 和 align-content 的区别
当主轴水平时, align-item只能设置只有一行的元素。而align-content可以设置多行的元素（也就是有换行）
以上都是在父亲上设置属性。下面的是在子元素里设置属性
flex( 很重要 )********
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
flex也是伸缩布局。
向上面的案例，缩小页面1，2，3都会成比例缩放。非常适合移动端。
· flex**-**grow
默认为0： 如果有多余空间，也不会放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
· flex**-**shrink
默认为1： 即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
· flex**-**basis
设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸
浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定
flex:1和 flex:auto的区别，可以归结于flex-basis:0和flex-basis:auto的区别
当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸
当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑
22********
line-height 只能设置一行的居中，而vertical-align可以设置多行居中
23
| .qq{height:0width: 0border:1pxsolidborder-color:redtransparenttratra}.qq{height:0width: 0border-style:solidborder-color: transparentredtransparenttransparentborder-width: 22px8px00} |
|---|
24
行内元素
| .w{width:200px;height:50px;border: 1pxsolidred;text-align: center;line-height:50px; }<divclass="w"><spanclass="qq">fsdfsf |
|---|
块元素
父子
border: 1pxsolidred;
}
.small{
position: absolute;
width:100px;
height:100px;
background-color: blue;
top: 50%;
left:50%;
margin-top: -50px; //移动自身的一半
margin-left:-50px;
}
// marginauto(定宽高)
.big{
position:relative; }
.small{
position: absolute;
width:30px;
height:30px;
left:0;
top: 0;
bottom: 0;
right:0;
margin: auto;
// 不定宽高 transform
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
// 不定宽高 flex
一：
.big{
/* 转为flex弹性布局盒*/
display:flex; }
.small{
margin: auto;
二：给父元素设置
单独
| 前三种可以，只需要给自己设置position: absolute flex不行，不能单独用 |
|---|
25
//position
*{
margin: 0;
padding: 0;
}.zuo{
position: absolute;
left:0;
width:50px;
background-color: yellow; }
.you{
position: absolute;
left:50px;
right:50px;
background-color:red; }
.zhong{
position: absolute;right:0;
width:50px;
background-color: yellow; }
// flex
*{
margin: 0;
padding:0; }
.da{
display:flex; }
.zuo{
width:50px;
background-color: yellow; }
.you{
flex:1;
background-color:red; }
.zhong{
width:50px;
background-color: yellow;
26
// float
*{
margin: 0;
padding:0; }
.zuo{
float:left;
width:50px;
background-color: yellow; }
.you{
float:left;
width: calc(100%-50px);
background-color:red;
}
<divclass="da">
<divclass="zuo">1
<divclass="you">3
//position
.zuo{
position: absolute;
width:50px;
background-color: yellow; }
.you{
background-color:red;
}
// flex
27
link和import引入css的区别
link属于XHTML标签，而@import完全是css提供的一种方式
1@import只能加载CSS，而link标签除了可以加载css外，还可以做很多其他的事情；
2 加载顺序的差别：当一个页面被加载的时候， link引用的CSS会同时被加载；而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会有闪烁；
28
. js的范围大
. css实现比js简单
css向下兼容，天然时间支持
29
重绘：background-color(背景色)，border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次
引起原因
添加删除元素页面缩放
元素尺寸改变
减少重排的方法
. 不要一条一条地修改 DOM的样式。可以先定义好 css的 class，然后修改DOM的 className。. 将多次dom查询合并成一次处理。
使用BFC特性，不影响其他元素位置
. 频繁触发(resizescroll)使用节流和防抖
优化动画，使用CSS3和requestAnimationFrame . 使用fragment
display:none;和visibility:hidden; 都会产生重绘
display:none; 还会产生一次回流
30
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、
文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，
容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要 复制内容、提高网站易用性。
31
主要分成两部分：渲染引擎 (layout engineer 或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（ HTML 、 XML 、图像等 等）、整理讯息（例如加入 CSS 等 ）， 以及 计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的 应用程序都需要内核。
JS 引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染 引擎。
32
一：高度塌陷
一个父盒子没有给定宽高，而是由子元素撑开父盒子，这样就不用计算，是父盒子额完全包裹子盒子而没有浪费空间。
但是，此时让子元素浮动，就会导致父元素高度塌陷，就会导致父元素之下的所有元素，都会因此而向上移动，这样会导致页面混乱。不利于页面布局。因为浮动是脱离文档流的，浮动后高度就不存在了。
为此可以为父元素开启bfc，或者使用清除浮动的方法
二：外边距重叠
33
bottom:100px;
background-color: aqua; }
.z{
width:100vw;
position: absolute;
bottom: 0;
height:100px;
background-color:red; }
<divclass="w">
<divclass="q">
<divclass="a">
<divclass="z">
二： flex
.w{
display:flex;
flex-direction: column;
height:100vh;
}
.q{
height:100px;
background-color:red; }
.a{
flex:1;
background-color: aqua; }
.z{
height:100px;
background-color:red; }
三：fixed .a{
width:100vw;
position: fixed;
top: 0;
height:20px;
background-color:red; }
.b{
width:100vw;
position: fixed;
top: 20px;
| bottom:20px;background-color: aqua; |
要尤其注意，div里面什么都不写的话，必须指定宽高以及背景色才能显示出来。
div里写了的话，指定背景色后宽度100%，高度为内容本身， position和float以后，宽度就为内容本身了。
34
35
| <inputtype="button">， 现在直接 |
|---|
36
37********
38
有时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。
在一般情况下，使用 min-height 即 可解决。
如果无效，那一定是有容器嵌套的情况下，而子容器又是浮动的。需要清除浮动。
39
HTML中meta标签的作用
首先，meta标签是一个自结束标签，其格式为<meta…/>，下面介绍meta标签的作用：\1. 规定字符集
HTML规定解码字符集为UTF-8， 此句为了防止乱码， UTF-8字符集支持 地球上所有的文字，而中文系统默认编码是GB2312，产生乱码的根本原因是编码和解码采用的字符集不同。
\2. 设置网页关键字
其中name属性值为’keywords’，content属性值是你想为网页设置的关键词，可以为多个。\3. 指定对网页的描述
其中name属性值为’description’，content属性值是你想为网页设置的描述，一般为一句话。
40
伪类：当已有元素处于某个状态时，为其添加对应的样式。l vhao,
nth-child(n), 从一开始计数，odd奇数，even偶数first-child
伪元素：用于创建一些不在html中的元素，减少不必要的dom渲染时间。::before, ::after
41
HTML解析文件，生成DOMTree，解析CSS文件生成CSSOMTree将DomTree和CSSOMTree结合，生成RenderTree(渲染树)
根据RenderTree渲染绘制，将像素渲染到屏幕上。
从流程我们可以看出来
DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。
42
使用缩放transform:scale()，使用较为广泛
优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好
font-size：12px；
给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；如果要设置8px，那就是8/12=0.66666
43
1，font-size, font-family, font-style
2, text-align, line-height
3, visibility,
44
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）通过类名（getElementsByClassName）
获取html的方法（document.documentElement）获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
45
transition: 过渡 ( 谁过渡给谁加 )
| transition::要过渡的属性花费时间运动曲线何时开始;1.属性 ︰ 想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。2花费时间:单位是秒(必须写单位）比如0.5s3.运动曲线:默认是ease(可以省略)4.何时开始 ︰ 单位是秒(必须写单位）可以设置延迟触发时间默认是0s(可以省略) |
|---|
ease: 逐渐慢下来。
linear: 匀速。
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速后减速
transform: 转换（变形， 2D ）
translate: 移动
rotate: 旋转
scale: 缩放
translate
| transform: translate(x,y);或者分开写transform: translatex(n);transform: translateY(n); |
|---|
定义2D转换中的移动，沿着X和Y轴移动元素
. translate最大的优点︰不会影响到其他元素的位置
. translate中的百分比单位是相对于自身元素的。translate:(50%,50%); 对行内标签没有效果
transform : rotate( 度数 )
. rotate里面跟度数，单位是deg比如rotate(45deg) 角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点·
transform-origin ： 转 换中心点
我们可以设置元素转换的中心点
| transform-origin: xy; |
|---|
注意后面的参数x和y用空格隔开
. xy默认转换的中心点是元素的中心点(50%50%)
. 还可以给xy设置像素或者方位名词( topbottomleftrightcenter )
transform : scale(x,y) ;
注意其中的x和y用逗号分隔
. transform:scale(1,1):宽和高都放大一倍，相对于没有放大
. transform:scale(2,2):宽和高都放大了2倍
· transform:scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
. transform:scale(0.5,0.5):缩小
. sacle缩放最大的优势︰可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。即使往下，也不会影响下面的元素
直接修改宽高的话，宽往两边扩，高往下阔，会影响下面的盒子。
2D 转换综合写法
注意:
1.同时使用多个转换，其格式为:transform: translate()rotate() scale()...等
2.其顺序会影转换的效果。 (先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
2D 转换总结************
转换transform我们简单理解就是变形有2D和3D之分我们暂且学了三个分别是位移旋转和缩放
2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子设置转换中心点transform-origin: xy;参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
46
| 制作动画分为两步 ∶1．先定义动画2．再使用(调用）动画用keyframes定义动画(类似定义类选择器)@keyframes动画名称{0%{width:100px; }100%{width:200px;}}元素使用div{width:200px;height:200px;//调用动画animation-name: 动画名称；//持续时间animation-duration: 持续时间；} |
|---|
动画序列
. 0%是动画的开始， 100%是动画的完成。这样的规则就是动画序列。
. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种祥式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数. 请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%
各种属性
动画简写属性
animation: 动画名称 持续时间运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
. 简写属性里面不包含animation-play-state
. 暂停动画: animation-play-state:puased;经常和鼠标经过等其他配合使用. 想要动画走回来，而不是直接跳回来:animation-direction: alternate
. 盒子动画结束后，停在结束位置: animation-fill-mode: forwards
47
| 定位, 盒子的外边距, 2d转换移动48 | |
|---|---|
| 49******** | |
| 50******** | |
| 51******** | |
| 52******** |
