首页 > 其他分享 >第十周周总结

第十周周总结

时间:2022-12-04 15:33:06浏览次数:37  
标签:总结 第十 color 标签 id 周周 SQL 选择器 select

第十周周总结

多表查询的两种方法

方式一:连表操作
    inner join  内连接,只连接两张表中共有的部分
    	seiect * from emp1 inner join dep on emp1.dep_id=dep.id;
    left join   左连接,以left join左边的表为基准,展示左边表的所有数据,没有右边表的对应项则用null填充
    	select * from emp1 left join dep on emp1.dep_id=dep.id;
    right join  右连接,以right join右边的表为基准,展示右边表的所有数据,没有左边表的对应项则用null填充
    	select * from emp1 left join dep on emp1.dep_id=dep.id;
    nuion       全连接,以左右表为基准展示两张表所有的数据,没有的则用null填充
    	select * from emp1 left join dep on emp1.dep_id=dep.id
        union
         select * from emp1 right join dep on emp1.dep_id=dep.id;
方式二:子查询
    将一条SQL语句用括号括起来当成另一条SQL语句的查询条件

小知识点补充

1.concat与concat_ws
    concat用于分组之前的字段拼接操作
        select concat(name,'|',sex) from emp;
    concat_ws拼接多个字段并且中间的连接符一致
        select concat_ws('|',name,sex,age) from emp;

2.exists
    SQL语句1 exists SQL语句2
        SQL语句2有结果的情况下才会执行SQL语句1,否则不执行SQL语句1,返回空数据
    
3.关于表的其它SQL补充
    alter table 表名 rename 新表名;  # 修改表名
    alter table 表名 add 字段名 字段类型 约束条件;  # 添加字段
    alter table 表名 add 字段名 字段类型 约束条件 after 现有字段;  # 指定字段添加的位置
    alter table 表名 add 字段名 字段类型 约束条件 first;  # 将新创建的字段列于首位
    alter table 表名 change 旧字段名 新字段名 字段类型 约束条件;  # 修改字段名
    alter table 表名 modify 字段名 新字段类型 约束条件;  # 修改原有字段的字段类型
    alter table 表名 drop 字段名;  # 删除字段

可视化软件Navicat

可视化软件就是第三方开发的用来充当数据库客户端的软件,特点是操作界面简单快捷,其底层本质还是SQL
能够操作数据库的第三方可视化软件有很多,针对MySQL数据库最出名的就是Navicat

1.下载
    浏览器搜索Navicat进入官网直接下载
2.破解
    1.网上搜索注册码,淘宝购买注册码
    2.直接下载破解版(版本较老)
    3.网上搜索破解教程或破解软件
    ...
    ps:
        这里分享一下我的破解方法https://www.bilibili.com/read/cv16884052
        
3.常用操作
    创建库、表、记录、主键、外键
    根据已有数据库生成模型或直接使用模型创建表、记录等
    新建查询可以编写SQL语句,并自带提示功能
    SQL语句注释语法
    --、#、\**\
    运行、转储SQL文件
    ps:有些功能可能需要自己修改SQL预览

python中操作MySQL

pymysql模块  第三方模块

import pymysql

# 1.连接MySQL服务器
conn = pymysql.connect(
    host='127.0.0.1',
    port=3306,
    user='root',
    password='321',
    db='db3',
    charset='utf8mb4'
)
# 2.产生游标对象
# cursor = conn.cursor()  # 括号内不填写额外参数,数据是元组,指定性不强  [()]
cursor = conn.cursor(cursor=pymysql.cursor.DictCursor)  # [{}]
# 3.编写sql语句
sql = 'select * from score;'
# 4.发送SQL语句
affect_rows = cursor.execute(sql)
# 5.获取SQL语句执行之后的结果
res = cursor.fetchall()
print(res)

补充说明
1.获取数据
    fetchall()  获取所有结果
    fetchone()  获取结果集的第一个数据
    fetchmany()  获取指定数量的结果
    
    cursor.scroll(1,'relative')  # 基于当前位置向后移动一个
    cursor.scroll(1,'absolute')  # 基于数据的开头往后移动一位
    
2.增删改查
    autocommit=True  # 针对增删改自动确认(在连接数据库时直接配置)
    conn.commit()  # 针对增删改二次确认(没有配置通过代码确认)

python中SQL的注入问题

我们在python中编写sql语句时会遇到各种问题,比如我们在编写用户登录功能时,只需要输对姓名或者用户名密码都输入错误了,但是却能够东路成功,这是因为遇到了SQL注入问题导致的
SQL注入问题就是利用特殊的组合产生特殊的含义,从而避开正常的业务逻辑
eg:
    sql = 'select * from user where name="jason" --fsdag" and spwd=""'
    转成SQL语句就是
    select * from user where name='jason' --fsdag' and spwd=''  # 用户名后面的语句被注释了
    sql = "select * from user where name='' or 1=1 --fgdsfh' and pwd=''"
    转成SQL语句  
    select * from user where name='' or 1=1 --fgdsfh' and pwd=''  
    # where后面是or连接的只要有一个成立就成立
    
针对上面的这种注入问题使用execute即可解决
    sql = 'select * from user where name=%s and pwd=%s'
    cursor.execute(sql,(username,password))
execute还有一个兄弟executemany,它可以一次性传入多条数据 executemany[sql,(),()]

视图

视图就是我们通过查询得到一张表,然后保存下来留待下次使用但是这张表是虚拟的,只能查询不能做修改删除操作
create view teacher_course as
select * from teacher inner join course on teacher.tid = course.teacher_id

触发器

触发器,字面意思达到某个条件后自动触发
在MySQL中对触发器的说明是:针对表继续进行增删改操作可以自动触发
    主要有六种情况:分别是增、删、改操作的前后、
create trigger 触发器名称 before/after insert/update/delete on 表名 for each row 
begin
    sql语句
end

1.触发器的命名规律  # tri(表名是触发器)_什么时候触发_什么操作_表名
    tri_before_insert_t1  
    tri_after_delete_t2
    tri_after_update_t2
2.临时修改SQL语句的结束符
    delimiter $$  # 修改结束符为$$

事物

1.事物的四大特性(ACID)(重点)
    A:原子性
        事务中的各项操作是一个不可分割的整体,要么同时成功要么同时失败
    C:一致性
        使数据库从一个一致性状态变为另一个一致性状态
    I:隔离性
        多个事物之间彼此互不干扰
    D:持久性
        也可以称之为永久性,一个事物一道提交,那么他对数据库中数据的改变就应该是永久的
事务相关关键字
	start transaction;  开启事物操作
	rollback            回滚到上一个状态
	commit              将数据真正刷新到硬盘
	savepoint           保存事物节点,就是保存事物当前状态
    
2.四种隔离级别(重点)
    在SQL标准中定义了四种隔离级别,每一种级别都规定了一个事务中所做的修改
    InnoDB支持所有隔离级别
        set transaction isolation level 级别
    1.read uncommitted(未提交读)
        事务中的修改即使没有提交,对其他事务也都是可见的,事务可以读取未提交的数据,这一现象也称之为"脏读"
    2.read committed(提交读)
        大多数数据库系统默认的隔离级别
      一个事务从开始直到提交之前所作的任何修改对其他事务都是不可见的,这种级别也叫做"不可重复读"
    3.repeatable read(可重复读)		# MySQL默认隔离级别
        能够解决"脏读"问题,但是无法解决"幻读"
      所谓幻读指的是当某个事务在读取某个范围内的记录时另外一个事务又在该范围内插入了新的记录,当之前的事务再次读取该范围的记录会产生幻行,InnoDB和XtraDB通过多版本并发控制(MVCC)及间隙锁策略解决该问题
    4.serializable(可串行读)
        强制事务串行执行,很少使用该级别

存储过程

可以看成是python中自定义的函数
可以看成是python中的自定义函数

# 无参函数
delimiter $$
create procedure p1() 
begin
	select * from cmd;
end $$
delimiter ;

# 调用
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;  定义
select @res;  查看
call p1(1,5,@res)  调用
select @res  查看

"""
查看存储过程具体信息
	show create procedure pro1;
查看所有存储过程
	show procedure status;
删除存储过程
	drop procedure pro1;
"""

# 大前提:存储过程在哪个库下面创建的就只能在对应的库下面才能使用!!!

# 1、直接在mysql中调用
set @res=10  # res的值是用来判断存储过程是否被执行成功的依据,所以需要先定义一个变量@res存储10
call p1(2,4,10);  # 报错
call p1(2,4,@res);  

# 查看结果
select @res;  # 执行成功,@res变量值发生了变化

# 2、在python程序中调用
pymysql链接mysql
产生的游表cursor.callproc('p1',(2,4,10))  # 内部原理:@_p1_0=2,@_p1_1=4,@_p1_2=10;
cursor.excute('select @_p1_2;')

流程控制

# 分支结构
declare i int default 0;
IF i = 1 THEN
	SELECT 1;
ELSEIF i = 2 THEN
	SELECT 2;
ELSE
	SELECT 7;
END IF;

# 循环结构
DECLARE num INT ;
SET num = 0 ;
WHILE num < 10 DO
	SELECT num ;
	SET num = num + 1 ;
END WHILE ;

函数

可以看成是python中的内置函数

"ps:可以通过help 函数名    查看帮助信息!"
1.移除指定字符
Trim、LTrim、RTrim

2.大小写转换
Lower、Upper

3.获取左右起始指定个数字符
Left、Right

4.返回读音相似值(对英文效果)
Soundex
"""
eg:客户表中有一个顾客登记的用户名为J.Lee
		但如果这是输入错误真名其实叫J.Lie,可以使用soundex匹配发音类似的
		where Soundex(name)=Soundex('J.Lie')
"""

5.日期格式:date_format
'''在MySQL中表示时间格式尽量采用2022-11-11形式'''
CREATE TABLE blog (
    id INT PRIMARY KEY auto_increment,
    NAME CHAR (32),
    sub_time datetime
);
INSERT INTO blog (NAME, sub_time)
VALUES
    ('第1篇','2015-03-01 11:31:21'),
    ('第2篇','2015-03-11 16:31:21'),
    ('第3篇','2016-07-01 10:21:31'),
    ('第4篇','2016-07-22 09:23:21'),
    ('第5篇','2016-07-23 10:11:11'),
    ('第6篇','2016-07-25 11:21:31'),
    ('第7篇','2017-03-01 15:33:21'),
    ('第8篇','2017-03-01 17:32:21'),
    ('第9篇','2017-03-01 18:31:21');
select date_format(sub_time,'%Y-%m'),count(id) from blog group by date_format(sub_time,'%Y-%m');

1.where Date(sub_time) = '2015-03-01'
2.where Year(sub_time)=2016 AND Month(sub_time)=07;
# 更多日期处理相关函数 
	adddate	增加一个日期 
	addtime	增加一个时间
	datediff计算两个日期差值

索引相关概念

1.索引就好比一本书的目录,它能让你更快的找到自己想要的内容
2.让获取的数据更有目的性,从而提高数据库检索数据的性能

索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构
	primary key
	unique key
	index key
1.上述的三个key都可以加快数据查询
2.primary key和unique key除了可以加快查询本身还自带限制条件而index key很单一就是用来加快数据查询
3.外键不属于索引键的范围 是用来建立关系的 与加快查询无关

索引加快查询的本质
	id int primary key auto_increment,
 	name varchar(32) unique,
  	province varchar(32)
 	age int
 	phone bigint
 	
	select name from userinfo where phone=18818888888;  # 一页页的翻
	select name from userinfo where id=99999;  # 按照目录确定页数找

索引可以加快数据查询 但是会降低增删的速度
通常情况下我们频繁使用某些字段查询数据
	为了提升查询的速度可以将该字段建立索引
    
聚集索引(primary key)
	主键、主键索引
辅助索引(unique,index)
	除主键以外的都是辅助索引
覆盖索引
	select name from user where name='jason';
非覆盖索引
	select age from user where name='jason';

索引数据结构

索引底层其实是树结构>>>:树是计算机底层的数据结构
 
树有很多中类型
	二叉树、b树、b+树、B*树......

二叉树
	二叉树里面还可以细分成很多领域 我们简单的了解即可 
  	二叉意味着每个节点最大只能分两个子节点
B树
	所有的节点都可以存放完整的数据
B+\*树
	只有叶子节点才会存放真正的数据 其他节点只存放索引数据
 	B+叶子节点增加了指向其他叶子节点的指针
  	B*叶子节点和枝节点都有指向其他节点的指针

辅助索引在查询数据的时候最会还是需要借助于聚集索引
	辅助索引叶子节点存放的是数据的主键值

有时候就算采用索引字段查询数据 也可能不会走索引!!!
	最好能记三个左右的特殊情况

前端之HTML

前端与后端的概念

前端是直接与用户打交道的,后端不直接与用户打交道,主要负责内部的业务逻辑的执行

http协议

又称为超文本传输协议  
1.四大特性
    1.基于请求响应
        客户端发送请求,服务端响应请求
    2.基于TCP、IP作用于应用层之上的协议
        该协议属于应用层
    3.无状态
        服务端不会保存客户端的状态
    4.无\短连接
        客户端与服务端不会一直保持连接
        
2.数据格式
    1.请求格式
        请求首行(请求方式根据协议版本有多种)
        请求头(一堆的k:v键值对)
        换行
        请求体(存放敏感信息,不是所有的请求方式都有请求体)
        
    2.相应格式
        响应首行(状态码 协议版本)
        响应头(一堆k:v键值对)
        换行
        响应体(存放给浏览器展示的数据)
        
3.响应状态码
    用数字来表示一些意思
    1xx:服务端已经接收到了你的请求正在处理,客户端可以继续发送或等待
    2xx:200 请求成功,服务端发送了对应的响应
    3xx:302(临时) 304(永久) 重定向(想访问一个网页但是自动调到了另一个网页)
    4xx:403 访问权限不够  404 请求资源不存在
    5xx:服务端内部错误
    
    我们还可以自己定义更多的响应状态码,通常以10000起步

HTML概览

1.HTML注释语法
    <!--注释内容-->
2.HTML文档结构
	<html>		固定格式 html包裹
    	<head>主要放跟浏览器交互的配置</head>
       <body>主要放给用户查看的花里胡哨的内容</body>
    </html>
3.HTML标签分类
    单标签(自闭和标签)
    	<img/>
    双标签
    	<h1></h1>

head内常见标签

1.title  网页小标题
2.meta  定义网页源信息(配置较多)
    <meta name="keywords" content="查询关键字">
    <meta name="description" content="网页简介">
3.style  内部支持编写css代码
    <style>
        h1{
            color:rebeccapurple;
        }
    </style>
4.link  引入外部css文件
    <link rel="stylesheet" href="mycss.css">
5.script  支持内部编写js代码也可以引入外部js文件
    <script>
            prompt('good good study','day day up')
   </script>
	<script src="myjs.js"></script>

body之基本标签

1.标题系列标签
    h1-h6
2.段落标签
    p
3.其他标签
    u  下划线
    i  斜体
    s  删除线
    b  加粗
    # 相同的效果可能是由不同的标签实现的,标签的功能不是独一无二的
4.换行与分割线
    br  换行
    hr  分割线
    
'''
标签分类
    行内标签  u i s b
        内部文本有多大就占多大(紧挨着的都在一行)
    块儿级标签  h系列 p
        独占一行
'''

body之常见符号

1.&nbsp;    空格
2.&gt;      大于
3.&lt;      小于
4.&amp;     &符
5.&yen;     ¥
6.&copy;    ©
7.&reg;     ®

body之布局标签

div
    块儿级标签
span
    行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
	块儿级标签内部可以嵌套块儿级标签和行内标签
		p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
	行内标签内部只能嵌套行内标签
"""

body之常见标签

"""
标签括号内填写的 什么=什么 称之为的标签的属性
	1.默认属性
		标签自带的 编写的时候有自动提示
	2.自定义属性
		用户自定义 编写不会有提示甚至会飘颜色
"""
a 标签  链接标签
    href
        1.填写网址    具备跳转功能
            href='url'
        2.填写其他标签的id值    具备锚点功能
            href='#id'
        
    target
        默认_self原网页跳转
        _blank新建网页跳转
        
img 标签    图片标签
    src  
        1.填写图片地址
        2.其他特性
    title
        鼠标悬浮在图片上自动展示的文本
    alt
        图片加载失败提示的信息
    width\height
        图片的尺寸,两个调整一个即可,等比例缩放

body之列表标签

无序列表
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    网页上所有有规则排列的横向或者竖向的数据一般用的都是无序列表
    
有序列表
    <ol type="I">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    
标题列表
    <dl>
        <dt>大标题</dt>
            <dd>小标题1</dd>
            <dd>小标题2</dd>
        <dt>大标题</dt>
            <dd>小标题1</dd>
            <dd>小标题2</dd>
            <dd>小标题3</dd>
    </dl>

body之表格标签

1.先写基本骨架
    <table>
        <thead></thead>
        <tbody></tbody>
    </table>
2.再写表头及表单数据
    <tr>  一个tr标签就表示一行
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    
    <tr>
        <td>1</td>    td主要用于表达数据
        <td>jason</td>
        <td>18</td>
    </tr>
    
完整写法
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>    
                <td>jason</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>

body之表单标签

可以获取到用户的数据并发送给服务端

form标签
    action  控制数据提交的地址
    method  控制数据提交的方法
    
input标签  用户输入
    type属性
        text        普通文本
        password    密文展示
        date        日期选项
        email       邮箱格式
        radio       单选
        checkbox    多选
        file        文件
        submit      触发提交动作
        reset       重置表单内容

select标签    下拉框
    option标签    一个个的选项
    
textarea标签  获取大段文本
   
基于form表单发送数据
1.获取的用户数据应该以k:v健值对的形式发送
    用于获取用户数据的标签至少应该含有name属性,就相当于字典的键
    用户输入的数据保存到标签的value属性中,相当于字典的值
2.如果获取的用户数据不是填写而是选择,那么我们需要自己填写value
    <input type="radio" name="gender" value="male">
# 没有name属性的标签form表单会直接忽略不会发送
3.针对input标签理论上应该配一个label标签绑定,但是也可以不写
    在这里label的作用就是使鼠标在点击username的时候能够直接聚焦到输入框
    写法一:
    <label for="d1">username:
        <input type="text" id="d1">
    </label>
    写法二:
    <label for="d1">username:</label>
        <input type="text" id="d1">
4.标签的属性如果和属性值相等那么可以简写
    完整写法
    	<input type="file" multiple="multiple">
    简写
   		<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
    单选与多选使用checked,下拉框使用selected
    <input type="radio" name="gender" checked="checked">
    <input type="checkbox" name="football" checked>
    下拉框
    <option value="" selected>222</option>
6.下拉框与文件上传可以复选
    <input type="file" multiple>
    <select name="" id="" multiple>

CSS

层叠样式表

主要用于调节HTML标签的各种样式
标签的两大属性:
    1.class属性
        分类查找,主要用于批量查找
    2.id属性
        精确查找,点对点的查找
我们之所以将标签分为这两大属性主要是用来区分标签的,页面都是由HTML组成的,且一个页面有许多HTML标签都是相同的,但是这些相同的标签在不同的位置样式可能是不同的,所以我们需要将之区分开来

# 我们学习css是需要先学会查找标签,然后才能调整对应标签的样式
1.css语法结构
    选择器{
        样式名1:样式值1,
        样式名2:样式值2
    }
2.css注释语法
    /*注释内容*/
3.引入css的多种方式
    1.head内style标签内编写(学习css是推荐使用)
    2.head内link标签引入(主流写法)
    3.标签内直接通过style属性编写(不推荐使用)

选择器

1.CSS基本选择器
    1.标签选择器(直接按照标签名查找标签)
		div {
            color: red;
			}
    2.类选择器(按照标签的class值查找标签)
        .c1 {
            color: red;
        }
    3.id选择器(根据标签的id值精准查找标签)
        #d1 {
            color: yellow;
        }
    4.通用选择器(直接选择页面所有的标签)
        * {
            color: blue;
        }

2.CSS组合器
    1.后代选择器(空格)
        div span {
            color: red;
        }
        查找div标签内所有的span标签
    2.儿子选择器(大于)
        div>span {
            color: yellow;
        }
		查找div标签下的第一级的span标签
    3.毗邻选择器(加号)
        div+span {
            color: blue;
        }
        查找与div标签紧挨着的span标签,如果与div标签紧挨着的不是span标签那么该选择器不生效
    4.弟弟选择器(小波浪号)
        div~span {
            color: yellow;
        }
        查找与div标签同级的span标签

3.分组与嵌套
    1.div,p,span {
            color: yellow;
        }
     多个选择器合并查找
    2. div.c1 {
        color: red;
    }
     查找class类含有c1的div的标签
    3..c1 p.c2 {
        color: yellow;
    }
     查找含有c1样式值中含有c2样式值的p标签

4.属性选择器
    [username] {
        color: red;
    }  # 按照属性名查找
    [username='jason'] {
        color: red;
    }  # 按照属性名等于属性值查找

5.伪类选择器
    1.鼠标移动到连接上
        a:hover {
            color: red;
        }
     2.input获取焦点(鼠标点击)之后采用的样式
        input:focus {
            background-color: red;
        }

6.伪元素选择器
    使用css添加文本无法正常选中
    1.在文本之前
        p:before {
            content: '一二三';
            color: red;
        }
    2.在文本之后
        p:after {
            content: '三二一';
            color: red;
        }
            
选择器优先级
1.选择器相同,导入方式不同
    就近原则
2.原则器不同,导入方式相同
    内联样式 > id选择器 > 类选择器 > 标签选择器

样式调节

1.字体样式
    font-size:24px  # 字体大小
    font-weight用来设置字体的字重(粗细)。
        值	       描述
        normal	    默认值,标准粗细
        bold	    粗体
        bolder	    更粗
        lighter	    更细
        100~900	    设置具体粗细,400等同于normal,而700等同于bold
        inherit	    继承父元素字体的粗细值
    字体颜色 三种模式
        color: red;  # 直接填写颜色英文
        color: #3d3d3d;  # 填写颜色代码
        color: rgb(111,111,111)  # rgb值 
        color: rgba()  # 与rgb一样,只是最后一个a用来控制透明度
    文字对齐
        text-align 属性规定元素中的文本的水平对齐方式。
            值	     描述
            left	  左边对齐 默认值
            right	  右对齐
            center	  居中对齐
            justify	  两端对齐
    文字装饰
        text-decoration 属性用来给文字添加特殊效果。
            值				描述
            none		 	默认。定义标准的文本。
            underline	 	定义文本下的一条线。
            overline	 	定义文本上的一条线。
            line-through	定义穿过文本下的一条线。
            inherit		 	继承父元素的text-decoration属性的值
            
2.背景属性
	div {
            width: 800px;
            height: 800px;  # 背景大小
            /*background-color: red;*/  # 背景颜色
            /*background-image: url("666.png");*/  # 以图片作为背景
            /*background-repeat: no-repeat;*/  # 背景图片不平铺满整个背景,正常默认平铺满
            /*background-repeat: repeat-x;*/  # 背景图片只在水平方向上平铺
            /*background-repeat: repeat-y;*/  # 背景图片只在上下方向上平铺
            /*background-position: center center;*/  # 背景图片居中
            background:  url("666.png") blue no-repeat center center; 
            # 当多个属性名有相同的前缀 那么可以简写一次性完成
        }
	

边框

用于给标签添加样式
border-width: 5px;  # 边框宽度
border-style: solid;  # 边框样式
border-color: red;  # 边框颜色
上面的可以直接简写成
    border: 5px solid red;
# 如果只是设置其中一面的边框的话加上方向就行了 border-left]\

画圆(就是将边框设置为圆形)  #边框长宽一样则是正圆
border-radius: 50%;

display

用于控制HTML元素的显示效果
display:none  # 彻底的隐藏标签,页面上不会显示标签,也不会保留标签的位置
起到隐藏作用的还有一个
visibility:hidden  
# 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局

盒子模型

我们可以将标签看成是一个盒子,标签内的内容就是盒子内的物体
1.盒子内的物体               content(内容)
2.物体与盒子内部边界的距离    padding(内边距)
3.快递盒包装                 border(边框)
4.快递盒与快递盒之间的距离    margin(外边框)

padding使用方法
padding: 10px;  # 上下左右
padding: 10px 20px;  # 上下  左右
padding: 10px 20px 30px;  # 上  左右  下
padding: 10px 20px 30px 40px;  # 上  右  下  左
    
margin使用方法与padding相同
针对标签的嵌套水平方向可以居中
margin: 0 auto;

浮动

浮动是用来做页面布局的,使用方法就是 float:left\right
但是使用浮动带来的影响就是会造成父标签塌陷,这是因为浮动的元素是脱离正常文档流的
解决浮动最好的办法就是先写好样式类,谁塌陷了就给谁添加该样式类就行了
样式类
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }

溢出

就是填充的内容超出了标签的大小
比如是图片超出了标签大小,那么我们可以让它自适应
div img {
    max-width: 100%;
}  # 需要单独写

定位

针对标签的定位有四种状态
    1.static静态        标签默认的状态,正常状态下无法通过定位的参数来移动
    2.relative相对定位  基于标签原来的位置
    3.absolute绝对定位  基于某个定位过的父标签做定位
    4.fixed固定定位     基于浏览器窗口固定不动,无论窗口是否滚动都会在设置好的固定位置

z-index

用于设置对象的层叠顺序
    1.z-index值表示谁在谁上面,数值大的压着数值小的
    2.只有定位了的原色才能有z-index,浮动元素用不了
    3.z-index是一个正整数,默认的z-index值为零,如果大家的z-index值相同,那么谁写在HTML后面谁就压着别人
    4.定位了的元素永远压着没有定位的元素  

标签:总结,第十,color,标签,id,周周,SQL,选择器,select
From: https://www.cnblogs.com/zyg111/p/16949973.html

相关文章