05_PROJECT
XML
-
什么是XML
- eXtensible Markup Language
- 可扩展的标记语言
-
语法
-
XML的最顶端是声明
-
标记语法
- 必须成对出现
- 严格区分大小写的
- 标记允许被嵌套，要正确嵌套
- 标记允许有属性，但属性值必须用 "" / ‘’ 括起来
- 每个XML文档有且只有一个根元素
-
-
使用AJAX请求XML文档
-
步骤遵循XML的请求步骤
-
创建请求时，需要将请求地址修改为xml文件地址
-
在回调函数中，使用 xhr.responseXML接收数据，并返回一个XML文档对象
-
解析XML文档对象的内容
-
elem.getElementsByTagName("tagname")
- 返回的是一个类数组
- xmlDoc.getElementsByTagName("stu")[0]
-
获取元素中的文本
- innerHTML
-
-
-
PHP中生成XML文档进行响应
-
增加响应消息头
- header("Content-Type:application/xml");
-
按照XML格式去拼字符串
-
06-CSSBasic
CSS Day01
-
CSS概述
-
什么是CSS
- Cascading Style Sheets
- 层叠样式表，级联样式表，样式表
- 用于HTML文档中元素的样式定义
- 实现了内容与表现分离
- 提高代码的可重用性和可维护性
-
CSS与HTML之间的关系
- HTML用于构建网页的结构
- CSS用于构建HTML元素的样式
-
CSS与HTML之间的使用原则
- W3C建议尽量使用CSS样式取代HTML属性
- 如果为HTML所特有属性，则使用HTML属性
-
-
CSS语法
-
CSS样式表的使用方式
-
内联方式
-
将样式定义在元素的style属性里
-
语法
-
样式声明
- 属性名:属性值
-
特点
- 只针对一个元素有效
- 不通用，无法提高可重用性和可维护性
-
-
内部样式表
-
将样式定义在页面中
-
-
-
- <style></style>中允许包含若干样式规则
- 样式规则
- 选择器
- 规范页面中哪些元素能够使用定义好的样式
- 样式声明
- 属性:值
- 特点
- 在一个页面中能够提升可重用性和可维护性
- 外部样式表
- 允许将样式定义在外部的的样式表文件中
- 步骤
- 创建一个单独的样式表文件用来保存样式规则
- 纯文本文件，文件后缀为.css
- 该文件中只能包含样式规则
- 新式规则由选择器和样式声明组成
- 在需要使用该样式表文件的页面上，使用<link>元素链接外部样式表文件
- <link rel="stylesheet" href="css样式表URL">
- CSS样式表特征
- 继承性
- 大多数CSS的样式属性是可以被继承的
- 层叠性
- 可以为一个元素定义多个样式规则
- 样式属性不冲突时，多个样式表中的样式可以层叠为一个
- 优先级
- 样式定义冲突时，会按照不同使用方式的优先级来应用样式
- 浏览器缺省设置
- 外部样式表和内部样式表
- 就近原则
- 内联样式
- !important
- 可以显示的调整样式规则的优先级
- 语法
- 属性：值 !important;
- CSS基础选择器
- 通用选择器
- 作用
- 用于匹配页面上的每一个元素
- 可用于页面上所有元素的元素样式定义
- 语法
- *{ }
- 元素选择器
- 作用
- 用于匹配页面上指定元素的标记
- 通常用于设定某一种元素的默认样式
- 语法
- 元素名称{ }
- 类选择器
- 作用
- 可以由任意元素的class属性可以进行引用的选择器
- 在CSS中，类选择器是最灵活的选择器，应用也非常广
- 语法
- 定义
- .className{}
- .是定义类选择器的语法规范，并不是类选择器的名称
- 类名不能以数字作为开始
- 引用
- <ANY class="className">
- 多类选择器的引用
- 允许一个元素引用多个类选择器
- <ANY class="name1 name2 name3">
- 分类选择器的定义
- 作用
- 将类选择器和元素选择器结合起来使用
- 从而实现对某种元素中不同样式的细分控制
- 语法
- 元素选择器.类选择器{}
- div.important{ ... }
- p.left{}
- p.important.left{ }
- ID选择器
- 作用
- 与页面指定ID值的元素进行匹配（私人定制）
- 语法
- #idValue{}
- #仅仅表示该选择器是ID选择器而已
- 群组选择器
- 作用
- 选择器声明有是以逗号隔开的选择器列表
- 可以将一部分样式相同的选择器放在一起定义
- 语法
- 选择器1，选择器2，选择器3{ }
- 后代选择器
- 作用
- 通过元素间的后代关系匹配元素
- 后代关系 ：出现在某元素的子元素（不限制层级）
- 语法
- 选择器1 选择器2{ }
- 子代选择器
- 作用
- 通过元素的子代关系匹配元素
- 子代关系：只存在一层子级关系的子元素
- 语法
- 选择器1>选择器2{ }
- 伪类选择器
- 作用
- 用于匹配元素不同状态的选择器
- 链接伪类
- :link
- 适用于尚未访问的链接
- :visited
- 适用于访问过的链接
- 动态伪类
- :hover
- 适用于鼠标悬停在HTML元素时
- :active
- 适用于HTML元素被激活时
- :focus
- 适用于HTML元素获取焦点时
- ……
- 选择器优先级
- 权值
- 元素选择器
- 1
- 类选择器
- 10
- 伪类选择器
- 10
- ID选择器
- 100
- 内联样式
- 1000
- 选择器的权值加到一起，大的优先;如果权值相同，后定义的优先
- 群组选择器权值不累加
- #container,div.important,span{ .... }
-
尺寸与边框
-
单位
-
尺寸
- %
- in
- cm
- mm
- pt
- px
- em
-
颜色（取值）
-
rgb(r,g,b)
-
rgb(r%,g%,b%)
-
rgba(r,g,b,alpha)
- alpha : 0 - 1 之间的小数
-
#rrggbb
-
#rgb
-
颜色的英文表示法
-
-
-
尺寸
-
尺寸
-
作用
- 用于设置元素的宽度和高度
- 单位一般为像素或百分比
-
宽度
- width
- min-width
- max-height
-
高度
- height
- min-height
- max-height
-
允许设置尺寸的元素
-
块级元素
-
行内块元素（radio,checkbox除外）
-
具备width和height属性的HTML元素
- img
- table
-
-
溢出
-
当使用尺寸属性限制元素的大小时，如果内容所需的空间大于元素本身的话，就会导致内容溢出
-
属性
-
overflow
- visible
- hidden
- scroll
- auto
-
overflow-x
-
overflow-y
-
-
-
-
-
CSSBasic Day02
-
尺寸与边框
-
边框
-
边框
-
简写方式
-
border:width style color;
-
width:边框宽度
-
style:边框样式
- solid
- dotted
- dashed
-
color:颜色
- 可取值为 transparent
-
-
border:none; 或 border:0;
-
-
单边定义
-
border-方向:width style color
-
方向
- top
- right
- bottom
- left
-
-
-
单属性定义
-
border-属性:值;
-
属性
- width
- style
- color
-
-
-
单边单属性定义
-
border-方向-属性:值；
-
方向
- top
- right
- bottom
- left
-
属性
- width
- style
- color
-
-
-
-
边框倒角
-
语法
-
属性
- border-radius
-
取值
- 绝对值
- 百分比
-
-
单独定义
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
-
-
边框阴影
-
属性
-
box-shadow
-
h-shadow
- 必需，为水平阴影的位置
-
v-shadow
- 必需，为垂直阴影的位置
-
blur
- 可选，模糊距离
-
spread
- 可选，阴影的尺寸
-
color
- 可选，阴影的颜色
-
inset
- 将外部阴影(outset)改为内部阴影
-
-
-
-
边框轮廓
-
轮廓是绘制于元素周围的一条线，位于边框的外围
-
属性
-
outline:width style color
-
outline-width
- 轮廓的宽度
-
outline-style
- 轮廓的样式
-
outline-color
- 轮廓的颜色
-
-
-
-
-
框模型
-
什么是框模型
- 页面元素皆为框
- Box Model，定义了元素框处理元素内容、内边距、外边距、边框的方式
- width 和 height 只负责定义内容区域的尺寸
- 增加了 外边距、内边距、边框，内容区域的尺寸不会发生改变，但会影响元素框的总尺寸
- 元素总宽度=左右外边距+左右边框+左右内边距+width
- 元素总高度=上下外边距+上下边框+上下内边距+height
-
外边距
-
什么是外边距
- 围绕在元素边框周围的空白区域
- 默认不能被其他元素所占据
- 外边距是透明的
-
属性
-
margin
-
单位
-
px
-
%
-
auto
- 设置非行内元素的水平对齐方式
- auto对上下外边距不起作用
- 元素要设置宽度
-
负值
- 将元素向着反方向移动
-
-
数量
-
value
- 四个方向外边距
-
v1 v2
- 上下 左右
-
v1 v2 v3
- 上 左右 下
-
v1 v2 v3 v4
- 上 右 下 左
-
-
-
单边设置
- margin-left
- margin-right
- margin-top
- margin-bottom
-
-
具备默认外边距的元素
- body
- h1~h6
- p
- ul,ol
- dl,dd
- pre
- 可以通过 CSS 重写的方式重写外边距
-
外边距的特殊情况
-
外边距合并
- 两个垂直外边距相遇时，他们将合并为一个，值以大者为主
-
外边距溢出
-
特殊情况下，给子元素设置外边距的时候，效果会作用在父元素上
- 父元素无边框
- 设置给第一个(最后一个)子元素时
-
-
行内元素以及行内块元素
-
行内
- 只左右有效，上下无效
-
行内块
- 左右正常，上下连同该行元素都会跟着改变
-
-
-
-
内边距
-
什么是内边距
- 内容与边框之间的距离
- 会扩大元素边框所占用的区域
-
属性
-
padding
-
单位
- px
- %
-
数量
- 同上
-
-
padding-方向:值
-
-
特殊效果
- 只影响到元素本身，并不会影响到其他元素
-
-
box-sizing
-
作用
- 重新指定框模型的计算模式
-
取值
-
content-box
- 默认值
- border以及padding是在width和height基础之上额外计算的
-
border-box
- 元素的padding和border会计算在width 和 height之内
-
-
-
-
背景
-
背景是从边框位置开始绘制
-
背景颜色
- background-color
-
背景图像
-
background-image
- url()
-
-
背景重复
-
background-repeat
- repeat 默认值
- no-repeat 不重复
- repeat-x 横向重复
- repeat-y 纵向重复
-
-
背景图片尺寸
-
background-size
-
value1 value2
-
value1% value2%
-
cover
- 覆盖，背景图显示不完整
-
contain
- 包含，背景图显示完整，覆盖不一定全面
-
-
-
背景图像固定
-
background-attachment
- scroll
- fixed : 固定
-
-
背景图像定位
-
background-position
-
x y
-
x : 水平偏移距离
-
- ： 右偏移
-
- ： 左偏移
-
-
y:垂直偏移距离
-
- ：下偏移
-
- ： 上偏移
-
-
-
x% y%
-
left、center、right、top、bottom
-
-
-
综合属性
- background：color url() repeat attachment position;
-
CSS3Basic Day03
-
渐变
-
什么是渐变
- 多种颜色平缓过渡的效果
-
渐变的重要因素
-
色标
- 颜色
- 位置
-
-
语法
-
线性渐变
-
background-image:linear-gradient(angle,color-point1,color-point2)
-
angle
-
表示渐变的方向或角度
-
取值
-
关键字
- to top
- to right
- to bottom
- to left
-
角度
- 0deg ~ 360deg
-
-
-
color-point
- red 0%
- green 50px
-
linear-gradient(to bottom,red,green)
-
-
-
浏览器兼容性
-
通过浏览器前缀实现兼容性
- Firefox：-moz-
- Chrome & Safari : -webkit-
- Opera : -o-
- IE : -ms-
-
渐变的兼容性
- background-image:-moz-linear-gradient();
- background-image:-webkit-linear-gradient();
- background-image:-o-linear-gradient();
- background-image:-ms-linear-gradient();
-
-
-
文本格式化
-
字体属性
-
字体系列 font-family
- 字体1,字体2
-
字体大小 font-size
- px 或 pt 或 em
-
字体加粗 font-weight
- normal
- bold
- value
-
字体样式 font-style
- normal
- italic
-
小型大写字母 font-variant
- normal
- small-caps
-
字体属性 font
- style variant weight size family;
-
-
文本属性
-
文本颜色 color
-
文本排列 text-align
- left
- center
- right
- justify
-
文字修饰 text-decoration
- none
- underline
- line-through
- overline
-
行高 line-height
- 一行数据所占的高度，如果行高大于文字本身高度，那么该行文本将在行高的范围内垂直居中
- font:12px/24px "微软雅黑";
-
首行文本缩进 text-indent
- px
-
文本阴影 text-shadow
- h-shadow v-shadow blur color
-
-
-
表格
-
常用属性
-
padding
-
width，height
-
文本格式化
- 字体
- 文本
-
background
-
border
-
vertical-align
- top
- middle
- bottom
-
-
特有属性
-
边框合并 border-collapse
- 默认值：separate
- collapse
-
边框边距 border-spacing
-
前提：必须为分离边框模式 即 border-collapse：separate
-
1个值
- 水平和垂直间距相同
-
2个值
- 第一个值：水平间距
- 第二个值：垂直间距
-
-
标题位置 caption-side
- top
- bottom
-
显示规则 table-layout
-
auto
- 自动表格布局
- 单元格大小会适应内容大小
- 复杂表格时加载速度较慢
- 适用于不确定每列大小时使用
- 传统表格体现方式
-
fixed
- 固定表格布局
- 列宽度取决于table和td中设置的宽度，与内容无关
- 加速显示表格
- 算法较快，但是不灵活
-
-
-
-
浮动(定位)
-
定位
-
什么是定位
- 元素该出现的位置
-
分类
- 普通流定位（文档流定位）
- 浮动定位
- 相对定位
- 绝对定位
- 固定定位
-
普通流（文档流）定位
- 每个元素都有自己的空间
- 每个元素都是从其父元素的左上角开始出现
- 块级：从上到下排列，每个元素独占一行
- 行内&行内块：从左到右的显示，显示不下再换行
-
-
浮动定位
-
浮动定位&特点
- 脱离文档流：不占据页面空间
- 后续元素上前补位
- 停靠在父元素的左边或右边或其他已浮动元素的边缘
- 浮动只能在当前行浮动
-
浮动定位属性
-
float
-
none
-
left
- 左浮动
-
right
- 右浮动
-
-
-
特殊注意
- 浮动元素都会变成块级
- 块级元素不限制宽度时，浮动后将变成自适应宽度
- 父元素的宽度不足以包含所有的子元素时，那么最后一个将换行，有可能被卡住
- 文本，行内元素，行内块元素都是采用环绕的方式来排列的，不能被浮动元素压在底下的
-
清除浮动
-
clear
-
none
-
left
- 清除当前元素的左边浮动元素带来的影响
-
right
- 清除当前元素的右边浮动元素带来的影响
-
both
- 清除左右两边浮动元素带来的影响
-
-
-
浮动元素对父元素的影响
-
父元素的高度最终以 没有 浮动元素的高度为准
-
解决方案
- 设置高度
- 父元素也浮动
- 设置父元素的 overflow 属性 值为 hidden或auto
- 在父元素中追加 空的块级 子元素并设置其 clear值为 both
-
-
-
CSS3Basic Day04
-
浮动
-
定位概述
- 所谓定位指的就是元素出现在网页的位置
-
定位的分类
- 普通流定位
- 浮动定位
- 相对定位
- 绝对定位
- 固定定位
-
普通流定位
- 普通流定位，又称为文档流定位，是页面元素的默认定位方式
- 页面中的块级元素：从上到下的方式一个接一个的排列
- 页面中的行内元素：从左到右的方式一个接一个的排列
-
浮动定位
-
概述（特征）
- 将元素排除在文档流之外即脱离文档流，元素不再占据页面空间（但依然会显示），但其他未浮动元素要目前补位
- 元素只会在当前行浮动
- 浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
- 浮动元素依然会在包含框内
- 浮动元素能够让多个块级元素在一行内显示
-
属性
-
float
-
none
- 默认值，没有任何的浮动效果
-
left
- 左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上
-
right
- 右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上
-
-
-
浮动带来的特殊效果
- 一行内，显示不下所有的已浮动元素时，最后一个将换行（有可能被卡住）
- 元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
- 元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大
- 文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
-
清除浮动
-
作用
- 清除当前元素前面元素浮动所带来的影响
-
语法
-
属性
- clear
-
取值
-
none
- 默认值，不做任何清除浮动的操作
-
left
- 清除前面元素左浮动带来的影响
-
right
- 清除前面元素右浮动带来的影响
-
both
- 清除前面元素所有浮动带来的影响
-
-
-
-
浮动元素对父元素的影响
-
影响
- 由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0
-
解决方案
- 直接设置父元素的高度
- 设置父元素浮动
- 为父元素设置overflow属性
- 父元素中，追加空子元素，并设置其clear属性为both
-
-
-
-
显示
-
显示方式
-
属性：display
-
none
- 让生成的元素没有框
- 脱离文档流
-
block
- 块级元素
-
inline
- 行内
-
inline-block
- 行内块
- 位置与行内元素一样
- 允许修改宽和高
-
table
-
让元素表现的和table一样
-
特点
- 每个table独占一行
- table的尺寸以内容为主
-
-
-
-
显示效果
-
显示/隐藏
-
属性：visibility
- visible ： 可见的
- hidden ：隐藏的
- collapse ： 删除表格一行或一列时，表格整体布局不变
-
-
透明度
-
属性：opacity
- 0~1之间的数字(小数)
- 数字越小 透明度越高
- opacity：0.1；若隐若现
-
-
垂直居中对齐
-
属性：vertical-align
- 行内块元素
- 单元格
- img
-
取值
- top
- middle
- bottom
- baseline
-
-
-
光标
-
cursor
- default
- pointer
- crosshair
- text
- wait
- help
-
-
-
列表
-
列表项标志
-
list-style-type
- none
- disc
- ... ...
-
-
列表项图像
-
list-style-image
- url(图像路径)
-
-
列表项位置
-
list-style-position
- outside
- inside
-
-
列表属性
-
list-style
- type url() position;
-
常用：list-style:none;
-
-
-
定位
-
定位属性
-
position
- static
- relative
- absolute
- fixed
- 作用：实现元素的特殊定位方式
-
偏移属性
-
top属性
- 上下移动元素
-
- ：下移动
-
- ：上移动
-
bottom属性
- 上下移动
-
- ： 上移动
-
- ：下移动
-
left 属性
- 左右移动
-
- ： 右移动
-
- ： 左移动
-
right 属性
- 左右移动
-
- ： 左移动
-
- ：右移动
-
-
z-index
- 堆叠顺序
-
-
相对定位
-
what？
- 元素框会相对于它原来的位置偏移某个距离
-
属性 & 值
- position:relative;
- 配合偏移属性实现位置移动
- 测试：对一个已定位元素实现 四个偏移属性值
-
使用场合
- 自身元素的位置微调
- 配合着 绝对定位 来使用
-
-
绝对定位
-
what ？
- 脱离文档流-不占据页面空间
- 会相对于最近的已定位祖先元素去实现定位
- 如果没有已定位的祖先元素，那么就相对于最初的包含块
-
属性 & 值
- position:absolute;
-
注意
- 绝对定位的元素 都将 变成块级元素
- margin的处理，除了 auto外，其他数值均正常显示
- 可以调整堆叠顺序
-
-
堆叠顺序
-
属性：z-index
-
注意：
- 父子之间的堆叠效果永远都是子压父
-
-
固定定位
-
what
- 将元素固定在页面的某个位置处
- 不会随着滚动条的滚动而发生位置的变化
- 脱离文档流，不占据页面空间
-
属性 & 值
- position:fixed
-
-
CSS3Core05
-
复杂选择器
-
兄弟选择器
-
相邻兄弟选择器
- 选择器1+选择器2
-
通用兄弟选择器
- 选择器1~选择器2
-
-
属性选择器
-
[attr]
- 匹配页面中具备attr属性的所有元素
-
[attr1][attr2]
- 匹配页面中既有attr1属性同时也具备attr2属性的元素
-
elem[attr]
- 匹配页面中具备attr属性的elem元素
-
[attr=value]
- 匹配页面中attr属性值为value的元素
-
-
伪类选择器
-
目标伪类
-
:target
- 匹配 活动的html 锚元素
-
-
结构伪类
-
:first-child
- 匹配 属于其父元素中的首个子元素
-
:last-child
- 匹配属于其父元素中的最后一个子元素
-
:nth-child(n)
- 匹配属于其父元素中的第n个子元素
-
:empty
- 匹配每个为空的元素
-
:only-child
- 匹配属于其父元素中的唯一子元素
-
-
否定伪类
-
:not(selector)
- 将满足selelctor选择器的元素排除出去
-
-
-
伪元素选择器
-
:first-letter或 ::first-letter
- 首字符
-
:first-line 或 ::first-line
- 首行
-
::selection
- 被用户选取的部分
-
-
-
内容生成
-
伪元素择器
-
:before
- 匹配 元素的内容区域 之前
-
:after
- 匹配 元素的内容区域 之后
-
-
属性：content
-
生成内容
- 字符串
- 图像:url()
-
-
解决问题
-
浮动元素父元素的高度
- 选择器:after{ content:""; display:block; clear:both; }
-
外边距的溢出
- 选择器:before{ content:""; display:table; }
-
-
-
弹性布局
-
弹性布局
-
用来为框模型提供最大的灵活性
-
语法
-
display
- flex
- inline-flex
-
-
设为flex布局后，子元素的float， clear和vertical-align属性会失效
-
子元素的尺寸允许修改
-
容器的text-align也会失效
-
-
容器属性
-
flex-direction
-
作用
- 决定在主轴的排列方向（项目横向的排列方向）
-
取值
-
row
- 主轴为水平方向，起点在左端，默认值
-
row-reverse
- 主轴为水平方向，起点在右端
-
column
- 主轴为纵轴，起点在上端
-
column-reverse
- 主轴为纵轴，起点在底端
-
-
-
flex-wrap
-
作用
- 如果一条轴线排不下，如何换行
-
取值
-
nowrap
- 默认值，不换行
-
wrap
- 换行，第一行在上方
-
wrap-reverse
- 换行，第一行在下方
-
-
-
justify-content
-
作用
- 定义了项目在主轴（横向）上的对齐方式
-
取值
-
flex-start
- 起点对齐
-
flex-end
- 终点对齐
-
center
- 居中对齐
-
space-between
- 两端对齐，项目之间的间隔都相等
-
space-around
- 每个项目两侧的间隔相等
-
-
-
align-items
-
作用
- 定义项目在交叉轴上如何对齐（一行项目）
-
取值
-
flex-start
- 在交叉轴的起点对齐
-
flex-end
- 在交叉轴的终点对齐
-
center
- 在交叉轴的中间对齐
-
baseline
- 在项目的第一行文字的基线对齐
-
stretch
- 默认值，如果项目未设置高度或auto，将站门整个容器的高度
-
-
-
-
项目属性
-
flex-grow
- 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大
- 取值：整数数字
-
-
-
CSS Hack
-
CSS类内部Hack
-
- ：IE7，6
-
- : IE 6
- \0 : IE 8，9，10
- \9\0：IE9 ,10
-
-
选择器Hack
- *p{
-
} //IE6
- 头部引用Hack
- <!--[if 条件 IE 版本]>
条件注释内容 <![endif]-->
- 条件
- 省略
- 判断是否为指定版本 或是否为 IE浏览器
- gt
- 判断是否大于条件版本浏览器(不包含)
- gte
- lt
- lte
- !
CSSCoreDay06
-
转换
-
介绍
-
改变元素在页面中的 位置，尺寸，角度，形状
-
2D转换 和 3D转换
-
属性
-
转换属性
-
transform
- none
- transform-functions
-
-
转换原点
-
transform-origin
-
v1 v2
- x轴 y轴
-
v1 v2 v3
- x y z
-
单位
- px
- %
- 关键字
-
-
-
-
-
2D转换
-
位移
-
函数：
-
translate(x)
-
- : 向右
-
- ：向左
-
-
translate(x,y)
-
translateX(x)
-
translateY(y)
-
- ： 向下
-
- ： 向上
-
-
-
-
缩放
-
函数
-
scale(value)
- 只给一个值，相当于 x轴和y轴的缩放是相等的
-
scale(x,y)
-
scaleX(x);
-
scaleY(y)
-
-
取值
-
小于1 大于 0
- 缩小
-
大于1
- 放大
-
-
-
旋转
-
函数
-
rotate(ndeg)
- n 为正 顺时针转
- n为负 逆时针转
-
-
注意
- 1、转换原点可能影响转换效果
- 2、元素转换后，坐标轴一同旋转的。旋转后做位移 可能会有不同的效果
-
-
倾斜
-
函数
-
skew(x)
- 让元素向着x轴的方向(横向)倾斜，实际改变的时y轴的倾斜角度,取值为正 逆时针
-
skew(x,y)
-
skewX(x)
-
skewY(y)
- 让元素向着y轴的方向倾斜(纵向)，实际改变的是x轴的倾斜角度，取值为正，顺时针
-
-
-
-
3D转换
-
属性
- perspective：value；
-
3D旋转
- rotatex(xdeg)
- rotatey(ydeg)
- rotatez(zdeg)
- rotate3d(x,y,z,ndeg)
-
-
-
过渡
-
什么是过渡
- 使CSS属性值在一段时间内平滑过渡
- 主要观察的是过程和结果
-
属性(要素)
-
过渡属性
-
transition-property
- 颜色属性
- 取值为数值
- 转换
- 渐变属性
- visibility
- 阴影
-
-
过渡时长
-
transition-duration
- s | ms
-
-
过渡速度时间曲线函数
-
transition-timing-function
- ease
- linear
- ease-in
- ease-out
- ease-in-out
-
-
过渡延迟
- transition-delay
-
过渡属性(综合)
- transition：property duration timing-function delay;
-
-
-
动画
-
使得元素从一种样式逐渐变化为另一种样式(复杂的过渡)
-
动画使用步骤
-
声明动画
- 为动画起名，并且设置 关键帧
- 关键帧 ：某个时间点上，元素的特殊样式
-
为元素调用动画
-
-
声明动画
- @keyframes 名称{ 0% | from{ 样式； } ....... 100% | to{ 样式; } }
- @-webkit-keyframes 名称{}
-
使用动画
-
animation-name
- 绑定的动画名称
-
animation-duration
- 动画一个周期的时长
-
animation-timing-function
- 速度时间曲线函数
-
animation-delay
- 延迟
-
animation-iteration-count
-
播放次数
- 具体数值
- infinite : 无限次
-
-
animation-direction
-
播放方向
-
normal
- 正常
-
reverse
- 逆向
-
alternate
- 轮流播放
-
-
-
animation：name duration timing-function delay iteration-count direction
-
animation-fill-mode
-
动画播放前后的填充状态
- none ：默认
- forwards ：动画完成后，保持在最后一个帧的状态上
- backwards：动画播放前（延迟时间内），保持在第一个帧的状态上
- both
-
-
animation-play-state
- paused ： 暂停
- running ： 播放
-
-
