FSB-day06-定位，表示尺寸，display，表格，合并单元格

1、定位

什么是定位？

• position：对元素的位置进行精确的调整

定位的四个可选值

• 静态定位：static
• 相对定位：relative
• 绝对定位：absolute
• 固定定位：fixed

以上四个值只是规定了元素的定位方式，具体的元素该移动到哪里，需要通过left，right，top，bottom四个css样式决定。表示的意思是当前方位有多少px的距离

注意：left,right,top,bottom四个css样式只对设置了非static定位的元素起效果;

1.static 静态定位 默认值
2.relative 相对定位

• 设置了相对定位的元素不完全脱离文档流。不会失去自己的位置。
• 相对定位的元素移动的参考位置是自己之前的位置;

3.absolute绝对定位

• 设置了绝对定位的元素，完全脱离文档流，会失去自己之前的位置
• 绝对定位的元素移动的参考位置是距离它最近的设置了非static定位的祖先元素，如果所有的祖先元素都没有设置非static定位，则相对于整个html文档进行定位；
• 注意：以后只要设置了绝对定位，一般情况下，我们都会给这个元素的父级添加相对定位。

4.fixed 固定定位

• 固定定位的元素完全脱离文档流，会失去自己原先的位置
• 固定定位的元素移动的参考位置是整个html文档

设置了定位的元素，层级高于普通元素

如果都设置了定位，后写的覆盖先写的

z-index:该样式只对非static定位的元素起效果，默认值是0，值越大，越靠近z轴正方向。

表示尺寸的单位

• px 像素
• em: 一个em单位表示当前元素的font-size值;
• rem: 一个rem单位表示html标签的font-size值;

2、display

display: 用来改变元素的类型；有四个取值

• block 将元素的类型设置成块元素
• inline 将元素的类型设置成行元素
• inline-block 将元素的类型设置为行级块元素
  1. 解释：本质上还是行元素,但是拥有块元素的特点，支持设置宽高
• none 隐藏元素(会失去自己的位置)

把一个行元素通过display的方式，一种是设置成block，另一种是设置成inline-block,二者有什么区别？

• block方式让行元素变成了块元素
• inline-block是变成行级块元素。本是还是行元素,但是拥有了块元素的特性,比如设置宽高等;

隐藏元素的方式：

• display:none;
• visibility:hidden;
• overflow:hidden；溢出隐藏

display:none；和 visibility:hidden的区别

• display:none;方式隐藏的元素会失去自己之前的位置
• visibility:hidden;方式隐藏的元素会保留自己的位置;

3、表格

table标签 表格标签 双标签 也是复合标签 表示表格的范围
表示表格的三部分:

• 表头 thead
• 内容 tbody
• 表尾 tfoot
• 这三部分不一定出现在每一个表格中。但是每个表格必须有tbody,如果不写tbody直接写内容，系统会给我们自动生成一个tbody。

tr标签 双标签 表示一行。
td,th标签 双标签 表示一个单元格。

th和td的区别?

• th单元格默认文字加粗
• th单元格默认文字居中
• th一般用于表头或者重要数据，td一般表示内容。

属性

• border:给表格添加边框，不带单位
• cellspacing:表示单元格与单元格之间的距离
• cellpadding:表示单元格边框与内容之间的距离
• 表格里每一列的宽度取决于当前列里内容最多的单元格的宽度。
• caption标签,双标签,表格的标题标签

单元格合并:

• colspan列合并 -> 水平合并 column 列
• rowspan行合并 -> 竖直合并 row 行