day10、day11笔记

z-index

设置定位的层，如果设置该属性，则默认为0
如果 z-index的值相同，则还是后加载的元素高于先加载的
如果值不相同，值大的元素层级高

transparent 透明色

opacity

设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容
0完全透明，1完全不透明

vertical-align

行元素在垂直方向的对齐方式
top 顶部对齐
middle 中间对齐
baseline 基线对齐
bottom 底部对齐
vertical-align 只能使用在行元素或者内联元素上，不能使用在块元素上

使用方式：

1. 如果父元素的高度由其中一个子元素撑开，那么可-以给其他元素设置vertical-align: middle 就可以实现居中效果
2. 如果父元素高度固定，不是子元素撑开高度，则可以通过 添加一个自定义标签，该标签的高度为父元素的高度，然后设置 vertical-align：middle 和display：inline-block；就可以使父元素的内容居中

vertical-align 也可以用来解决img标签的缝隙

居中专题

1.块元素水平居中，设置margin: 0 auto;
2. 行元素，内联元素的水平居中，在父级设置 text-align：center
3. 使用vertical-align 设置行元素和内联元素的垂直居中
4. 使用定位 和 margin 结合，设置元素居中
a.给需要居中的元素设置margin-top和margin-left 为自身的一半
b. 给需要居中的元素设置定位距离为 left：50%；top： 50%
5. 父元素宽高固定，子元素绝对定位，可以实现绝对居中
a. 父元素宽高固定
b. 子元素绝对定位
c. 给子元素设置 left：0； top：0 ；right：0； bottom：0；
d. 给子元素设置margin ：auto

table表格

table：表示当前创建一个表格
tr：表示表格中的一行
th：表示表格中的一个单元格，一般代表表头
td：表示表格中的一个单元格，一般代表表内容
以上都是块标签

给table 添加border属性，设置边框
cellspacing 设置单元格和单元格之间的距离
cellpadding 设置单元格内容和边框之间的距离

合并单元格
colspan 合并列（横向合并）
rowspan 合并行（竖向合并）

使用border-collapse 设置单元格的边框是否合并
border-collapse：separate；不合并
border-collapse：collapse；合并

以上width height 属性，可以设置到 table td th 上

form表单

form 块标签

action 属性，数据要提交到的服务器地址，一般是接口地址
method 属性，数据的提交方式
值有
get，post，put，delete 等
get：get请求可以把数据拼接到 接口地址的url上，缺点是，不安全，提交的数据较少
post：post请求，在post提交的数据信息中，不会看到提交的数据，安全，提交的数据较大

label标签

行标签，表示input的标题

input标签

输入框，常用表单输入
type属性，用来设置输入框的类型
属性值
text 文本输入框
password 密码输入框
button 普通按钮
submit 提交按钮
checkbox 多选框
hidden 隐藏框
radio 单选框
reset 重置按钮
value属性，设置input的值
name属性，用于数据交互，name的值即是后台数据的字段名
placeholder 属性，输入框的提示信息
maxlength 属性，输入字符的最大长度

单选框和复选框的默认选中，只需要在 input 上设置checked属性即可

禁用某一个input标签，只需要给input 添加 disabled 属性即可

给某一个输入框添加只读属性 readonly ，确保输入框内容可以通过程序修改，并且能提交到后台

readonly 和 disabled 他们都不能手动修改
disabled 的值不能提交和使用，readonly的值可以提交到后台

单选框 同一类型选项，他们的name 值必须相同

label 的for属性，用来绑定对应 id的input ，例如

<label for="abc"></label>
只需要对该label操作，则会在当前页面找到 id="abc" 的input，并且选中该input

设置 textarea
通过 css的resize属性，设置拖拽的方向

horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽

input

行标签，可以设置宽高
minlength 最少字符数
required 设置为必填项
type 属性补充
file 提交文件
number 输入数字

select 下拉框，行标签
子级必须是option标签，option 具有value属性
fieldset 创建一个组
legend 组的标题
textarea 多行文本输入框
属性
cols 设置具有多少列
rows 设置具有多少行

H5新标签

mark 标记标签

meter 用电量标签，常用于能量的使用或者内容的使用量等

属性：
			value 当前电量的值
			max 最大值
			min 最小值
			low 用电量最低报警值
			high 用电量最高报警值

progress 进度条标签，只有最大max属性，没有min属性，value属性是当前值

ruby标签，常用来做拼音，注音，注释等

rt 表示注释的内容
rp 如果浏览器不支持，显示的内容

datalist 数据列表

通过input的 list 属性和datalist的id 属性进行绑定
	datalist 中的选项使用 option 标签
	通过datalist 可以制作关联查询效果

角标

sup 上角标
sub 下角标

常用于注释