HTML CSS xmind总结

╰半夏微凉° 2022-10-24 01:46 117阅读 0赞

# HTML CSS #

## HTML ##

### 【第1章 初识HTML】 ###

*  基本骨架

<!DOCTYPE html>
    <html lang="zh-cn">
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    </html>
    
    
    		- !DOCTYPE：声明文档类型 供浏览器解读
    		- html：HTML标签
    
    			- lang：语言，定义语言为英语：en，中文：zh-CN
    
    		- head：文档的头部
    
    			- base
        - 可以统一添加属性
        - <base 属性="属性值">
    			- meta：charset
        - 字符集是多个字符的集合。
        - 计算机要准确处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
        - utf-8包含全世界所有国家需要用到的字符
        - GBK包含全部中文字符，加入对繁体字的支持
    			- meta：name/content
        - 设置关键词：keywords
        - 设置描述信息：description
        - 设置网站作者：author
        - 渲染器：renderer
    			- style
        - 定义内容css样式
    
    		- title：文档的标题
    		- body：文档的主体
    
    - 超文本标记语言
    
    	- 超文本：超越文本，超链接文本
    
    - 注释：

### HTML总结 • 【第2章 标签】
    
    - //1.排版标签
    
    	-     - 标题：<h1></h1>，h1最大 h6最小
        - 段落：<p></p>
        - 换行：<br>
        - 水平线：<hr>
        - 分区：div
        - 范围：span
    
    - //2.文本格式化标签
    
    	-     - 加粗：<b></b>  <strong><strong>
        - 倾斜：<i></i>  <em></em>
        - 文本删除线：<s><s>  <del><del>
        - 文本下划线：<u></u>  <ins></ins>
        - 缩小一号：<small></small>
        - 增大一号：<big></big>
    
    - //3.预格式化标签
    
    	-     - <pre></pre>
    	-     - 作用：保留编码时的格式
    
    - //4.&符号
    
    	-     - 空格：&nbsp
        - 大于/小于：&gt/&lt
        - 版权：&copy
        - &符号：&amp
    
    - //5.超链接标签
    
    	- 用法
    
    		- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    
    	- 锚点：页面内部跳转
    
    		-     - 给标签一个id和值
        - 给a标签href值=#id名称
    
    	- 指定链接目标：href
    
    		-     - 本地html，或者远程url页面地址：跳转
        - 资源文件：下载
        - 图像、表格、音频、视频等都可以添加超链接
    
    	- 弹出方式：target
    
    		-     - _self默认值
        - _blank新窗口打开
    
    - //6.图片标签
    
    	- 用法
    
    		- <img src="图片URL">
    
    	- 指定图片目标：src
    
    		-     - 同一级：目标名称
        - 进一级：文件名/
        - 退一级：../
        - 绝对路径：绝对地址
    
    	- 属性
    
    		-     - 宽：width
        - 高：height
        - 边框：border
        - 图片无法显示的提示：alt
        - 鼠标移上去，显示的内容：title
        - 拖动：draggable（true false）
        - 如果只给一个宽或只给一个高，等比例缩放
    
    - //7.视频和音频标签
    
    	- 视频标签：video
    
    		-     - <video src="视频URL"></video>
        - 兼容：MP4和WebM     MP4和Ogg
        - 如果浏览器不支持导致视频不能播放，video包裹的文字就会显示
    
    	- 音频标签：audio
    
    		-     - <audio src="音频URL"></audio>
        - 兼容：MP3和WAV     MP3和Ogg
        - 如果浏览器不支持导致视频不能播放，audio包裹的文字就会显示
    
    	- 标签：多个资源：source
    	- 属性
    
    		-     - 显示控件：centrols
        - 循环播放：loop
        - 自动播放：autoplay
        - 停止播放：paused
        - 是否静音：muted
        - 在播放：played
    
    - //8.emmet语法
    
    	- 作用
    
    		- 快捷生成html相关标签的一种语法，其他软件需要安装
    
    	- 用法
    
    		-     - 生成骨架：!+tab
        - 生成一个标签：标签
        - 生产多个标签：标签*数字
        - 父子关系：父标签>子标签
        - 兄弟关系：兄弟1+兄弟2
        - 有id属性的标签：标签 #id名
        - 有类属性的标签：标签 .类名
        - 生成标签带内容：标签{内容}
        - 计数器：标签名{$}*数字
        - 指定标签的属性：标签[属性名=属性值]
    
    - //9.表格
    
    	- 分层
    
    		- 表格容器/行容器/单元格容器：table/tr/td
    
    	- 标签
    
    		-     - 表头单元格标签：th、文字会居中且加粗
        - 表格标题标签：caption
        - 题头：thead
        - 正文：tbody
        - 脚注：tfoot
    
    	- 属性
    
    		-     - 跨行合并：rowspan
        - 跨列合并：colspan
        - 边框：border
        - 边框颜色：bordercolor
        - 背景颜色：bgcolor
        - 单元格之间的间距：cellspacing默认2像素
        - 单元格内容与边框的间距：cellpadding默认1像素
        - 表格宽度：width
        - 表格高度：height
        - 水平对齐：align="left/center/right"
        - 垂直对齐：valign="top/middle/bottom"
    
    - //10.列表
    
    	- 无序列表：ul
    
    		-     - 实心圆(默认值)：disc
        - 圆环：circle
        - 方形：square
        - 不显示标记：none
    
    	- 有序列表：ol
    
    		-     - 数字(默认值)：1
        - 字母：a/A
        - 罗马数字：i/I
    
    	- 自定义列表：dl/dt/dd
    
    		-     - dt是小标题、dd是对dt的解释
    
    - //11.表单
    
    	- 基本表单结构
    
    		- <form action="">
    	<input name="key" type="text">
    	<input type="submit">
    </form>
    
    			-     - 功能：提交数据
    			-     - 表单域：form
    			-     - 输入型控件必须要有name属性和value值
    			-     - 表单控件、位于表单域以内
    
    	- 表单控件：input
    
    		-     - 数据的提交去向：action
        - 数据的提交方式：method：get/post
        - 说明标签、用id产生关联：label
    		-     - 文本框：text
        - 密码框：password
        - 邮箱框：email
        - 数字框：number，间隔属性：step
        - 搜索框：search
    		-     - 文本域：textarea
        - 文件域：file
        - 选择域：select/optgroup/option
        - 隐藏域：hidden
        - 滑块：range
    		-     - 提交按钮：submit
        - 单选按钮：radio
        - 复选按钮：checkbox
        - 图片按钮：image
        - 普通按钮：button
        - 清空按钮：reset
    
    	- 属性
    
    		-     - 名称：name
        - 提交的值：value
        - 显示宽度：size
        - 控制输入的字符数：maxlength
        - 最小：min
        - 最大：max
        - 输入为空显示的字符：placeholder
        - 自动获得光标：autofocus
    		-     - 必填项：required
        - 只读：readonly
        - 禁用：disabled
        - 单选/多选设置默认选中：checked
        - 正则表达式：pattern
        - 设置上传的文件类型：accept
        - 下拉列表允许多选：multiple
        - 文本域防止拖拽：resize：none;
    		-     - name会变成变量名
        - value会变成变量值
    
    	- 表单type类型
    
    		-     - 接收URL：url
        - 接收电话号码：tel
    
    	- 表单属性
    
    		-     - 自动完成：autocomplete、取值 no 和 off
        - 不进行内容验证：novalidate
    
    - //12.内嵌标签
    
    	- 用法
    
    		- <iframe src="引用页面地址" name=""><iframe>
    
    	- 属性
    
    		-     - 引用地址：src
        - 框架名：name
        - 和超链接达成关联：target="name"
        - 边框：frameborder
        - 页面滚动：scrolling
    
    - //13.嵌入对象：object
    
    	- 作用
    		- 是用来定义一个嵌入的对象，经常用来在页面中添加多媒体
    		- （图像、音频、视频、Java applets、ActiveX、PDF、Flash等
    
    	- 属性
    		- 规定对象所属的表单：form（值：form_id）
        	- 指定供对象处理的数据文件的 URL：data（值：URL）
        	- data属性中规定的数据的 MIME 类型：type
        	- 宽：width
        	- 高：height
        	- 名称：name
        	- 规定与对象一同使用的客户端图像映射的 URL：usemap
    
    ## CSS
    
    ### CSS总结 • 【第1章 CSS简介和选择器】
    
    - CSS简介
    
    	-     - CSS是cascading Style Sheet的缩写
        - CSS全称为"级联样式表"，通常又称为“风格样式表"用于网页风格设计
    
    - CSS的三种引入方式
    
    	-     - 行内式：<div style="样式属性:样式值; "></div>
        - 内嵌式：<style></style>内写样式
        - 外链式：<link rel="stylesheet" href="资源地址" rel="和资源的关系">
        - 插入图标：<link rel="icon" href="图标地址" type="image/x-icon">
        - JS里写样式：背景颜色style.backgroundColor="red"
    
    - 选择器
    
    	- 标签选择器：通过标签选择
    
    		- 标签名{ 样式属性:样式值; }
    
    	- 类选择器：通过class选择
    
    		-     - .class值{ 样式属性:样式值; }
        - 不能以数字开头
    
    	- id选择器；通过id选择
    
    		-     - #id名{ 样式属性:样式值; }
        - 不能以数字开头，具有唯一性
    
    	- 通配选择器；通过*选择
    	- 交集选择器
    
    		-     - 从多个相同的元素中选择想选择的元素
        - 用法：由两个选择器连接构成， span.类{}   span#id{}
    
    	- 并集选择器
    
    		-     - 同时给各个选择器添加相同的部分样式
        - 用法：通过逗号连接选择器，     选择器1,选择器2{}
    
    	- 层次选择器
    
    		-     - 后代：M  N{}
        - 父子：M>N{}
        - 兄弟：M~N{}当前M下面的所有兄弟N
        - 相邻：M+N{}当前M相邻的N标签
    
    	- 优先级
    
    		-     - 行内式>内嵌式>外链式
        - id选择器>类选择器>标签选择器>通配选择器
        - 最优先：!important
    
    	- 伪类选择器
    
    		-     - 未点击：link
        - 经过：hover
        - 点击时：active
        - 点击后：visited
        - 默认超链接为：蓝色，下划线
        - 匹配所有：any-link
    
    	- 结构伪类选择器
    
    		-     - 为父级的第一个是该子元素的添加样式：first-child
        - 为父级的最后一个是该子元素的添加样式：last-child
        - 选择父级的第N个是该子元素的添加样式：nth-child(1)
    (指定：整数）(所有：N）(奇数：2N+1）(偶数：2N)
        - 选择每个该元素，是其父级第一个：frist-of-type
        - 选择每个该元素，是其父级最后一个：last-of-type
        - 选择每个该元素，是其父级第N个：nth-of-type(1)
    
    	- 伪元素选择器
    
    		-     - 为第一个字符添加样式：first-letter
        - 为第一行添加样式：first-line
        - 在最前面添加内容：before
        - 在最后面添加内容：after

### CSS总结 • 【第2章 CSS样式】
    
    - //1.字体样式
    
    	- 大小：font-size
    
    		-     - 默认：inherited，继承父级大小
        - 像素：px          百分比：%          倍数：em
        - 小：x-small         大：large            正常：medium
    
    	- 粗细：font-weight
    
    		-     - 默认：normal，普通
        - 粗体：bold，强调700       自定义：100-900
    
    	- 字体：font-family
    
    		- 格式："宋体","Arial";
    
    	- 样式：font-style
    
    		-     - 默认：normal
        - 斜体：oblique          带有斜体字体：italic
    
    	- 颜色：color
    
    		-     - 名称：red          16进制的RGB值：#RRGGBB
        - rgba函数：rgba(red,green,blue,透明度)       rgba(255,0,0,0.5)
        - 透明：transparent
    
    
    	- 字体抗锯齿：font-smoothing
    
    		-     - 默认值：subpixel-antialiased       关闭平滑，用锯齿锋利的边缘：none
        - 光滑的像素级别字体，不是亚像素：antialiased
        - 与灰度反锯齿呈现文本，不是亚像素：-moz-osx- grayscale
    
    	- 复合样式：font
    
    		-     - 基本写法：样式 粗细 大小 字体、粗细 样式 大小 字体
    		-     - 必要写法：大小 字体
    
    - //2.背景样式
    
    	- 背景颜色：background-color
    	- 背景图片：background-image
    
    		- 路径：url(路径)
    
    	- 背景图片平铺方式：background-repeat
    
    		-     - 默认：repeat，平铺满
        - 水平平铺：repeat-x         垂直平铺：repeat-y         不平铺：no-repeat
    
    	- 背景图片位置：background-position
    
    		-     - 坐标：(x y)          数字：(px/%)
        - 水平：(left/center/right)            垂直：(top/center/bottom)
    
    	- 背景图随滚动条的移动方式：background-attachment
    
    		-     - 按元素进行偏移(默认)：scroll
        - 按浏览器进行偏移：fixed
    
    	- 背景图片大小：background-size
    
    		-     - 默认：auto
        - 数字：(px/%)、只给一个值(宽度)，第二个为auto
        - 缩放至完全覆盖背景区域：cover
        - 缩放至宽高适应背景区域：contain
    
    	- 复合样式：background
    
    		-     - 基本写法：颜色 图片 平铺 滚动 位置
    		-     - 颜色渐变：linear-gradient(to 方位或度数deg，颜色 0%，颜色 100%)
    
    - //3.段落样式
    
    	- 水平对齐方式：text-align
    
    		-     - 默认：left、左对齐
        - 居中：center          右对齐：right          两端对齐：justify
        - 匹配父级：match-parent
    
    	- 垂直对齐方式：vertical-align
    
    		-     - 默认、基线：baseline
        - 顶线：top          中线：middle          底线：bottom
    
    	- 行高：line-height
    
    		-     - 默认：不是固定值，根据当前字体的大小变化
        - 数字：px或scale(相对于原来字体的比例)
    
    	- 首行缩进：text-indent
    
    		- 缩进：font-size的两倍，或2em[em相对单位]，永远跟一个字体设置的大小相同
    
    	- 文本装饰：text-decoration
    
    		-     - 默认：none
        - 下划线：underline
        - 删除线：line-through
        - 上划线：overline
    
    	- 文本大小写：text-transform（针对英文）
    
    		-     - 小写：lowercase
        - 大写：uppercase
        - 首字母大写：capitalize
    
    	- 字间距：letter-spacing
    	- 词间距：word-spacing（针对英文）
    	- 强制折行
    
    		-     - 非常强烈的折行：word-break:break-all;
        - 不是那么强烈的折行：word-wrap:break-word;
    
    	- 内联内容方向：direction
    
    		-     - 左往右：ltr        表示：left-to-right
        - 右往左：rtl        表示：right-to-left
    
    	- 文字排版方式：writing-mode
    
    		-     - 默认值：horizontal-tb             表示：水平-top-bottom
        - 垂直，左至右：vertical-lr         垂直，右至左：vertical-rl
    
    	- 文字描边：-webkit-text-stroke
    
    		-     - 描边宽度：-webkit-text-stroke-width
        - 描边颜色：-webkit-text-stroke-color
    
    	- 处理元素内的空白：white-space
    
    		-     - 默认，忽略：normal
        - 文本不进行换行：nowrap
    
    	- 元素周围的线：outline
    
    		- 宽度：outline-width     颜色：outline-color     样式：outline-style
    
    	- 堆叠顺序：z-index
    
    		- 属性：数字，数字越大，就处于越顶层
    
    	- 不透明度：opacity
    
    		- 属性：从 0.0 （完全透明）到 1.0（完全不透明）
    
    	- 元素的可视效果(滤镜)：filter
    
    		-     - 默认：none          默认：initial          继承：inherit
        - 高斯模糊：blur(px)          阴影：drop-shadow(h v 模糊半径 尺寸 颜色)
        - 亮度：brightness(%)       对比度：contrast(%)       透明度：opacity(%)
        - 饱和度：saturate(%)          灰度：grayscale(%)          深褐色：sepia(%)
        - 色相旋转：hue-rotate(deg)      旋转：invert(%)
        - 接收一个XML文件，设置SVG指定描点：url()
        - IE浏览器透明度alpha(opacity=30)、表示opacity(30%)
    
    - //4.边框样式
    
    	- 边框大小：border-width
    	- 边框颜色：border-color
    	- 圆角边框：border-radius
    
    		-     - 像素：px                  百分比：%
        - 只设置一个角：border-top-left-radius
    
    	- 边框样式：border-style
    
    		-     - 实线：solid
        - 虚线：dashed
        - 点线：dotted
        - 双线：double        
    
    	- 合并边框：border-collapse
    
    		-     - 默认：separated,分开
        - 合并：collapse
    
    	- 单独选择一边：border-top/right/bottom/left
    	- 复合样式：border
    
    		- 基本写法：大小 样式 颜色
    
    - //5.列表样式
    
    	- 设置标记：list-style-type
    
    		-     - 无：none              实心圆：disc          空心圆：circle
        - 方形：square
    
    	- 将图像作为标记：list-style-image
    
    		- 路径：url(路径)
    
    	- 设置标记的位置：list-style-position
    
    		-     - 默认：outside,外面           里面：inside
    
    	- 复合样式：list-style
    
    		- 基本写法：标记 图片标记 标记位置
    
    - //6.图片边框：border-image
    
    	- 样式
    
    		-     - 边框图片路径：border-image-source
        - 图片边框向内偏移：border-image-slice
        - 图片边框的宽度：border-image-width
        - 边框图像区域超出边框的量：border-image-outset
        - 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
        - border-image-repeat
    
    	- 复合样式
    
    		-     - 基本写法：路径 内偏移 宽度 超出 平铺
    		-     - 默认：none 100% 1 0 stretch
    
    - //7.元素显示类型：display
    
    	- 块级元素：独占一行，可以控制宽高，宽度默认100%
    
    		-     - 默认：block                     不占空间隐藏：disp：none
    
    	- 行内元素：不独占一行，宽高设置无效，宽度默认为内容的宽
    
    		-     - 默认：inline                     不占空间隐藏：disp：none
    
    	- 行内块元素：不独占一行，可以控制宽高，宽度默认为内容的宽
    
    		-     - 默认：inline-block           不占空间隐藏：disp：none
    
    	- 单元格元素：可以使用vertical-align属性
    
    		- 默认：table-cell               不占空间隐藏：disp：none
    
    	- 元素显示和隐藏：visibility
    
    		- 默认：visible，显示          占空间隐藏：hidden
    
    - //8.样式特性
    
    	- 层叠性
    
    		- 后来居上：后面的会替代前面的样式
    
    	- 继承性
    
    		- 子承父业：继承父元素的某些样式
    
    - //9.盒子模型
    
    	- 属性
    
    		-     - 内容宽度：width
        - 内容高度：height
        - 盒子边框：border
        - 自动伸缩：box-sizing：border-box；
    
    	- 内边距：padding
    
    		-     - 自动设置：auto          值：10
        - 行内效果不规范
        - 子元素设置padding，父级盒子不发生变化
    
    	- 外边距：margin
    
    		-     - 自动设置：auto          负值：-10
        - 垂直外边距会合并，取最长
        - 背景颜色会填充到margin以内的区域（不包括margin区域）
        - 顶部塌陷：子级设置顶部会让父级一起移动，给父级设置边框或内边距
        - 或：溢出隐藏；浮动；定位
        - 水平方向控制：margin-inline-start          margin-inline-end
        - 垂直方向控制：margin-block-start          margin-block-end
    
    - //10.盒子阴影：box-shadow
    
    	- 参数1-6
    
    		-     - 水平偏移量，正值向右，负值向左
        - 垂直偏移量，正值向下，负值向上
        - 模糊半径（可选）数值越大越模糊，0表示实心阴影
        - 阴影尺寸（可选）
        - 阴影颜色
        - 内/外阴影（可选）   外部：outset         内部：inset
    
    	- 文字阴影参数1-4：text-shadow
    
    		-     - 水平偏移量
        - 垂直偏移量
        - 模糊半径（可选）
        - 阴影颜色
    
    - //11.浮动和清除
    
    	- 添加浮动：float
    
    		-     - 默认：none，不浮动
        - 左浮动：left          右浮动：right
    
    	- 浮动的影响
    
    		-     - 浮动对显示类型的影响：变成类似inline-block
        - 父子影响：浮动的子级会受到父级影响
        - 兄弟影响：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，
          那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
          如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，
          也就是说A的顶部总是和上一个元素的底部对齐。
    
    	- 清除浮动：clear
    
    		-     - 默认：none，允许出现浮动
        - 清除左浮动：left          清除右浮动：right          清除两端浮动：both
        - 方法一，隔墙法，来一个标准流盒子，给边框。
        - 方法二，溢出隐藏：overflow：hidden/auto/scroll
        - 方法三，clearfix:after{content display clear}
    
    	- 了解清除浮动
    
    		- 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
    
    - //12.定位：position
    
    	- 静态定位：static
    
    		- 遵循正常文档流，top、right、bottom、left等属性无效
    
    	- 绝对定位：absolute
    
    		-     - 脱离正常文档流，使用left、right、top、bottom等属性进行定位
        - 根据父级进行定位，找设置了定位（除了static）的祖先类元素（父类及以上），直到"body"
        - 不具有margin，
    
    	- 相对定位：relative
    		- 遵循正常文档流，使用left、right、top、bottom等属性进行定位
    
        - 定位时，原本该元素占据的空间位置不变，
    	  以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。
    	  
        - 对象不可层叠
    
    	- 固定定位：fixed
    		- 脱离正常文档流，使用left、right、top、bottom等属性以窗口左上角为参考点进行定位
    
    	- 控制溢出部分：overflow
    		-     - 默认，可见：visible        不可见：hidden
    
        - 滚动可见：scroll             自动：auto            继承：inherit
        - 文字溢出显示省略号：text-overflow: ellipsis;
    
    - //13.鼠标指针样式：cursor
    
    	- 属性
    
    		-     - 默认：default
        - 自动：auto
        - 文字：text
        - 加载：wait
        - 十字准星：crosshair
        - 指针：pointer
        - 帮助：help
        - 移到：move
        - 禁止：not-allowed
        - 向北的箭头：n-resize
        - 箭头朝右上：ne-resize
        - 向东的箭头：e-resize
        - 箭头朝右下：se-resize
        - 向南的箭头：s-resize
        - 箭头朝西南：sw-resize
        - 向西的箭头：w-resize
        - 箭头朝西北：nw-resize
        - 放大：zoom-in
        - 缩小：zoom-out
    
    - //14.浏览器私有前缀
    
    	- -webkit：chrome、safar私有属性
    -ms：      IE浏览器私有属性
    -moz ：   firefox浏览器私有属性；
    -o：         Opera私有属性。
    
    - //15.tabindex属性
    
    	- 作用
    
    		- 可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序
    
    	- 用法
    
    		-     - 默认：0
        - 加入TAB键序列：1-32767的一个值
        - 排除：-1
    
    - //16.锚点跳转过度效果：scroll-behavior
    
    	- 作用
    
    		- 使锚点跳转有过度效果
    
    	- 属性
    
    		-     - 默认、滚动框立即滚动：auto
        - 实现平稳的滚动：smooth
    
    - //17.转变形态：transform
    
    	- 位移：translate
    
    		-     - 格式：translate(X,Y)       X轴：translateX()         Y轴：translateY()
        - 百分比：偏移自身的百分比
    
    	- 旋转：rotate
    
    		-     - 顺时针：rotate(45deg)
        - 水平：rotateX(deg)           垂直：rotateY(deg)
    
    	- 设置中心点：transform-origin
    
    		-     - 默认：50% 50%，同：center center
        - 方位名词：水平 垂直          像素：px
    
    	- 倾斜：skew
    
    		-     - 格式：skew(Xdeg,Ydeg)
        - 水平：skewX(deg)             垂直：skewY(deg)
    
    	- 放大缩小：scale
    
    		-     - 默认一倍：scale(1,1)          水平：scaleX(0.5)          垂直：scaleY(0.5)
    
    	- 过度效果：transition
    
    		-     - 过渡时间：all 花费时间 何时开始
        - 指定形态：形态 花费时间 何时开始
        - 默认：ease              匀速：linear
        - 加速：ease-in          减速：ease-out          加速然后减速：ease-in-out
    
    	- 复合样式
    
    		-     - 转变形态基本写法：位移在最前
    		-     - 过度效果基本写法：形态 花费时间 何时开始 运动曲线
    
    - //18.动画：animation
    
    	- 样式
    
    		-     - 动画名称：animation-name
        - 花费时间：animation-duration
        - 运动曲线：animation-timing-function（默认：ease）
        - 何时开始：animation-delay
        - 播放次数：animation-iteration-count（无限次：infinite）
        - 是否反方向：animation-direction
                 正向：normal                          反向：reverse
    先正向再反向：alternate          先反向再正向：alternate-reverse
        - 运行或暂停：animation-play-state（运行：running）(暂停：paused)
        - 状态：animation-fill-mode（默认：none ）
        - (forwards：播放完后，保持最后一帧）
        - (backwards：播放时，保持第一帧）
        - (both：两个模式都要)
    
    	- 复合样式
    
    		- 基本写法：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向
    
    	- 创建动画
    
    		-     - 关键帧：@keyframes
        - 开始：from          或百分比：0%
        - 结束：to              或百分比：100%
    @keyframes 动画名称{
    	from {
    		background-color: red;
    	}
    
    	to {
    		background-color: blue;
    	}
    }

### CSS总结 • 【第3章 弹性布局：flex】 ###

*  主轴方向：flex-direction
    
     *      - 默认、水平从左往右：row          水平从右往左：row-reverse
     *  垂直从上往下：column 垂直从下往上：column-reverse
 *  元素在主轴的对齐方式：justify-content
    
     *      - 默认、左对齐：flex-start          右对齐：flex-end          居中：center
     *  元素间距相等：space-between 元素两端间距相等：space-around
     *  元素间距与两端间距相等：space-evenly
 *  换行方式：flex-wrap
    
     *      - 默认、不换行：nowrap
     *  换行：wrap 逆方向换行：wrap-reverse
 *  对齐div元素：align-items
    
     *      - 默认、填满父级宽高：stretch
     *  居中：center 位于开头：flex-start 位于结尾：flex-end
     *  基线：baseline 设置为默认：initial 继承：inherit
 *  多项多轴线的对齐方式，一个轴线没有作用：align-content
    
     *      - 默认、轴线占满整个交叉轴：stretch
     *  交叉轴起点：flex-start 交叉轴终点：flex-end 交叉轴中点：center
     *  交叉轴两端，间隔平均分布：space-between
     *  每根轴线两侧的间隔都相等：space-around
 *  弹性布局属性
    
     *  排列顺序，数值越小。排列越靠前：order
        
         *  默认：0
     *  放大比列：flex-grow
        
         *  默认：0
     *  缩小比列：flex-shrink
        
         *  默认：1
     *  在分配多余空间之前，项目占据的主轴空间：flex-basis
        
         *  默认：auto
            
             *  复合样式：flex
     *  复合样式：flex
        
         *  基本写法：放大比例 缩小比例 占据的主轴空间
     *  单个或多个项目的对齐方式：align-self、可覆盖align-items属性
        
         *      - 默认：auto             填满父级宽高：stretch
     *  居中：center 位于开头：flex-start 位于结尾：flex-end
     *  基线：baseline 设置为默认：initial 继承：inherit

### CSS总结 • 【第4章 WAI-ARIA无障碍】 ###

*  作用
    
     *      - 为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范
     *  在 WAI-ARIA概述 中对WAI-ARIA及其他支持文档进行了介绍
 *  组成
    
     *      - role：(角色)标识了一个元素的作用
     *      - aria：描述了与之有关的事物（特征）及其是什么样的（状态）
 *  role角色
    
     *      - alert：表示警告
     *  dialog：表示Modal弹出窗
     *  presentation：表示描述
     *  application：表示应用
     *      - button：表示按钮
     *  raido：表示单选框
     *  checkbox：表示复选框
     *  combobox：表示表单控件
     *      - grid：表示网格
     *  gridcell：表示单元格
     *  group：表示组合并
     *      - heading：表示标题、h1
     *  listbox：表示列表框、select
     *  option：表示选项
     *  menu：表示菜单
     *  menubar：表示菜单栏
     *  menuitem：表示菜单项
     *  menuitemradio：只能单选的菜单项
     *  menuitemcheckbox：可复选的菜单项
 *  ARIA属性
    
     *      - aria-activedescendant：当工具栏获取焦点时，它的子控件获取焦点
     *  aria-atomic：表示区域内容是否完整播报。值为 true 和 false
     *  aria-autocomplete：表示表单的自动完成，可选值有 inline 、 list 、both 和 none。
     *  aria-busy：表示当前区域的忙碌状态。默认为 false。取值为 true 时，表示该区域正在加载。取值为 error 时，表示该区域验证无效
     *  aria-controls：如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。
     *  aria-dropeffect：表示拖拽效果。可选值有： copy , move , reference , execute , popup , none , 依次表示：复制，移动，参照，执行，弹出以及没有效果。
     *  aria-flowto：如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。
     *  aria-grabbed：拖拽中元素的捕获状态。默认为 undefined ，表示元素捕获状态未知。 true 表示元素可以捕获； false 表示不能被捕获。
     *  aira-haspopup：true 表示点击的时候会出现菜单或是浮动元素； false 表示没有pop-up效果。
     *  aria-label：定义一个字符串值标记当前元素。
     *  aria-labelledby：一般用在区域元素上，对应的 id 一般为对应的标题或是标签元素的 id 关系型属性。
     *  aria-live：默认为off, 表示不宣布更新；polite 表示只有用户闲时宣布；assertive 表示尽快对用户宣布；rude 表示即时提醒用户，必要的时候甚至中断用户。
     *  aria-multiselectable：表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。
     *  aria-owns：表示元素所拥有的、值为目标元素 id
     *  aria-readonly：表示是否只读。默认为 false , 表示元素值可以被修改。
     *  aria-relevant：表示区域内哪些操作行为需要做出反应。additions 新增时, removals 删除时, text 改变时, all 同时使用以上三个属性值。
     *  aria-required：表示元素值是否必须，默认为false。
     *  aria-secret：表示机密状态
     *  aria-sort：排序，值：ascending (↑), descending (↓), none , other
     *  aria-valuetext：定义等同于 aria-valuenow 可读的文本
     *  aria-level：数值。表示等级
     *  aria-posinset：数值。用在设置和获取一个集合内某项的当前位置
     *  aria-valuemax：数值，允许的最大值
     *  aria-valuemin：数值，允许的最小值
     *  aria-valuenow：数值，表示当前值
 *  ARIA状态
    
     *      - aria-checked：表示检查的状态，true 表示元素被选择；false 表示元素未被选择；mixed 表示元素同时有选择和未选择状态。
     *  aria-disabled：表禁用状态， true 表示当前是非激活状态； false 表示清除非激活状态。
     *  aria-expanded：表示展开状态，默认为 undefined , 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false 表示元素不是展开的。
     *  aria-hidden：可选值为 true 和 false , true 表示元素隐藏(不可见)， false 表示元素可见。
     *  aria-invalid：表示元素值是否错误的。默认为 false , 表示是OK的，如果为 true , 则表示值验证不通过。
     *  aria-pressed：表示按下的状态，默认为 undefined , 表示按下状态未知； true 表示元素往下（按钮按下）； false 表示元素抬起； mixed 表示元素同时有按下和没有按下的状态。
     *  aria-selected：表示选择状态，默认为 undefined ，表示元素选择状态未知。 true 表示元素已选择；false 表示未被选中。

*XMind - Trial Version*