HTML CSS xmind总结

HTML CSS

HTML

【第1章 初识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.&符号

	-     - 空格: 
    - 大于/小于:>/<
    - 版权:©
    - &符号:&

- //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

你可能感兴趣的:(HTML,CSS总结,html,css,css3,html5,经验分享)