周日总结
Navicat可视化软件
可视化软件就是第三方开发的用来充当数据库客户端的简单快捷的操作界面，底层的本质还是SQL,第三方的可视化最出名还是Navicat
第三方模块pymysql
python操作MySQL
1.连接MySQL服务器
2.产生游标对象
3.编写SQL语句
4.发送SQL语句
5.获取SQL语句执行之后的结果
代码展示：
import pymysql
conn=pymysql.connect(
host='127.0.0.1',
post=3306,
user='root',
password='123',
db='db-03',
charset='utf8mb4'
)
cursor=conn.cursor()
cursor=conn.cursor(cursor=pymysql.cursor.DictCursor)
sql='select * from teacher;'
affect_rows=cursor.execute(sql)
res=cursor.fetchall()
print(res)
fetchall() 获取所有的结果
fetchone() 获取结果集的第一个数据
fetchmany() 获取指定数量的结果集
MySQL的视图
视图就是通过查询得到一张虚拟表，然后保存下来，下次直接使用即可。
如何使用视图
create view work2department as select * from work inner join department on work.dep_id=department.id
删除视图：drop view 视图名; 视图只有表结构文件，没有表数据文件，所以视图通常是用来查询的，所以不要修改视图中的数据。
MySQL的触发器
在满足对某张表数据的增insert、删delete、改update的情况下，自动触发的功能称为触发器（trigger)。
触发器语法结构
create trigger 触发器名字 before/after insert/update/delete on 表名 for ench
begin
sql语句
end
触发的六种状态
表的增加前/后
表的改前/后
表的删除前/后
临时修改结束符delimiter $$ ,只在当时窗口有用，但是要记得修改过来。查看触发器 show triggers; 删除触发器 drop rtigger 触发器名；
MySQL的事务
1.事务的四大特性
A:原子性
每个事物都是不可分割的最小单位（同一个事务内的多个操作要么同时成功要么同时失败）
C：一致性
事务必须是数据库从一个一致性状态变到另一个一致性状态，一致性与原子性是密切相关的
I:隔离性
事务与事务之间彼此不干扰
D:持久性
一个事务一旦提交，它会数据库中的数据的改变应该就是永久性，如，A支付宝转钱给另一个人B，钱的拥有者就是另一个人B
2.事务关键字
开始事务：start transaction;
回滚：rollback;
确认：commit;
3.总结事务
开启事务周，只要没有执行commit操作，数据其实都没有真正刷到硬盘。开启事务检测操作是否完整，不完整就回滚上一个状态，如果完整就应该执行commit操作，加入python来完善的伪代码逻辑
try:
update user set balance=900 where name='kiki';
except 异常：
rollback;
else: # 无异常则保存事务
commit;
4.事务的四个隔离级别
1.ad uncommitted(未提交读
事务中数据修改即使没有提交，在内存中，没有提交到硬盘，别人可能也是引用的我内存中的数据，读的是修改的但是没有提交的，该现象称之为“脏读”
2.read committed(提交读)
该事务修改了，只要没有提交，别人是不可读的，其他人用的就是没有改之前原表里面的数据，两者之间不会发生冲突，该现象称之为“不可重复读”
3.repeatable read(可重复读) # MySQL默认隔离级别
能够解决"脏读"问题，但是无法解决"幻读"
4.serializable(可串行读)
强制事务串行执行，很少使用该级别
InnoDB支持所有隔离级别
5.存储过程
存储过程包含了一系列可执行的sql语句，存储过程存放于MySQL中，通过调用它的名字可以执行其内部的一堆sql，类似于python中的自定义函数
存储过程语法格式
关键字：procedure
格式：
create procedure 函数名（参数）
begin
功能体代码
end
调用其内部sql代码格式
call 函数名()
无参存储过程
# 无参函数
delimiter $$ # 修改结束符
create procedure p1()
begin
select * from cmd;
end $$
delimiter ; # 修改回来结束符
# 调用 通过p1()调用其内部sql代码
call p1()
有参存储过程
delimiter $$
create procedure p2(
in m int, # in表示这个参数必须只能是传入不能被返回出去
in n int,
out res int # out表示这个参数可以被返回出去，还有一个inout表示即可以传入也可以被返回出去
)
begin
select * from cmd where id > m and id < n;
set res=0; # 用来标志存储过程是否执行
end $$
delimiter ;
# 针对res需要先提前定义
set @res=10; # 定变量名为res,变量值为10
select @res; # 查看res变量值为10
call p2(1,4,@res); # 调用p2
select @res; # 查看存储过程是否执行，满足条件执行res=0
查看存储过程具体信息
show create procedure pro1;
查看所有存储过程
show procedure status;
删除存储过程
drop procedure pro1;
MySQL函数
函数相当于python中内置函数 注意与存储的过程的区别，MySQL内置的函数只能在sql语句中使用。
1.通过help查看函数帮助
help 函数
2.移除指定字符
Trim : 移出左右两边指定字符
LTrim : 移出左侧指定字符
RTrim : 移出右侧指定字符
3.大小写转换
Lower : 全部转换为小写
Upper : 全部转换为大写
4.获取左右起始指定个数字符
Left : 从左起始
Right : 从右起始
5，返回读音相似值
关键字:
Soundex
流程控制
if 分支
# 分支结构
declare i int default 0;
IF i = 1 THEN
SELECT 1;
ELSEIF i = 2 THEN
SELECT 2;
ELSE
SELECT 7;
END IF;
while分支
# 循环结构
DECLARE num INT ;
SET num = 0 ;
WHILE num < 10 DO
SELECT num ;
SET num=num+1;
END WHILE;
索引
索引在MySQL中也叫做“键”，是存储引擎用于快速找到记录的一种数据结构
primary key
unique key
index key
1.上述的三个key都可以加快数据查询
2.primary key和unique key除了可以加快查询本身还自带限制条件而index key很单一就是用来加快数据查询
3.外键不属于索引键的范围 是用来建立关系的 与加快查询无关 foreign key
索引的分类
聚集索引(primary key)
主键、主键索引
辅助索引(unique,index)
除主键意外的都是辅助索引
覆盖索引
select name from user where name='jason';
非覆盖索引
select age from user where name='jason';
索引数据结构
二叉树
二叉树里面还可以细分成很多领域 我们简单的了解即可
二叉意味着每个节点最大只能分两个子节点
B树
所有的节点都可以存放完整的数据
B+\*树
只有叶子节点才会存放真正的数据 其他节点只存放索引数据
B+叶子节点增加了指向其他叶子节点的指针
B*叶子节点和枝节点都有指向其他节点的指针
辅助索引在查询数据的时候最会还是需要借助于聚集索引
辅助索引叶子节点存放的是数据的主键值
有时候就算采用索引字段查询数据 也可能不会走索引!!!
最好能记三个左右的特殊情况
等值查询与范围查询都快
二叉树->平衡二叉树->B树->B+树
前端之HTML
前端前言
1.前端三剑客
1.HTML 网页的骨架
2.CSS 网页的样式
3.JavaScript 网页的动态1
2.HTTP****协议
HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符)。
3.四大特性
2.1、基于请求响应
客户端发送请求 服务端回应响应。服务端永远不会主动给客户端发消息，如果想让服务端主动给客户端发送消息可以采用其他网络协议
2.2、基于TCP、IP作用于应用层之上的协议
该协议属于应用层
2.3、无状态
服务端不会保存客户端的状态(不保存客户端的状态信息)
"纵使见她千百遍 我都当她如初见"
2.4、无\短连接
客户端与服务端不会长久保持连接（两者请求响应之后立刻断绝关系）
4.数据格式
3.1 请求格式
请求首行(请求方式(有很多种) 协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
3.2 响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)
5.响应状态码
用数字来表示一串中文意思 x x表示不确定
1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
2XX:200 OK请求成功 服务端返回了相应的数据
3XX:重定向302(临时) 304(永久)(原本想访问A页面 但是自动跳转到了B页面)
4XX:403没有权限访问 404请求资源不存在
5XX:服务器内部错误
HTML
1.HTML注释语法
单行注释：<!--注释语法-->
多行注释：
<!--
多行注释
多行注释
-->
2.HTML文档结构
<html>
<head></head>
<body></body>
</html>
1.<html> 固定格式 html包裹
2.<head> 主要放跟浏览器交互的配置
3.<body> 主要放给用户查看的花里胡哨的内容
3.HTML标签分类
1.单标签（自闭和标签）
<img/>
2.多标签 (有头有尾)
<h1></h1>
HTML文档结构
head常见标签
| 标签 | 意义 |
|---|---|
| title | 定义网页标题 |
| style | 定义内部样式表 |
| script | 定义JS代码或引入外部JS文件 |
| link | 引入外部样式表文件或网站图标 |
| meta | 定义网页原信息 |
body内标签
基本标签
| h1-h6 | 标题标签 |
|---|---|
| p | 段落标签 |
| u | 下划线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
| br | 换行（有其他符号也是换行的） |
| hr | 分割线 |
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ¥
6.© ©
7.® ®
布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
eg:
<p>123
<p>321</p>
</p>
常用标签
"""
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
"""
1.a标签 链接标签
1.1 href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
1.2 target
默认_self原网页跳转
_blank新建网页跳转
2.img标签 图片标签
2.1 src 属性指定图片地址
1.填写图片地址
2.还有更多特性 目前没法讲
2.2 title 属性写文本
鼠标悬浮在图片上自动展示的文本
2.3 alt 属性编写文本
图片加载失败提示的信息
2.4 width\height 性写像素
图片的尺寸 两者调整一个即可 等比例缩放
列表标签
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题标签
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据的提交地址
method 控制数据的提交方法
input标签(类似于前端的变形金刚)
type属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
select标签 下拉框
option标签 一个个选项
textarea标签 获取大段文本
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
前端之CSS
引入
页面都是由HTML构成的，并且页面上有很多相同的HTML标签，但是相同的HTML标签在不同的位置可能有不同的样式 ，我们如何区分标签？引入标签的两大重要属性
标签两大重要属性>>:区分标签
1.class属性
两个元素或者两个以上元素定义相同的样式>>>:批量查找
2.id属性
id属性被赋予了标识页面元素的唯一身份>>>:点对点，精准查找
<div class="c1 c2 c3" ></div>
<p class=" c1 c5" ></p>
<span class=" c1 c8"></span>
<div di="d1 "></div>
<a href="" id="d2"></a>
注意：
1.一个html网页，id是不能重复的，
2.一个标签可以同时定义多个class。
CSS层叠样式表
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
简单理解：CSS如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。如何区分CSS版本，如CSS3就是css语言，数字3是该语言的版本号
1.CSS组成
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
2.css语法结构
选择器{
样式名1：样式值1;
样式名2：样式值2;
}
3.注释语法
/*注释内容*/
4.引入CSS的多种方式
1.head内style标签内部编写（学习的时候使用）
2.head内link标签引入（标准的方式）
3.标签内部通过style属性直接编写（不推荐）
css选择器
1.css基本选择器
1、标签选择器(直接按照标签名查找标签)
div {
color: orange;
font-size: 30px;
}
2、类选择器(按照标签的class值查找标签)
.c1 {
color: lightskyblue;
font-size: 30px;
}
3、id选择器(根据标签的id之精准查找标签)
#d2 {
color: darkolivegreen;
font-size: 35px;
}
4、通用选择器(直接选择页面所有的标签)
* {
color: cornflowerblue;
font-size: 35px;
}
2.CSS组成选择器
针对标签的上下层级以及嵌套有另一种说法：父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
<body>
<div>div
<p>div>>p
<span>div>>p>>span</span>
</p>
<p>div>>p</p>
<span>div>>span</span>
</div>
<span>与div同级span1</span>
<p>与div同级p</p>
<span>与div同级span2</span>
</body>
1.后代选择器(空格)
2.儿子选择器(大于)
3.毗邻选择器(加号)
4.弟弟选择器(小波浪号)
3.分组与嵌套
1.多个选择器合并查找
div,p,span{
color: rebeccapurple;
font-size: 40px;
}
2.查找满足条件的选择器
#d1,.c1,span{
color: orange;
font-size: 40px;
}
3.查找class含有c1的div
div.c1 {
color: orange;
font-size: 40px;
}
4.查找id是d1的div
div#d1 {
color: orange;
font-size: 40px;
}
5.查找含有c1样式值里面的含有c2样式值的p标签
.c1 p.c2 {
color: orange;
font-size: 40px;
}
4.属性选择器
1.按照属性名查找
[username] {
color:red;
font-size: 40px;
}
2.按照属性名等于属性值
[username="kimi"] {
color:red;
font-size: 40px;
}
3.按标签里面的属性名=属性值查找的
div[username='kimi'] {
color: #ff7d2a;
font-size: 40px;
}
5.伪类选择器
# a标签补充说明：未点击过的网址默认是蓝色，点击过的则为紫色
1.鼠标移动到链接上，显示orange
a:hover {
color: orange;
}
2.补充
2.1 未访问的链接，显示下列样式
a:link {
color: red;
}
2.2 选定的链接不动，采用下列样式
a:active {
color: lightskyblue;
}
2.3 已访问的链接，采用下面样式
a:visited {
color: darkgray;
}
2.4 input镖 点输入框时获取焦点时样式
input:focus {
background-color: #ff7d2a;
}
6.伪元素选择器
1.首字母大写且渲染成红色
p:first-letter {
font-size: 45px;
color: red;
}
2.css在开头添加文本无法正常选中
p:before {
content: '嘿嘿嘿';
color: orange;
}
3.css在末尾添加文本无法正常选中
p:after {
content: '我是删不掉的';
color: aquamarine;
}
选择器优先级
选择器的优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同，其实是按照不同选择器的权重来决定的
内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
1.字体相关
1.高度和宽度
只有块儿级标签可以设置 行内标签无法设置
<style>
p {
height: 1000px; /*高度*/
width: 50px; /*宽度*/
}
</style>
2.字体大小
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值
```python
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
font-size: 99px; # 字体大小一般有固定的大小参考(字体代码)
3.字体粗细
font-weight用来设置字体的字重（粗细）。
font-weight: bolder; /*字体粗*/
font-weight: lighter; /*字体细*/
| 值 | 描述 |
|---|---|
| normal | 默认值，标准值 |
| bold | 粗体 |
| bolder | 加粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
2.文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定，设置颜色方式如下
1.十六进制值 - 如: ＃FF0000（颜色编码）
2.一个RGB值 - 如: RGB(255,0,0)
3.颜色的名称 - 如: red
4.还有rgba(255,0,0,0.3)，第四个值为alpha（透明度）, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
3.文本属性
文本对齐
text-align 属性规定元素中的文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文本装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line_through | 定义穿过文本下的一条先 |
| inherit | 继承父元素的text_decoration属性的值 |
去掉a标签默认的自划线
a {
text-decoration: none;
}
首行缩进
p {
text-indent: 32px;
}
4.背景属性
*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; # 不重复
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
当多个属性名有相同的前缀 那么可以简写一次性完成
边框
边框有三个属性，分别是边框宽度、边框颜色和边框样式
边框宽度
| 属性 | 描述 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框的风格 |
| border-color | 边框的颜色 |
边框样式
边框的风格样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
| inset | 边框内嵌入一个立体边框 |
| outset | 边框外嵌一个立体边框 |
| hidden | 隐藏边框 |
| double | 双实线 |
| groove | 边框带有立体感的沟槽 |
| ridge |
圆形边框
border-radius:这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形
border-radius:50%
display属性
用于控制HTML元素的显示效果
注意：行内标签是无法设置长宽 只有块儿级可以设置
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
1.display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 2.visibility: hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像
浮动float
1.定义
在 CSS 中，任何元素都可以浮动,浮动就是用来做页面布局的。浮动元素会生成一个块级框，而不论它本身是何种元素。
2.浮点的作用
只要是设计到页面的布局一般都是用浮动来提升规划好
3.关于浮动的特点
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
4.float格式
float: left;
三种取值
| 值 | 描述 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 默认值，不浮动 |
6.浮动带来的影响
浮动的元素是脱离正常文档流的，会造成父标签塌陷.
如何解决浮动的影响？ 引入了clear属性
7.clear
clear属性规定了元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
8.清除浮动有三种方式
1.固定高度 （自己加一个div设置高度 ）
#d4 {
/*高度*/
height: 100px;
}
自己设置的高度要比上面悬浮的高度要大
2.伪元素清楚法(推荐使用，只要父标签塌陷就使用)
.clearfix:after {
/*空的内容独占一行*/
content: "";
display: block;
/*左右两侧都不能有浮动*/
clear: both;
}
之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可
3.overflow:hidden 利用clear属性（可以使用）
.c4 {
clear: left; # 左侧(地面 天空)不允许出现浮动的元素
border: 2px solid darkgray;
}
溢出overflow
overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向
定位
标签在默认情况下都是无法通过定位的参数来移动的
| 值 | |
|---|---|
| static | 静态（默认值，标签默认的状态 无法定位移动） |
| relative | 相对定位（基于标签原来的位置 |
| absolute | 绝对定位（基于某个定位过的父标签做定位） |
| fixed | 固定（基于浏览器窗口固定不动） |
z_index
浏览器平面不是一个二维坐标系而是一个三维坐标系
1.以百度登录页面 其实是三层结构
1.最底部是正常内容（z=0） 最底层
2.黑色的透明区（z=99) 中间层
3.白色的注册区域（z=100）离用户最近
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。不单单可以修改颜色的透明还能同时修改字体的透明度。
- rgba :只能影响颜色
- opacity:可以修改颜色和字体