css基础（浮动，定位，居中，表单）

1 浮动

1.1 浮动的原理

设置浮动的元素超出文档流
文档流：就是元素从上到下，从左到右的布局顺序
浮动的作用：从整体出发，把标签元素进行横向布局

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

1.2 浮动的特点：

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

1.3 浮动的影响

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

1.4 清除浮动产生影响的方法

1. 给浮动元素的父级，添加overflow:hidden;
2. 给父元素设置指定高度，确保布局正确
3. 给父元素添加display:inline-block;,该方法兼容性差
4. 给父元素添加浮动，可能会影响布局
5. 设置一个空标签，在空标签中设置属性

 .clear{
            clear：both;
            height: 0;
            overflow: hidden;
          }

6. 通过after伪元素清浮动

.clearfix::after{
            content: '';
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
        }

display：none； 隐藏标签元素
display：block； 显示标签元素

2 定位

在同一块文档流的区域内，同时叠放多个标签的时候需要用到定位。
定位的元素是超出文档流的

2.1 设置定位的流程

1. 通过position属性设置定位的参照物
2. 通过方位属性设置具体方位的定位数据，用来设置距离参照物有多远

方位属性：top left right bottom

2.2 position 属性的值

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

2.3 定位的特点

2.3.1 相对定位的特点

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

2.3.2 绝对定位的特点

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

2.3.3 固定定位的特点

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

2.4 定位的层级

使用z-index设置定位的层级，该属性默认值为0。
不做特殊设置时，定位元素的层级比非定位元素的层级高，定位元素后来者居上。

如果z-index的值相同，则还是后加载的元素高于先加载的。
如果值不相同，值大的元素层级高。

注意：定位层级的比较是兄弟元素之间的比较

3 vertical-align

是行元素在垂直方向的对齐方式，只能使用在行元素或者内联块元素display：inline-block；上，不能使用在块元素上

3.1 对齐方式

vertical-align：top； 顶部对齐
vertical-align：middle； 中间对齐
vertical-align：baseline； 基线对齐
vertical-align：bottom； 底部对齐

3.2 使用方式

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

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

4 居中方式

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

5 表格

5.1 表格的作用

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

5.2 表格的写作方式

<table>
    <tr>
    	<th>表头</th>
    	<th>表头</th>
    </tr>
    <tr>
    	<td>表内容</td>
    	<td>表内容</td>
    </tr>
</table>

table 用来表示表格，表示当前想创建一个表格
tr 表示表格中的一行
th 表示表格的一个单元格，一般是表头
td 表示表格的一个单元格，一般是代表表内容

5.3 表格标签的属性

以上标签都是块标签
可以给table添加border属性，设置边框

5.3.1 单元格的距离设置

cellspacing 设置单元格和单元格之间的距离
cellpadding 设置单元格内容和边框之间的距离

5.3.2 合并单元格

colspan合并列（横向合并）
rowspan合并行（竖向合并）

5.3.3 单元格设置

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

以上宽高属性，可以设置到table、td、th 上，width影响的是一列，height影响的是一行

5.3.4 单元格边框的设置

使用 border-collapse 设置单元格边框是否合并
border-collapse: collapse;合并
border-collapse: separate;不合并

6 form表单

form是一个块标签、表单，可以用来提交数据

6.1 form属性

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

6.2 lable标签

lable标签，行标签，经常和input搭配使用，表示input标题

6.3 input标签

input标签，行标签，输入框，常用于表单的输入，可以设置宽高

6.3.1 type 属性

用来设置输入框的类型
属性值：
text 文本输入框
password 密码输入框
button 普通按钮
submit 提交按钮
reset 重置按钮
radio 单选框
checkbox 多选框（复选框）
hidden 隐藏框
file 提交文件
email 约束输入内容为邮箱
url 约束输入内容为网址
color 取色器
date 显示日期
month 显示日期到月
week 显示当前周
time 设置时间
datetime-local 设置当地时间

6.3.2 type的其他属性

1. number 约束输入内容为数字
   step 属性为，每次的步长

<input type="number" value="" step="10">

2. range 滑竿
   min 最小值
   max 最大值
   value 当前值

<input type="range" value="10" min="0" max="100"> 

3. image 图片提交按钮

<input type="image" src="./src/2109242312153R1-0-lp.jpg" width="100">

6.3.3 input标签的其他属性

value 属性： 设置input的值
name 属性： 对于界面显示没有任何影响，主要用于数据交互，实质上name的值即是后台数据的字段名
placeholder 属性： 输入框的提示信息
maxlength 属性： 输入字符的最大长度
checked属性： 单选框和复选框的默认选中，只需要在 input 上设置 checked 属性即可
readonly属性： 给某一个输入框添加只读属性readonly，确保该输入框内容可以通过程序修改，并且能提交到后台
minlength属性： 最少字符数
required属性： 设置为必填项
autofocus 属性： 自动获取光标，自动聚焦

6.3.4 disabled属性和readonly属性

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

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

disabled 和 readonly的异同
相同：都不能手动修改
不同：disabled的值不能提交和使用
readonly的值可以提交到后台

6.3.5 textarea属性

是多行文本的输入框
属性值
rows 设置具有多少行
cols 设置具有多少列

<textarea class="area" name="" id="" cols="30" rows="10"></textarea>

设置 textarea时，可以通过设置css 的 resize属性，来设置多行文本框拖拽的方向
属性值：
horizontal 横向拖拽
vertical 纵向拖拽
both 双向拖拽
none 不拖拽

.area {  resize: none  }

6.4 select 标签

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

<select name="" id="">
      <option value="1">郑州</option>
      <option value="2">哈尔滨</option>
      <option value="3">南宁</option>
      <option value="4">乌鲁木齐</option>
</select>

6.5 fieldset 标签

fieldset 标签，创建一个组
legend组的标题

<fieldset>
	 <legend>标题</legend>
	 <label for="">姓名</label>
     <input type="text" value="">
     <label for="">年龄</label>
     <input type="text" value="">
</fieldset>