网页是怎么形成的？
网页通过浏览器才能访问阅读
网页是网站中的一页
文件扩展名.html
html是什么？
html是用来描述网页的一种语言。
html指的是超文本标记语言（Hyper Txet Markup Language）
html不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
第一课总结 1网页是前端开发人员写的，通过浏览器转成普通人眼中的美丽页面
2网页的扩展名是.html
3html使用标记标签来描述网页，包含视频 音频 图片 等等
w3c万维网联盟 World Wide Web Consorium 成立时间1994年10月
web网页的组成部分 HTML结构（w3c制订了结构html的语法、标准）
css表现（w3c制订了表现css的语法、标准）
js行为（w3c、ecma制订了行为标准）w3c dom、ecmascript
html的基本语法
1 常规标记 也叫双标记
<标记> </标记>
<标记 属性=”属性值“ 属性=”属性值“></标记>
标记也可叫标签或叫元素
例如：<head></head>
2空标记也叫单标记
<标记/>
<标记 属性=”属性值“/>
例如<br/ >
文档声明与字符编码
<!DOCTYPE***>
<!DOCTYPE html> 是特殊且固定的文档声明标签
<html lang="***"> ***代表语言
<meta charset="****"> 字符编码
一.语义是什么 2.常用标签
1.<h1></h1>----<h6></h6>标题标签 文本标题标签自带加粗 有自己的文本大小 并且独占一行 有默认间距 block 只能是文本块
2.段落文本 <p>段落文本内容</p> 表示一个段落（段落与段落之间有段间距）block 文本块
3.换行 </br>换行是一个空标签（强制换行）
4.水平线</hr>空标记
5.加粗有两个标记（推荐strong） <b>加粗内容</b>只是加粗内容
<strong>强调的内容</strong>突出的文本
6.倾斜有两个标记（推荐em）
<em>强调文本</em>
<i>倾斜文本<i>italic
7.删除线有两个标记（推荐del）
<s>文本</s>删除线
<del>文本</del>删除线
8扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
</hr> color颜色 widtg=300px宽度 align=right对齐方式 noshade取消阴影
特殊符号
尖角号 <左尖角号 >右尖角号
空格  受字体影响 &emsp 一个中文宽度不受字体影响
版权©
商标&trade； ®
div和span标签
div标签，没有具体意义，用来划分页面的区域，独占一行。
span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
列表-有序列表
无序列表 有序列表 自定义列表
有序列表 li里面可以随意放置标签，但是ol里面只能放置li。 数字是自动生产的。type：1 a A i I start：取值只能是一个数字
无序标签 ul里面只能放li，li里面可以放其他标签。 默认的是黑色的实心圆。 type= disc circle square none（用得多）
自定义列表 dl dd dt
超链接
table表格的基本结构 table 里 只能放tr tr里只能放td
table>thead>th*n +tbody>tr>td
table表格合并列 合并列clospan 合并行rowspan
table表单标签 作用 收集用户信息 form
table表格属性:align border cellpadding cellspacing width/height
td和th的属性：width,height,align,valign="middle"
css的运用
css的引用 内部引用 外部引用 行内引用 <style></style> <link rel="stylesheet" href="地址" name="text/css" >
伪类选择器 语法：a：link 表示超链接的初始状态，a：visited 表示超链接被访问后的状态，a：hover 表示鼠标停留未激活时的状态， a：active 表示鼠标激活时的状态。
css的选择器 元素选择器 id选择器 class选择器 后代选择器 群组选择器 伪类选择器
选择器的权重 当元素属性发生了冲突 会选择权重高的来执行!importang＞内行样式＞后代选择器＞id选择器＞class选择器＞元素选择器。相同的选择符会选用就近原则。
css文本属性 font-famliy文本类型 font-size文本大小（size=1-900px） font-weight文本粗细（常用bold 加粗的意思） font-style文本风格 （oblique倾斜 italic也是倾斜的意思） color颜色
text-align 文本对齐方式 （text-align：left；靠左 ，text-align：right；靠右 ，text-align：center；居中 ，text-align：justify；水平两端对齐，但是只对多行起作用。）width 文本宽度
height 文本行高 line-height. Font-family:'Times New Roman', Times, serif;多个字符要加引号，单个字符不需要 swshf斜庞大高样
css文本间距 letter-spacing 字体间距 word-spacing 字符间距 （字体多用于汉字 字符间距多用于单词） text-indent 首行缩进 只对第一行起作用 em（针对了修改了字体size的属性值单位）
css文本修饰 text-decoration 属性值 none 默认 删除线， underline 下划线， line-through 中划线， overline 上划线。
css文本大小写 text-transform 属性值 none 默认，uppercase 大写，lowercase 小写，capitliaze 每个单词的首个字母大写。
css列表属性 list-style-type：属性值（dics实心圆，circle空心圆，square实心正方形，none不显示） list-style-image：url（地址）；设置图片到列表。 list-style-position： （insider，outsider 设置图片在文本框内部或者外部） list-style： none url（地址）insider； 列表属性简写 不分前后。
css背景属性 background-color： 属性值（rgb，rgba，或是16进制）： 背景颜色，a为透明度。
css背景图片 background-repeat： 属性值（repeat-x，repeat-y，no repeat）图片在框架内的平铺效果 x为x平铺效果 y为y轴平铺效果 no repeat为没有平铺效果 background-position：属性值（px，百分比%，上下左右left center right top bottom）；background-size:contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白
css固定和滚动 background-attachment：scroll(滚动)/fixed（固定，固定在浏览器窗口里面。设置到盒子里 只固定在盒子内 ） ；
背景属性复合写法 background：url(地址) nopeat center yellow (background-size 只能单独使用 顺序可以改变 可以只取一个值 但是之前的会被覆盖)
浮动属性 float：left 左浮动 float：right 右浮动 float：元素不浮动 作用 让竖着的东西横过来 例如独占一行或一块儿区域的元素 div p等 还可以让文本 文字 环绕该元素
浮动元素不占据位置，不计算高度，若父元素没有高度的话，就会高度塌陷
解决高度塌陷（4个方式）
1.给父元素高度就OK了
2.添加一个子元素然后在子元素属性上清除前面浮动造成的不计算高度造成的影响
3.给父元素加overflow属性，为hidden，触发BFC机制，让父元素自动计算高度
4.添加伪元素，浮动元素父元素加伪元素
.father::after{
content:"";
display:block;
clear:both;
}
清除浮动属性 clear：none；允许有浮动对象 right；不允许有右浮动对象 left；不允许有左浮动对象 both；不允许有浮动对象。（清除浮动只是改变元素的排列方式）
盒子模型内边距 padding：px；（内边距 一个值代表上下左右四个值，两个值代表上下 左右，三个值代表上 左右 下，四个值代表上 右 下 左 顺时针方向） padding-方向（top left rgiht bottm）：px；可以设置方向。 盒子中想要盒子和内容之间形成距离使用padding：px；*｛padding：0px；｝清理默认的内边距。
盒子模型边框 border：px solid color； （solid 边框样式 double dashed dotted） 背景色能蔓延到边框。可以拆分写法 border-width：10px 方向 ； border-style：；border-color：；
盒子模型外边框 margin；px方向； margim-top(left,bottom,right):px; 背景色不会蔓延 *｛margin：px；｝表示所有的外边距。盒子屏幕居中 margin：0 auto；表示横向居中。 支持取负值
margin特性 两个盒子兄弟关系，两个盒子垂直外边距与水平外边距问题。垂直方向两个盒子的外边距取最大值。
水品方向，外边距合并。
两个盒子父子关系，两个盒子重叠时使用padding-top，注意高度计算。给父盒子设置边框border。
加浮动float也可以
overflow： hidden.flaBFC,
ps工具 ctrl+r 标尺，
溢出属性 overflow：visible/hidden（隐藏）/scroll/auto（自动）/inherit；
visible：默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll： 滚动，溢出内容以滚动方式显示
auto： 如果有溢出会添加滚动条，没有溢出正常显示
inherit：规定应该遵从父元素继承overflow属性的值
overflow-x：X轴溢出 overflow-y：Y轴溢出
溢出属性：空余空间
white-space：normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略
nowrap：文本不会换行，文本会在同一行上继续，知道遇到<br/>标签位置
<pre>预格式化文本-保留空格，tab，回车符。</pre> white-space: pre;
white-space: pre-wrap;
nowrap: 不换行； pre；显示空格，回车，不换行； pre-wrap：显示空格，回车，换行； pre-line：显示回车，不显示空格，换行。
省略号显示
text-overflow：clip/ellipsis
clip：默认值，不显示省略号（...）
ellipsis：显示省略标记；
当单行文本溢出显示省略号需要同时设置一下声明
1.容器宽度：width200px
2.强制文本在一行内显示：white-space：nowrap；
3.溢出内容为隐藏：overflow：hidden；
4.溢出文本显示省略号：text-overflow：ellipsis；
元素属性显示-块元素：
display： block；
display： list-item;
p标签放文本可以，不能放块级元素。
行内元素和行内块元素
行内元素 display: inline;
行内块元素 display：inline-block；
display:none ”的意思是设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。
盒子模型
span行内元素 只能设置左右边距 不能设置上下边距
行内块支持边距
元素类型转换
定位属性 position
position：static； 默认
position：absolute；绝对定位 文档流：（脱离）。偏移位置：当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏；有父元素且父元素有定位，父元素。 ”子绝父相“
position：relative；相对定位 文档流：（不脱离）。偏移位置：自己的初始位置。向自己加的属性值反方向移动。
position：fixed。固定定位（脱离）。偏移位置：自己的初始位置。
position：sticky；粘性定位 。 偏移位置：可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好。
opacity（透明度0-1）
三角形
必须设置宽高且都为0
span{
width: 0;
height :0;
border: px solid transparent;
border-方向：px solid color;
}
定位层级
当两个盒子定位元素相同且有相交的部分时 遵循就近原则 就近的会进行覆盖
z-index:数字； 设置层级，数字越大层级越大，越靠上显示。可以设置负值。
绝对定位的深入探索
父子关系的绝对定位 由于给父级设置Z-index无效 所以可以给子元素设置负数的层级设置，使其被覆盖。
兄弟关系依照就近原则，可以使用层级设置控制。
设置绝对定位可以将改元素改变为块级元素，浮动也可以，或是直接改变使用display元素。
定位控制元素水平垂直居中
给盒子设置绝对定位且属性值为上左各50%，再减去盒子一半大小的外边距，且外边距方向与定位属性值相同。
第二步也可以是用动画里面的转化tranform:tranlasition(-50%,-50%)
浮动与定位的区别
浮动属于半脱离，文字会环绕不会被遮挡。
绝对定位属于全脱离，文字会被遮挡。
锚点
实现当前页面跳转 <a href="#锚点名字"></a><div id:"锚点名字"></div>
精灵图/雪碧图
将导航图片，按钮背景图片等合并成一张图片，再利用backgr-position实现位置定位。可以减少对服务器的请求次数，从而提高加载速度。
自适应宽高
希望元素大小跟着子元素或窗口进行变化，这就叫自适应。
宽度自适应width值设为auto或者不设置，高度同理。
min-height最小高度表示高度最低不能低于设置的值。
min-width最小宽度
max-height最大高度表示高度最高不能高于设置的值，如果值大于最大高度那么将会溢出。
max-width最大宽度
浮动元素之父元素高度自适应
解决盒子父盒子高度塌陷问题，可以给父盒子设置一个高度，但是浮动过多换行会出现问题。
设置一个空盒子加上clear：both；也可以解决,但是会增加一个空标签，降低反应速度，加负荷。
给父元素添加overflow：hidden； 但是会隐藏溢出的元素。
伪元素
1.after（与content属性一起使用，定义在对象后的内容。）
例如：div：after｛concent：url（logo.jpg）｝
div：after｛content：”文本内容“｝；
2.：before：与content属性一起使用，定义在对象前的内容。
例如：div：before｛content：”在其前放内容“；｝
3.：first-letter：定义对象内第一个字符的样式。
4.first-line：定义对象内第一行文本的样式。
清除浮动方案
.box：：after｛
content： ”“
width：”“
height： ”“
clear：‘’both”
display：“ block”
visibility： “hidden”
｝
display：“none”不占位隐藏
visibility： “hidden” 占位隐藏
窗口自适应
盒子根据窗口的大小进行改变
html，body｛height：“100%”｝
两栏布局
宽高自适应的两栏布局可以使用外边距进行预留处理
或者加calc（）例如：width：calc（100%-200px）；
三栏布局
利用浮动和calc函数进行三栏或者多栏布局
单选框
input< type:"radio" name:"" id:"" checked>
<label for:"id" ></label>
单选框 name必须加否则无法进行单项选择 checked表示选项被选中的属性，label点击字体也可以进行选择。
多选框input<type:"checkbox" name:"" checked>
表示可多选的表单
上文文件和隐藏手段
input<type="file" src="地址"> 上传文件
input<type="image" src="地址"> 图片上传
input<type="hidden" name="" value="带给后端的个人信息">隐藏按钮
<input type="text" disable value="1111"> 禁用
<input type="text" readonly value="1111">只读
文本域
textarea 是标签 <textarea></textarea> 代表一个文本域，可以用css加以修饰 设置宽高等
下拉表单
<select>
<option></option>
</select>
这是一个下拉表单 select可用的属性 size可以显示几个选项，multiple表示可以同时选择几个选项。
option可用的属性 value必须设置代表向后端发送的数据，selected默认选择中的选项。
字段集
<filedset>
<legend>表头</legend>
</filedset>
一个字段集类似一个自我介绍的表栏 legend是表头说明。
filedset和legend都可以用css加以修饰 添加边框等。
HTML5新增语义化标签
section元素 表示页面中的一个内容区域
artcle元素 表示一块儿与上下文无关的独立的内容
aside元素 在artcle之外的，与artcle内容相关的辅助纤细
header元素 表示 页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的注脚
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素 表示页面中的主要内容（ie不兼容）
播放音乐标签
<audio src="地址" controls loop autoplay muted></audio>
controls控制栏 loop循环 autoplay自动播放 muted静音
播放视频标签
<video src="地址" controls loop autoplay muted poster=""></video>
poster海报给视频加一个封面看起来有吸引力。
新增表单标签type值
<type="color">生成一个颜色选择的表单
<type="tel">唤起拨号盘表单 用于移动端
<type="search">产生一个搜索意义的表单
<type="range">产生一个滑块表单
<type="number">产生一个数值表单
<type="email">限制用户必须输入email类型
<type="url">限制用户必须输入url类型
<type="date">限制用户必须输入日期
<type="month">限制用户必须输入月份
<type="time">限制用户必须输入时间类型
<type="datetime-local">选取本地时间
数据列表标签，类似下拉标签
<input type="text" list="id">
<datalist id="">
<option></option>
</datalist>
<input type="text" autofocus requried multple pattern=“[0-9][A-Z]{3}”>
autofocus属性 当打开页面时，设置该属性时将会自动聚焦到输入框上，一个页面只能有一个
requried属性 验证不能为空 否则无法提交
multple 可以输入多个值，用逗号分开
pattern 输入限制 代表只能输入数字和字母
css3新增加内容
层级选择器
子代选择器 .class>li表示此父元素之后的子li
+表示当前元素的第一个li
~表示当前元素的所有亲兄弟li
属性选择器
<div class="b1"><div>
div[class=b1]{} div[class~=b1]{} div[calss]{}
属性选择器表示只使用属性的名字用中括号包含的名字都会被选中，~=表示含有的都会被选中，=表示绝对选中。
结构伪类选择器
x:first-child 表示父元素中只选择第一个子元素
x:last-child 表示父元素中只选择最后一个子元素
x:nth-child(n) 表示选择第几个元素n代表数字，even代表偶数，odd代表基数
x:only-child 表示一个div只有一个p的才能被选中 多个将无效
x:root 匹配文档的根元素
x:empty 匹配没有任何元素的元素
目标伪类选择器
x：target 选择匹配x的所有元素，且匹配元素被相关url指向，能做个丑陋的手风琴效果，需要锚点配合。
ui状态伪类选择器（用于表单标签）
x:enabled 匹配所有用户界面（form表单）中处于可用状态的x元素
x：disabled 匹配所有用户界面（form表单）中处于不可用状态的x元素
x： focus 匹配所有用户界面（form表单）中处于选中状态的x元素
x：： selection 匹配x元素中被用户选中或处于高亮状态的部分 注意俩冒号
否定和动态伪类选择器
x：not（s） 匹配所有不匹配简单选择符的s的元素x
文本阴影
text-shadow 10px 10px 10px color
文字阴影 10是x轴位移 y轴位移 模糊程度
盒子阴影
box-shadow
圆角边框
border-radius 圆角边框 数值顺序 顺时针，左上 右下 左下 右上
border-top-left-radius 表示 圆角边框设在左上方
border-radius 10px/15px 表示水平方向是10px 垂直方向是15px
字体引入
@font-face｛font-family：“id”；src（）；｝
怪异盒模型
box-sizing：border-box; 表示挤压盒子内部内容 例如一个为300宽高的div容器加了20的内边距那么此时盒子会变味340的盒子，如果给盒子加入box-sizing：border-box；属性 它会自动计算保持盒子加内边距始终为300.
弹性盒模型：最适用于一行多列布局
display：fiex； 它是一种新的布局方式，可以让被他包含的子元素进行横向排列，会让行内元素默认变为块元素，只有一个元素的时候设置margin：auto；子元素会水平垂直居中。
修改弹性盒主轴方向
fiex-direction：（row column row-reverse column-reverse）
弹性盒默认主轴方向是水平方向，row是默认水平 ，column是垂直方向为主轴，row-reverse是水平反方向类似右浮动，column-reverse是垂直反方向。
主轴侧轴对齐方式
justify-content：flex-statr； 调整主轴对齐方式默认值
flex-end 右对齐
center居中显示
space-between 两端对齐
space-around 距离环绕 表示左右两边盒子的边距是内盒子的一半
侧轴对齐方式
algin-items：flex-start 默认
flex-end 右对齐
center居中显示
弹性盒折行与行间距
flex-warp：warp； 弹性盒子自动折行（注意弹性盒子是不会自动折行的，盒子会自动挤压到一行内这时候需要进行折行处理）
align-content：控制折行后的行间距
flex-start； 弹性盒子清除间距（注意如果盒子被加入了折行效果他是会自动计算间距保持一个平均间距）
flex-end 整体向下
center 整体居中
space-ground 距离环绕
space-between 两端对齐
项目对齐方式
弹性盒中 大盒子称为容器 而大盒子中的小盒子称为项目。
algin-self：flex-start；默认
flex-end右对齐
center居中
baseline 和flex-start一样
stretch 拉伸 主轴为水平是 不设置项目高度并设立此值 项目高度等同于容器高度
侧轴同理 侧轴不设置宽度 则等同于容器宽度
项目排序
reder：0；
项目的剩余宽高
flex：1；给某个单个项目设立flex时，会自动占满剩余宽高，如果多个项目都设立 则按数值的百分比分。
flex: shrink; 收缩
多列布局
column-count 把内容分成几列
column-gap 调整列间距
column-rule 列边框
column-fill :auto; 把父盒子占满
column-width: 调整列宽
column-span: all； 横跨所有列
break-insied:avoid; 禁止盒子内部折行；
响应式布局-媒体查询
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两样方式：pc 优先（从pc端口开始向下设计）
移动优先（从移动端向上设计）无论基于那种样式的设计，要兼容所有的设备，布局相应时不可避免地需要对模块布局做一些变化
（发生布局改变的零界点称为断点）
模块中内容：挤压-拉（布局不变）
换行-平铺（布局不变）
删减-增加（布局不变）
模块位置变化（布局不变）
隐藏-展开（布局不变）
@media screen and （）{
断点内容
}
@media screen and （ ） and （）{
断点内容
}
响应式布局-横屏显示
竖屏
@media screen and （orientation：portrait）and （max-width：720px）{对应样式}
横屏
@media screen and （orientation：landscape）{对应样式}
rem 相对单位 相对于html字体大小的单位
em 相对单位 相对于父盒子字体大小的单位
px 像素单位
rem等比例缩放
公式： <script>
document.documentElement.style.fontSize=document.documentElement.clientWidth/375 * 16 +"px"
</script>
设备宽度/设计稿宽度（物理宽度）*html基准字体大小
vh和vw 相对与视口的高度和宽度
view height 100vh=视口所占高度
viwe width 100vw=视口所占宽度
1vw(vh)=视口宽度（高度）的1%
vw vh单位转换目的和js一样 实现rem等比例缩放
需要计算出1vw等于多少px 再写入html中
css渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的度过，以前你必须使用图像来实现这些效果，现在通过css3
的渐变即可实现。此外，渐变的元素再放大时看起来效果更好，因为渐变时有浏览器生成的。
background： linear-gradient（deg，red，aqua）；
deg是角度 color可以设置多个颜色
径向渐变
不同于线性渐变，线性是从一个方向到另一个方向的渐变，而径向渐变是从 一个点 向四周的颜色建渐变
bacground：radial-gradient（center，shape，size，start-color，last-color）；
center：渐变起点的位置 可以设置百分比 默认是图形的正中心
shape 渐变的形状 ellipse表示椭圆形 circle表示圆形 默认是椭圆形
size 渐变的大小 即渐变到哪里停止，他有四个值 closest-side最近边，farthest-side最远边
closest-corner 最近角，farthest-corner 最远角
background: -webkit-radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black)
重复渐变
background： repeating-linear-gradient（deg，red，aqua）；
动画过度属性
可以过渡的属性：1颜色，2数值，3阴影，4转换
transition：观察所有属性 all 1s linear 1s；
all表示设置所有的属性值 1s表示完成动画的时间
linear 表示延迟
transition:谁变换放谁身上
过度属性延申
linear 匀速
ease 逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
过度单一属性取值
transition-property：width height 检索或设置对象中的参与过度的属性
transition-duration 检索或设置对象过度的持续时间
transition-delay 检索或设置对象延迟过渡的时间
transition-timing-function 检索或设置对象中过度的动画类型
2d平移属性
transform：translateX（100px）； translateY（100px）；
可以简写 （100px，100px）注意逗号隔开
表示 对象 x轴y轴移动100px
2d缩放属性
transform：scale（1.5）
表示放大元素放大1.5倍 1是一个基准 小于1则缩小。支持x y轴缩放，csaleX，csaleY。
改变中心transform-origin： left top； 从什么位置开始缩放 默认是center
2d旋转属性
transform： rotate（x，y，z）（0deg）；
表示 元素 自 x y z轴旋转多少度
可以用 transform-origin：； 选择位置
rotate 中心 ==== rotateZ，Z轴
2d属性合并写法
transform： translateX（300px） rotate（30deg）；
2d属性可以和并写入 但是要用空格隔开 且注意位移一定要写在前面。
2d倾斜属性
transform： skewX（30deng）（30deg，60deg）；
表示元素倾斜 x轴或是y轴 或是xy轴同时
skewX 正值， 拽右下角， 往右边拉动， 形成30deg
skewY 正值， 拽右下角， 往下边拉动
skew(x,y) 正值， 拽右下角， 往右下边拉动， 形成30deg
关键帧动画
他与transition属性的区别：
相同点：都是随着时间改变元素的属性值
不同点：transition需要触发一个时间（hover时间或者click事件等）才会随时间改变其css属性：而animation在不需要触发任何事件就可以随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的 animation就需要明确的动画属性值。
div{
width：500px；
height：500px；
background-color：red；
animation：youbing（自定义的id）2s（动画持续时间）ease-in-out（动画过渡的类型）2s（动画延迟的时间）infinite（动画循 环次数） alternate（动画在运动中是否需要反向运动）
infinite 无限次
}
@keyframes youbing{
0%{ }
100%{ }
}
关键帧动画单一写法
animation-name 动画名称
animation-duration 动画持续时间
animation-timing-function 动画过度类型 （linear 匀速，ease 平滑过度，ease-in 由慢到快，seae-out又快到慢，ease-in-out
先慢到快再慢）
animation-delay 动画延迟时间
animation-iteration-count 动画循环次数 （infinite 无限，number 循环的次数）
animation-direction 动画在循环中是否反向运动 （reverse 反方向运动，alternate动画先正常运动再反方向运动，并持续交替运 动，alternate-reverse 动画先反方向运动在正方向运动，并持续交替运动）
animation-play-state 设置对象动画的状态 （running 运动，paused 暂停）
animation-play-state：paused； （当鼠标经过时动画停止，鼠标移开动画继续执行）
网页是怎么形成的？
网页通过浏览器才能访问阅读
网页是网站中的一页
文件扩展名.html
html是什么？
html是用来描述网页的一种语言。
html指的是超文本标记语言（Hyper Txet Markup Language）
html不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
第一课总结 1网页是前端开发人员写的，通过浏览器转成普通人眼中的美丽页面
2网页的扩展名是.html
3html使用标记标签来描述网页，包含视频 音频 图片 等等
w3c万维网联盟 World Wide Web Consorium 成立时间1994年10月
web网页的组成部分 HTML结构（w3c制订了结构html的语法、标准）
css表现（w3c制订了表现css的语法、标准）
js行为（w3c、ecma制订了行为标准）w3c dom、ecmascript
html的基本语法
1 常规标记 也叫双标记
<标记> </标记>
<标记 属性=”属性值“ 属性=”属性值“></标记>
标记也可叫标签或叫元素
例如：<head></head>
2空标记也叫单标记
<标记/>
<标记 属性=”属性值“/>
例如<br/ >
文档声明与字符编码
<!DOCTYPE***>
<!DOCTYPE html> 是特殊且固定的文档声明标签
<html lang="***"> ***代表语言
<meta charset="****"> 字符编码
一.语义是什么 2.常用标签
1.<h1></h1>----<h6></h6>标题标签 文本标题标签自带加粗 有自己的文本大小 并且独占一行 有默认间距 block 只能是文本块
2.段落文本 <p>段落文本内容</p> 表示一个段落（段落与段落之间有段间距）block 文本块
3.换行 </br>换行是一个空标签（强制换行）
4.水平线</hr>空标记
5.加粗有两个标记（推荐strong） <b>加粗内容</b>只是加粗内容
<strong>强调的内容</strong>突出的文本
6.倾斜有两个标记（推荐em）
<em>强调文本</em>
<i>倾斜文本<i>italic
7.删除线有两个标记（推荐del）
<s>文本</s>删除线
<del>文本</del>删除线
8扩展
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
</hr> color颜色 widtg=300px宽度 align=right对齐方式 noshade取消阴影
特殊符号
尖角号 <左尖角号 >右尖角号
空格  受字体影响 &emsp 一个中文宽度不受字体影响
版权©
商标&trade； ®
div和span标签
div标签，没有具体意义，用来划分页面的区域，独占一行。
span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
列表-有序列表
无序列表 有序列表 自定义列表
有序列表 li里面可以随意放置标签，但是ol里面只能放置li。 数字是自动生产的。type：1 a A i I start：取值只能是一个数字
无序标签 ul里面只能放li，li里面可以放其他标签。 默认的是黑色的实心圆。 type= disc circle square none（用得多）
自定义列表 dl dd dt
超链接
table表格的基本结构 table 里 只能放tr tr里只能放td
table>thead>th*n +tbody>tr>td
table表格合并列 合并列clospan 合并行rowspan
table表单标签 作用 收集用户信息 form
table表格属性:align border cellpadding cellspacing width/height
td和th的属性：width,height,align,valign="middle"
css的运用
css的引用 内部引用 外部引用 行内引用 <style></style> <link rel="stylesheet" href="地址" name="text/css" >
伪类选择器 语法：a：link 表示超链接的初始状态，a：visited 表示超链接被访问后的状态，a：hover 表示鼠标停留未激活时的状态， a：active 表示鼠标激活时的状态。
css的选择器 元素选择器 id选择器 class选择器 后代选择器 群组选择器 伪类选择器
选择器的权重 当元素属性发生了冲突 会选择权重高的来执行!importang＞内行样式＞后代选择器＞id选择器＞class选择器＞元素选择器。相同的选择符会选用就近原则。
css文本属性 font-famliy文本类型 font-size文本大小（size=1-900px） font-weight文本粗细（常用bold 加粗的意思） font-style文本风格 （oblique倾斜 italic也是倾斜的意思） color颜色
text-align 文本对齐方式 （text-align：left；靠左 ，text-align：right；靠右 ，text-align：center；居中 ，text-align：justify；水平两端对齐，但是只对多行起作用。）width 文本宽度
height 文本行高 line-height. Font-family:'Times New Roman', Times, serif;多个字符要加引号，单个字符不需要 swshf斜庞大高样
css文本间距 letter-spacing 字体间距 word-spacing 字符间距 （字体多用于汉字 字符间距多用于单词） text-indent 首行缩进 只对第一行起作用 em（针对了修改了字体size的属性值单位）
css文本修饰 text-decoration 属性值 none 默认 删除线， underline 下划线， line-through 中划线， overline 上划线。
css文本大小写 text-transform 属性值 none 默认，uppercase 大写，lowercase 小写，capitliaze 每个单词的首个字母大写。
css列表属性 list-style-type：属性值（dics实心圆，circle空心圆，square实心正方形，none不显示） list-style-image：url（地址）；设置图片到列表。 list-style-position： （insider，outsider 设置图片在文本框内部或者外部） list-style： none url（地址）insider； 列表属性简写 不分前后。
css背景属性 background-color： 属性值（rgb，rgba，或是16进制）： 背景颜色，a为透明度。
css背景图片 background-repeat： 属性值（repeat-x，repeat-y，no repeat）图片在框架内的平铺效果 x为x平铺效果 y为y轴平铺效果 no repeat为没有平铺效果 background-position：属性值（px，百分比%，上下左右left center right top bottom）；background-size:contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白
css固定和滚动 background-attachment：scroll(滚动)/fixed（固定，固定在浏览器窗口里面。设置到盒子里 只固定在盒子内 ） ；
背景属性复合写法 background：url(地址) nopeat center yellow (background-size 只能单独使用 顺序可以改变 可以只取一个值 但是之前的会被覆盖)
浮动属性 float：left 左浮动 float：right 右浮动 float：元素不浮动 作用 让竖着的东西横过来 例如独占一行或一块儿区域的元素 div p等 还可以让文本 文字 环绕该元素
浮动元素不占据位置，不计算高度，若父元素没有高度的话，就会高度塌陷
解决高度塌陷（4个方式）
1.给父元素高度就OK了
2.添加一个子元素然后在子元素属性上清除前面浮动造成的不计算高度造成的影响
3.给父元素加overflow属性，为hidden，触发BFC机制，让父元素自动计算高度
4.添加伪元素，浮动元素父元素加伪元素
.father::after{
content:"";
display:block;
clear:both;
}
清除浮动属性 clear：none；允许有浮动对象 right；不允许有右浮动对象 left；不允许有左浮动对象 both；不允许有浮动对象。（清除浮动只是改变元素的排列方式）
盒子模型内边距 padding：px；（内边距 一个值代表上下左右四个值，两个值代表上下 左右，三个值代表上 左右 下，四个值代表上 右 下 左 顺时针方向） padding-方向（top left rgiht bottm）：px；可以设置方向。 盒子中想要盒子和内容之间形成距离使用padding：px；*｛padding：0px；｝清理默认的内边距。
盒子模型边框 border：px solid color； （solid 边框样式 double dashed dotted） 背景色能蔓延到边框。可以拆分写法 border-width：10px 方向 ； border-style：；border-color：；
盒子模型外边框 margin；px方向； margim-top(left,bottom,right):px; 背景色不会蔓延 *｛margin：px；｝表示所有的外边距。盒子屏幕居中 margin：0 auto；表示横向居中。 支持取负值
margin特性 两个盒子兄弟关系，两个盒子垂直外边距与水平外边距问题。垂直方向两个盒子的外边距取最大值。
水品方向，外边距合并。
两个盒子父子关系，两个盒子重叠时使用padding-top，注意高度计算。给父盒子设置边框border。
加浮动float也可以
overflow： hidden.flaBFC,
ps工具 ctrl+r 标尺，
溢出属性 overflow：visible/hidden（隐藏）/scroll/auto（自动）/inherit；
visible：默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll： 滚动，溢出内容以滚动方式显示
auto： 如果有溢出会添加滚动条，没有溢出正常显示
inherit：规定应该遵从父元素继承overflow属性的值
overflow-x：X轴溢出 overflow-y：Y轴溢出
溢出属性：空余空间
white-space：normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略
nowrap：文本不会换行，文本会在同一行上继续，知道遇到<br/>标签位置
<pre>预格式化文本-保留空格，tab，回车符。</pre> white-space: pre;
white-space: pre-wrap;
nowrap: 不换行； pre；显示空格，回车，不换行； pre-wrap：显示空格，回车，换行； pre-line：显示回车，不显示空格，换行。
省略号显示
text-overflow：clip/ellipsis
clip：默认值，不显示省略号（...）
ellipsis：显示省略标记；
当单行文本溢出显示省略号需要同时设置一下声明
1.容器宽度：width200px
2.强制文本在一行内显示：white-space：nowrap；
3.溢出内容为隐藏：overflow：hidden；
4.溢出文本显示省略号：text-overflow：ellipsis；
元素属性显示-块元素：
display： block；
display： list-item;
p标签放文本可以，不能放块级元素。
行内元素和行内块元素
行内元素 display: inline;
行内块元素 display：inline-block；
display:none ”的意思是设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。
盒子模型
span行内元素 只能设置左右边距 不能设置上下边距
行内块支持边距
元素类型转换
定位属性 position
position：static； 默认
position：absolute；绝对定位 文档流：（脱离）。偏移位置：当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏；有父元素且父元素有定位，父元素。 ”子绝父相“
position：relative；相对定位 文档流：（不脱离）。偏移位置：自己的初始位置。向自己加的属性值反方向移动。
position：fixed。固定定位（脱离）。偏移位置：自己的初始位置。
position：sticky；粘性定位 。 偏移位置：可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好。
opacity（透明度0-1）
三角形
必须设置宽高且都为0
span{
width: 0;
height :0;
border: px solid transparent;
border-方向：px solid color;
}
定位层级
当两个盒子定位元素相同且有相交的部分时 遵循就近原则 就近的会进行覆盖
z-index:数字； 设置层级，数字越大层级越大，越靠上显示。可以设置负值。
绝对定位的深入探索
父子关系的绝对定位 由于给父级设置Z-index无效 所以可以给子元素设置负数的层级设置，使其被覆盖。
兄弟关系依照就近原则，可以使用层级设置控制。
设置绝对定位可以将改元素改变为块级元素，浮动也可以，或是直接改变使用display元素。
定位控制元素水平垂直居中
给盒子设置绝对定位且属性值为上左各50%，再减去盒子一半大小的外边距，且外边距方向与定位属性值相同。
第二步也可以是用动画里面的转化tranform:tranlasition(-50%,-50%)
浮动与定位的区别
浮动属于半脱离，文字会环绕不会被遮挡。
绝对定位属于全脱离，文字会被遮挡。
锚点
实现当前页面跳转 <a href="#锚点名字"></a><div id:"锚点名字"></div>
精灵图/雪碧图
将导航图片，按钮背景图片等合并成一张图片，再利用backgr-position实现位置定位。可以减少对服务器的请求次数，从而提高加载速度。
自适应宽高
希望元素大小跟着子元素或窗口进行变化，这就叫自适应。
宽度自适应width值设为auto或者不设置，高度同理。
min-height最小高度表示高度最低不能低于设置的值。
min-width最小宽度
max-height最大高度表示高度最高不能高于设置的值，如果值大于最大高度那么将会溢出。
max-width最大宽度
浮动元素之父元素高度自适应
解决盒子父盒子高度塌陷问题，可以给父盒子设置一个高度，但是浮动过多换行会出现问题。
设置一个空盒子加上clear：both；也可以解决,但是会增加一个空标签，降低反应速度，加负荷。
给父元素添加overflow：hidden； 但是会隐藏溢出的元素。
伪元素
1.after（与content属性一起使用，定义在对象后的内容。）
例如：div：after｛concent：url（logo.jpg）｝
div：after｛content：”文本内容“｝；
2.：before：与content属性一起使用，定义在对象前的内容。
例如：div：before｛content：”在其前放内容“；｝
3.：first-letter：定义对象内第一个字符的样式。
4.first-line：定义对象内第一行文本的样式。
清除浮动方案
.box：：after｛
content： ”“
width：”“
height： ”“
clear：‘’both”
display：“ block”
visibility： “hidden”
｝
display：“none”不占位隐藏
visibility： “hidden” 占位隐藏
窗口自适应
盒子根据窗口的大小进行改变
html，body｛height：“100%”｝
两栏布局
宽高自适应的两栏布局可以使用外边距进行预留处理
或者加calc（）例如：width：calc（100%-200px）；
三栏布局
利用浮动和calc函数进行三栏或者多栏布局
单选框
input< type:"radio" name:"" id:"" checked>
<label for:"id" ></label>
单选框 name必须加否则无法进行单项选择 checked表示选项被选中的属性，label点击字体也可以进行选择。
多选框input<type:"checkbox" name:"" checked>
表示可多选的表单
上文文件和隐藏手段
input<type="file" src="地址"> 上传文件
input<type="image" src="地址"> 图片上传
input<type="hidden" name="" value="带给后端的个人信息">隐藏按钮
<input type="text" disable value="1111"> 禁用
<input type="text" readonly value="1111">只读
文本域
textarea 是标签 <textarea></textarea> 代表一个文本域，可以用css加以修饰 设置宽高等
下拉表单
<select>
<option></option>
</select>
这是一个下拉表单 select可用的属性 size可以显示几个选项，multiple表示可以同时选择几个选项。
option可用的属性 value必须设置代表向后端发送的数据，selected默认选择中的选项。
字段集
<filedset>
<legend>表头</legend>
</filedset>
一个字段集类似一个自我介绍的表栏 legend是表头说明。
filedset和legend都可以用css加以修饰 添加边框等。
HTML5新增语义化标签
section元素 表示页面中的一个内容区域
artcle元素 表示一块儿与上下文无关的独立的内容
aside元素 在artcle之外的，与artcle内容相关的辅助纤细
header元素 表示 页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的注脚
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素 表示页面中的主要内容（ie不兼容）
播放音乐标签
<audio src="地址" controls loop autoplay muted></audio>
controls控制栏 loop循环 autoplay自动播放 muted静音
播放视频标签
<video src="地址" controls loop autoplay muted poster=""></video>
poster海报给视频加一个封面看起来有吸引力。
新增表单标签type值
<type="color">生成一个颜色选择的表单
<type="tel">唤起拨号盘表单 用于移动端
<type="search">产生一个搜索意义的表单
<type="range">产生一个滑块表单
<type="number">产生一个数值表单
<type="email">限制用户必须输入email类型
<type="url">限制用户必须输入url类型
<type="date">限制用户必须输入日期
<type="month">限制用户必须输入月份
<type="time">限制用户必须输入时间类型
<type="datetime-local">选取本地时间
数据列表标签，类似下拉标签
<input type="text" list="id">
<datalist id="">
<option></option>
</datalist>
<input type="text" autofocus requried multple pattern=“[0-9][A-Z]{3}”>
autofocus属性 当打开页面时，设置该属性时将会自动聚焦到输入框上，一个页面只能有一个
requried属性 验证不能为空 否则无法提交
multple 可以输入多个值，用逗号分开
pattern 输入限制 代表只能输入数字和字母
css3新增加内容
层级选择器
子代选择器 .class>li表示此父元素之后的子li
+表示当前元素的第一个li
~表示当前元素的所有亲兄弟li
属性选择器
<div class="b1"><div>
div[class=b1]{} div[class~=b1]{} div[calss]{}
属性选择器表示只使用属性的名字用中括号包含的名字都会被选中，~=表示含有的都会被选中，=表示绝对选中。
结构伪类选择器
x:first-child 表示父元素中只选择第一个子元素
x:last-child 表示父元素中只选择最后一个子元素
x:nth-child(n) 表示选择第几个元素n代表数字，even代表偶数，odd代表基数
x:only-child 表示一个div只有一个p的才能被选中 多个将无效
x:root 匹配文档的根元素
x:empty 匹配没有任何元素的元素
目标伪类选择器
x：target 选择匹配x的所有元素，且匹配元素被相关url指向，能做个丑陋的手风琴效果，需要锚点配合。
ui状态伪类选择器（用于表单标签）
x:enabled 匹配所有用户界面（form表单）中处于可用状态的x元素
x：disabled 匹配所有用户界面（form表单）中处于不可用状态的x元素
x： focus 匹配所有用户界面（form表单）中处于选中状态的x元素
x：： selection 匹配x元素中被用户选中或处于高亮状态的部分 注意俩冒号
否定和动态伪类选择器
x：not（s） 匹配所有不匹配简单选择符的s的元素x
文本阴影
text-shadow 10px 10px 10px color
文字阴影 10是x轴位移 y轴位移 模糊程度
盒子阴影
box-shadow
圆角边框
border-radius 圆角边框 数值顺序 顺时针，左上 右下 左下 右上
border-top-left-radius 表示 圆角边框设在左上方
border-radius 10px/15px 表示水平方向是10px 垂直方向是15px
字体引入
@font-face｛font-family：“id”；src（）；｝
怪异盒模型
box-sizing：border-box; 表示挤压盒子内部内容 例如一个为300宽高的div容器加了20的内边距那么此时盒子会变味340的盒子，如果给盒子加入box-sizing：border-box；属性 它会自动计算保持盒子加内边距始终为300.
弹性盒模型：最适用于一行多列布局
display：fiex； 它是一种新的布局方式，可以让被他包含的子元素进行横向排列，会让行内元素默认变为块元素，只有一个元素的时候设置margin：auto；子元素会水平垂直居中。
修改弹性盒主轴方向
fiex-direction：（row column row-reverse column-reverse）
弹性盒默认主轴方向是水平方向，row是默认水平 ，column是垂直方向为主轴，row-reverse是水平反方向类似右浮动，column-reverse是垂直反方向。
主轴侧轴对齐方式
justify-content：flex-statr； 调整主轴对齐方式默认值
flex-end 右对齐
center居中显示
space-between 两端对齐
space-around 距离环绕 表示左右两边盒子的边距是内盒子的一半
侧轴对齐方式
algin-items：flex-start 默认
flex-end 右对齐
center居中显示
弹性盒折行与行间距
flex-warp：warp； 弹性盒子自动折行（注意弹性盒子是不会自动折行的，盒子会自动挤压到一行内这时候需要进行折行处理）
align-content：控制折行后的行间距
flex-start； 弹性盒子清除间距（注意如果盒子被加入了折行效果他是会自动计算间距保持一个平均间距）
flex-end 整体向下
center 整体居中
space-ground 距离环绕
space-between 两端对齐
项目对齐方式
弹性盒中 大盒子称为容器 而大盒子中的小盒子称为项目。
algin-self：flex-start；默认
flex-end右对齐
center居中
baseline 和flex-start一样
stretch 拉伸 主轴为水平是 不设置项目高度并设立此值 项目高度等同于容器高度
侧轴同理 侧轴不设置宽度 则等同于容器宽度
项目排序
reder：0；
项目的剩余宽高
flex：1；给某个单个项目设立flex时，会自动占满剩余宽高，如果多个项目都设立 则按数值的百分比分。
flex: shrink; 收缩
多列布局
column-count 把内容分成几列
column-gap 调整列间距
column-rule 列边框
column-fill :auto; 把父盒子占满
column-width: 调整列宽
column-span: all； 横跨所有列
break-insied:avoid; 禁止盒子内部折行；
响应式布局-媒体查询
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两样方式：pc 优先（从pc端口开始向下设计）
移动优先（从移动端向上设计）无论基于那种样式的设计，要兼容所有的设备，布局相应时不可避免地需要对模块布局做一些变化
（发生布局改变的零界点称为断点）
模块中内容：挤压-拉（布局不变）
换行-平铺（布局不变）
删减-增加（布局不变）
模块位置变化（布局不变）
隐藏-展开（布局不变）
@media screen and （）{
断点内容
}
@media screen and （ ） and （）{
断点内容
}
响应式布局-横屏显示
竖屏
@media screen and （orientation：portrait）and （max-width：720px）{对应样式}
横屏
@media screen and （orientation：landscape）{对应样式}
rem 相对单位 相对于html字体大小的单位
em 相对单位 相对于父盒子字体大小的单位
px 像素单位
rem等比例缩放
公式： <script>
document.documentElement.style.fontSize=document.documentElement.clientWidth/375 * 16 +"px"
</script>
设备宽度/设计稿宽度（物理宽度）*html基准字体大小
vh和vw 相对与视口的高度和宽度
view height 100vh=视口所占高度
viwe width 100vw=视口所占宽度
1vw(vh)=视口宽度（高度）的1%
vw vh单位转换目的和js一样 实现rem等比例缩放
需要计算出1vw等于多少px 再写入html中
css渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的度过，以前你必须使用图像来实现这些效果，现在通过css3
的渐变即可实现。此外，渐变的元素再放大时看起来效果更好，因为渐变时有浏览器生成的。
background： linear-gradient（deg，red，aqua）；
deg是角度 color可以设置多个颜色
径向渐变
不同于线性渐变，线性是从一个方向到另一个方向的渐变，而径向渐变是从 一个点 向四周的颜色建渐变
bacground：radial-gradient（center，shape，size，start-color，last-color）；
center：渐变起点的位置 可以设置百分比 默认是图形的正中心
shape 渐变的形状 ellipse表示椭圆形 circle表示圆形 默认是椭圆形
size 渐变的大小 即渐变到哪里停止，他有四个值 closest-side最近边，farthest-side最远边
closest-corner 最近角，farthest-corner 最远角
background: -webkit-radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black)
重复渐变
background： repeating-linear-gradient（deg，red，aqua）；
动画过度属性
可以过渡的属性：1颜色，2数值，3阴影，4转换
transition：观察所有属性 all 1s linear 1s；
all表示设置所有的属性值 1s表示完成动画的时间
linear 表示延迟
transition:谁变换放谁身上
过度属性延申
linear 匀速
ease 逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
过度单一属性取值
transition-property：width height 检索或设置对象中的参与过度的属性
transition-duration 检索或设置对象过度的持续时间
transition-delay 检索或设置对象延迟过渡的时间
transition-timing-function 检索或设置对象中过度的动画类型
2d平移属性
transform：translateX（100px）； translateY（100px）；
可以简写 （100px，100px）注意逗号隔开
表示 对象 x轴y轴移动100px
2d缩放属性
transform：scale（1.5）
表示放大元素放大1.5倍 1是一个基准 小于1则缩小。支持x y轴缩放，csaleX，csaleY。
改变中心transform-origin： left top； 从什么位置开始缩放 默认是center
2d旋转属性
transform： rotate（x，y，z）（0deg）；
表示 元素 自 x y z轴旋转多少度
可以用 transform-origin：； 选择位置
rotate 中心 ==== rotateZ，Z轴
2d属性合并写法
transform： translateX（300px） rotate（30deg）；
2d属性可以和并写入 但是要用空格隔开 且注意位移一定要写在前面。
2d倾斜属性
transform： skewX（30deng）（30deg，60deg）；
表示元素倾斜 x轴或是y轴 或是xy轴同时
skewX 正值， 拽右下角， 往右边拉动， 形成30deg
skewY 正值， 拽右下角， 往下边拉动
skew(x,y) 正值， 拽右下角， 往右下边拉动， 形成30deg
关键帧动画
他与transition属性的区别：
相同点：都是随着时间改变元素的属性值
不同点：transition需要触发一个时间（hover时间或者click事件等）才会随时间改变其css属性：而animation在不需要触发任何事件就可以随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的 animation就需要明确的动画属性值。
div{
width：500px；
height：500px；
background-color：red；
animation：youbing（自定义的id）2s（动画持续时间）ease-in-out（动画过渡的类型）2s（动画延迟的时间）infinite（动画循 环次数） alternate（动画在运动中是否需要反向运动）
infinite 无限次
}
@keyframes youbing{
0%{ }
100%{ }
}
关键帧动画单一写法
animation-name 动画名称
animation-duration 动画持续时间
animation-timing-function 动画过度类型 （linear 匀速，ease 平滑过度，ease-in 由慢到快，seae-out又快到慢，ease-in-out
先慢到快再慢）
animation-delay 动画延迟时间
animation-iteration-count 动画循环次数 （infinite 无限，number 循环的次数）
animation-direction 动画在循环中是否反向运动 （reverse 反方向运动，alternate动画先正常运动再反方向运动，并持续交替运 动，alternate-reverse 动画先反方向运动在正方向运动，并持续交替运动）
animation-play-state 设置对象动画的状态 （running 运动，paused 暂停）
animation-play-state：paused； （当鼠标经过时动画停止，鼠标移开动画继续执行）
扫一扫
1347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
