day07-day12

浮动

浮动的原理：设置浮动的元素超出文档流
文档流：就是元素从上到下从左到右的布局顺序

浮动的作用：从整体出发，把标签元素进行横向布局

使用inline-block横向布局的弊端：
1.元素之间有缝隙，需要解决
2.低版本浏览器不支持inline-block

浮动的特点
1.浮动元素超出文档流
2.块属性标签浮动之后不再独自占据一行空间，如果不设置宽高，则他的宽高由内容撑开
3.块属性标签浮动之后，他的margin属性的auto值失效
4.行属性标签浮动之后，可以设置宽和高，并且支持上下padding和上下margin

清浮动

当子级元素进行浮动的时候，他的父元素会因此产生影响，由于浮动元素脱离文档流，父元素没有被子元素撑开，导致父元素没有高度，这样在布局的时候会产生混乱

清除浮动产生的影响（简称：清浮动）
1.给浮动元素的父级添加overflow：hidden
2.给父元素设置指定高度，确保布局正确
3.给父元素添加display：inline-block，该方法兼容性差
4.给父元素添加浮动,可能会影响布局
5.设置一个空标签，在空标签中设置属性
.clear{
clear:both；
/防止ie低版本具有默认高度/
height:0;
overflow:hidden;
}
6.通过after伪元素清浮动
.clearfix::after{
content:‘’;
display: block;
height: 0;
overflow: hidden;
clear:both;
}
精灵图
精灵图，又叫sprite（雪碧图）
他是把在项目开发中所用到的小图标拼合到一个图片上，这样在项目加载的时候，一次性的把小图标请求到客户端。减少了http请求，减轻服务器压力，提高服务器效率

定位

认识定位

原理：定位的元素超出文档流

什么时候需要用到定位？
在同一块文档流的区域内，同时叠放多个标签

定位的流程：
1.通过position属性设置定位的参照物
2.通过 方位 属性设置具体方位的定位数据，方位属性有top，right，bottom，left，他是用来设置距离参照物有多远

他们的优先级是 left > right
top > bottom

position 属性的值
static relative absolute fixed
static：静态定位，无参照物，不定位
relative：相对定位，以 元素本身没有移动之前位置为参照物
absolute：绝对定位,以当前元素的第一个具有定位属性的祖先级元素 为参照物，作为参照物的祖先级元素必须具有position：relative或者position：absolute设置
如果没有定位的祖先级属性，则参照物是body
fixed:固定定位,相对于浏览器窗口定位

定位的特点
相对定位的特点
1.相对定位是基于元素原来的位置进行定位
2.元素相对定位以后对元素本身没有任何影响
3.元素设置了相对定位以后，虽然元素脱离文档流，但是元素本身的位置依然占据文档流的空间
4.相对定位的元素，天然的提升层级，比没有定位的元素层级高
5.相对定位的元素可以通过left，bottom，right，top改变元素的位置

绝对定位的特点
1.设置了绝对定位的元素会脱离文档流，不占据文档流空间，并且提升层级
2.行元素设置完绝对定位以后可以设置宽高，可以设置上下padding和上下margin，如果不设置宽高，宽高由内容撑开。
3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位。如果不存在这样的祖先级元素，则相对于document（文档）定位。具有定位属性的祖先级元素，一般需要有relative和absolute其中一个的定位属性
5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高

固定定位的特点：
1.固定定位相对于浏览器窗口定位
2.固定定位脱离文档流

定位的层级
不做特殊设置的时候
定位元素的层级 比非定位元素的层级高
定位元素后来者居上

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

透明度

transparent 透明色

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

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

使用方式
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：middle；，设置行元素和内联元素的垂直居中
4.使用定位设置和 margin结合设置元素居中
a.给需要居中的元素设置margin-top和margin-left为自身的一半
b.给需要居中的元素设置定位距离为left：50%；top：50%；
5.父元素宽高固定，子元素绝对定位，可以实现水平绝对居中
a.父元素宽高固定
b.子元素绝对定位
c.给子元素设置 left:0; right:0; top:0; bottom:0;
d.给子元素设置margin:auto；

表格

table 表示表格
表格的作用
1.在之前可以使用表格进行布局
2.可以作为列表来显示数据

一个表格是用 thead，tbody和tfoot组成，这三个标签可以不写，浏览器会自动添加

想要创建一个表格可以使用以下标签
table：表示当前创建一个表格
tr：表示表格中的一行
th：表示表格的一个单元格，一般代表表头
td：表示表格的一个单元格，一般代表表内容

以上标签都是块标签

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

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

width 设置表格的宽度，可以是具体的值，也可以是百分比
height 设置表格的高度，可以是具体的值，也可以是百分比

以上宽高属性可以设置到table td th 上，width影响的是一列，height影响的是一行
使用border-collapse设置单元格的边框是否合并
border-collapse: ；不合并
border-collapse:collapse；合并

表单

form标签，表单，可以用来提交数据
form是一个块标签
action属性，数据要提交到的服务器地址，一般是接口地址
method属性，数据的提交方式
他的值有：
get，post，put，delete等
get:get请求可以把数据拼接到接口地址的url上，缺点是：不安全，提交的数据较少
post：post请求，在post提交的信息中，不会看到提交的数据结构，相比较get是安全的，并且提交的数据较大

label标签，行标签，经常和input搭配使用，表示input标题
input标签，行标签，输入框，常用于表单的输入
type属性，用来设置输入框的类型
属性值:
text 文本输入框
password 密码输入框
button 普通按钮
submit 提交按钮
reset 重置按钮
radio 单选框
checkbox 多选框
hidden 隐藏框
email 约束输入内容为邮箱
url 约束输入内容为网址
number 约束输入内容为数字,step 属性为每一次的步长
color 取色器
range 滑竿 min 最小值max 最大值value 当前值
data显示日期
month显示日期到月
week显示日期到周
time显示时间
image图片提交按钮

input属性,input虽然是行标签，但是可以设置宽高
minlength 最少字符数
required 设置为必填项
type 属性补充
file 提交文件
number 输入数字
autofocus 自动获取光标，自动聚焦

select 下拉框 行标签
他的子集必须是option标签，每个option标签表示一个选项，option标签具有value属性

fieldset 创建一个组
legend 组的标题
<fieldset> <legend>学生信息</legend> <label>姓名</label> <input type="text" value="" class="txt"><br/> <label>年龄</label> <input type="text" value=""><br/> </fieldset>

textarea 多行文本输入框
属性
rows 设置具有多少行
cols 设置具有多少列
设置textarea
通过css的resize属性，设置拖拽的方向

horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽
<label>输入简介</label> <textarea rows="10" cols="50" class="area"></textarea>

H5新标签

h5新特性都有哪些
1.新增了很多语义化标签
2.废弃了一些css修饰和html标签
3.支持本地持久化数据
4.增加了音视频标签的api
5.提供了canvas画布及其api
h5各种功能比较新，低于ie9的浏览器支持的功能不够全面，建议使用ie9及其以上浏览器

mark标记标签
<p>两个<mark>黄鹂</mark>鸣翠柳</p>
meter 用电量标签
常用于能量的使用或者内容的使用量等
属性
value 当前电量的值
max 最大值
min 最小值
low 用电量最低报警值
high 用电量最高报警值
当前标签中的文字只有在浏览器不支持的时候会被渲染出来
<meter value="95" max="100" low="20" high="90" min="0">浏览器</meter>
progress进度条标签
只有最大值max属性
没有min属性
value属性是当前值
没有min属性
value属性是当前值
<progress max="100" value="50" ></progress>
ruby 标签，常用来做拼音，注音，注释等
rt 表示注释的内容
tp 如果浏览器不支持，显示的内容
<ruby>赵 <rt>zhao</rt> <rp>你的浏览器太low了</rp> </ruby>
datalist 数据列表
通过input的list属性和datalist的id属性进行绑定
datalist 中的选项使用option标签
通过datalist可以制作关联查询

sup 上角标
sub 下角标
常用于注释

details 展示详情标签，自带折叠效果
summary 标签是 details的 标题
<details> <summary>四大名著</summary> <p>西游记1</p> <p>西游记2</p> <p>西游记3</p> <p>西游记4</p> </details>
audio 标签，用来播放音频文件，支持mp3 ogg wav 类型的文件
属性
controls：控制是否出现播放的控制条
autoplay：控制自动播放
loop：循环播放
muted：设置静音
preload 设置预加载
值：
auto：默认值，在整个网页加载之后立即加载音频文件
metadata：只加载音乐的源文件
none：不加载，可以用它来减少服务器压力
如果设置了autoplay，则可以不设置preload，默认即可
audio结合source标签做音频播放兼容效果
source 专门用来解决不同浏览器对不同资源格式的支持问题，做兼容
video 视频播放标签，支持mp4，ogg，webm格式
controls
loop
muted
autoplay
width:视频播放区域的宽度
poster：视频的封面
figure注释标签，一般包裹一段文字、图片、代码、图表等
注释的内容写在figcaption标签中

H5新增关于布局的标签

header：页面的头部区域，要和head标签做区分
footer：页面的底部区域
nav：导航区域
aside：侧边栏区域
section:一个独立的区域，类似div
article:他一般包含在section中，使用article包裹一段独立的模块

单位

em 相对单位，他是父级font-size的倍数
可以理解为 子级设置长度或者尺寸的时候，可以使用em作为单位，1em=父级的font-size，如果当前元素设置了font-size，则1em=当前元素的font-size

rem 相对单位，在html标签上设置一个font-size作为整个页面的root，在设置所有标签尺寸的时候可以直接以html设置的字号大小为根字号，即为 1rem
rem常用于移动端开发

vh/vw ：vh是 view-height 视窗的高度
1vh=视窗的高度 * 1%

vw 是view-width 视窗的宽度
1vw= 宽度*1%

css的最大最小属性
min-height：最小高度
max-height：最大高度
min-width：最小宽度
min-width：最大宽度

视窗

viewport 视窗，用户通过视窗可以看到浏览器渲染的内容
常用于移动端的布局

通过meta标签设置

width：值是正整数，定义视窗的宽度，单位是px，也可以设置他的值是device-width，表示视窗的宽度为设备宽度
height：值是正整数，定义视窗的高度，单位是px，也可以设置他的值是device-height，表示视窗的宽度为设备高度
initial-scale：范围是[0,1]，用来定义初始时候的缩放值
minnum-scale：范围是[0,1],定义最小缩放比例，它的值必须小于或等于initial-scale的值
maxnum-scale:范围是[0,1]，定义最大缩放比例，它的值必须大于或等于initial-scale的值

user-scalable 设置用户是否能够手动缩放，它的值是yes/no，默认是yes