01-固定定位 - 粘性定位

固定定位
position: fixed
相对于窗口定位 脱离文档流

粘性定位
position: sticky
临界点内是固定定位，临界点外是相对定位 不脱离文档流

02-坐标系的设定

只有设置了定位属性，属性不是默认值的元素才可以使用
top
left
right
bottom
auto 默认值 元素会处于原来在文档流中的位置不变
数值
百分比
相对定位： 坐标系参考父元素的宽高
绝对定位： 坐标系参考包含块(有定位属性，属性不是默认值的父元素)的宽高
固定定位： 坐标系参考窗口的宽高
一个发生绝对定位，固定定位的元素，
设置了宽度，同时设置left, right, 以left为准
设置了高度，同时设置top, bottom , 以top为准
没有设置宽度，同时设置left, right, 会拉伸自身以适应left right
没有设置高度，同时设置top, bottom, 会拉伸自身以适应top， bottom

03-元素水平居中

元素水平垂直居中 方法一
只需要知道子元素宽高
1. 子绝父相
2. 子 {
top: 50%;
left: 50%;
margin-top: -自身高度的一半
margin-left: -自身宽度的一半

元素水平垂直居中 方法二
不需要知道父子元素宽高
1. 子绝父相
2. 子{
top:0;
left:0;
right:0;
bottom:0;
margin: auto

04-层级

层级： 定位的元素之间的层叠关系
z-index：auto 默认 效果等同于0
+
-
数值越大越考上，数值相同，看书写顺序
负数会跑到所有元素最后面，一般不推荐用负数调整顺序

05-锚点

锚点： 跳转到同一个页面的不同位置
<标签名 id=’锚点名字’></标签名> —— 在页面中设置锚点
—— 点击跳转到该锚点
跳转到不同页面的相应锚点

06-透明度 —— 滤镜

透明度
opacity: 0-1
0 透明
1 不透明
元素和所有内容物都会消失不可见，仍然占据空间
兼容ie低版本浏览器
filter: alpha(opacity=30) opacity取值在0-100 0不透明 100透明

filter 滤镜
灰色滤镜
filter: grayscale(80%);
高斯模糊
filter: blur(50px);

07-emmet语法（简写生成标签）

标签名.class名字
标签名#id名字
> 子元素
+ 兄弟元素
() 组合
* 有几个
$ 自增
{} 标签里面的文本
[] 属性

08-表格

table —— 表格的区域
table的html属性
width 表格的宽度
height 表格的高度
border 边框的宽度
cellspacing 单元格和单元格之间的间距
cellpadding 单元格和内容之间的间距
tr —- 行
tr的html属性
align 单元格内容的水平对齐方式
left
right
center
valign 单元格内容的垂直对齐方式
top
bottom
middle
td ——- 单元格
td的html属性
rowspan 合并行
rowspan=’2’
colspan 合并列
合并单元格
1. 跨行 合并行
2. 跨列 合并列
3. 合并的时候总是向右向下合并
4. 合并几个单元格，属性值就写几
5. 把多余的单元格删掉

09-表格的标签

table
caption 表格的标题
数据列分组
colgroup
span=2 把2列分为一组
数据行分组
thead 表格的头部
tbody 表格的主体
tfoot 表格的底部
- 必须包含至少一个tr
- tbody 可以有多个 thead tfoot只能有一个
th 表头单元格 自带加粗居中的效果
table
caption
colgroup 数据列分组
thead
tbody
tfoot
数据行分组
tr—-每一行
th —- 表头单元格
td —- 普通单元格
table的html属性
rules 表格的分隔线
none 没有
rows 行的分隔线
cols 列的分隔线
all 行和列的分隔线
groups 组的分隔线

10-表格的css属性

table的css属性
border-spacing: 单元格和单元格之间的间距 (只能用在分离模式)
border-collapse: 单元格是分离模式还是合并模式
默认 分离模式 separate
合并模式 collapse
empty-cells: 空单元格是否隐藏 （只能用在分离模式）
hide 隐藏
show 默认 出现
table-layout 表格布局算法
默认 auto 表格的宽度由内容决定
fixed 表格的宽度由列表的属性决定