双重模态框堆栈溢出_CSS溢出，定位，z轴，透明度-CSDN博客

本文链接：https://blog.csdn.net/weixin_40009099/article/details/112677920

https://www.zhihu.com/video/1244380319496675328

每日测验

今日考题
1.什么是python的垃圾回收机制
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
3.列举python中常用模块及主要功能，越多越好！
4.简述盒子模型
5.什么是浮动，浮动的作用

答案

1.什么是python的垃圾回收机制

引用计数，标记-清除，分代回收


2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个


知乎上面有


3.列举python中常用模块及主要功能，越多越好！
time:时间模块，random：随机模块，socket：通讯模块，process：进程，theade：线程，pymysql：mysql数据库，os：系统，sys：系统，datatime：时间，json：数据格式，pickle：数据格式，hashlib：哈希密文


4.简述盒子模型


外边距    margin
边框      border
内边距    padding
内容大小   content

5.什么是浮动，浮动的作用


能够让标签脱离正常的文档流漂浮到空中
可以选择left和right，布局的时候可以用到

内容概要

解决浮动带来的影响
溢出属性
定位
验证浮动和定位是否脱离文档流
z-index模态框
透明度opacity
简单博客园首页搭建

内容详细

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题


解决浮动带来的影响 推导步骤
    1.自己加一个div设置高度
    2.利用clear属性
        #d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
  3.通用的解决浮动带来的影响方法
    在写html页面之前 先提前写好处理浮动带来的影响的 css代码
    .clearfix:after {
            content: '';
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 3px solid black;
        }
        #d2 {
            height: 100px;
            width: 100px;
            background-color: #e7ff5b;
            float: right;
        }
        #d3 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            float: left;
        }
        /*#d4 {*/
        /*    !*height: 100px;*!*/
        /*    clear: left;  !*该标签的左面（地面和空中不能有浮动的元素）*!*/
        /*}*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="d1" class="clearfix">
        <div id="d2"></div>
        <div id="d3"></div>
<!--        <div id="d4"></div>-->
    </div>
</body>
</html>

溢出属性

p {
            height: 100px;
            width: 50px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/  
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            height: 100px;
            width: 50px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }
    </style>

</head>
<body>
    <p>我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!我还在起始点  刚刚换上2档 准备发车!</p>
</body>
</html>

定位

静态

所有的标签默认都是静态的static，无法改变位置

相对定位(了解)

相对于标签原来的位置做移动relative

绝对定位(常用) absolute

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

eg:小米网站购物车

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位

固定定位(常用) fixed

相对于浏览器窗口固定在某个位置

eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

ps:浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流 （保留位置）
    1.相对定位
# 脱离文档流  （不保留位置）：合理
    1.浮动
  2.绝对定位
  3.固定定位

<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

z-index模态框

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)        中间层
  3.白色的注册区域(z=100)  离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

透明度opacity

# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色 
而opacity可以修改颜色和字体

opacity: 0.5;

书写

当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
博客园页面搭建

孙尚香搭建效果图

下面是搭建这个网页布局的代码

孙尚香代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>孙尚香</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="left">
    <div class="human-avatar"><img src="222.jpg" alt=""></div>
    <div class="human-name">孙尚香</div>
    <div class="human-info">召唤师峡谷一炮王</div>
    <div class="human-show">
        <ul>
            <li><a href="">定位：射手、刺客</a></li>
            <li><a href="">武器：加特林、大炮</a></li>
        </ul>
    </div>
    <div class="human-skill">
        <ul>
            <li><a href="">装备推荐</a></li>
            <li><a href="">铭文推荐</a></li>
            <li><a href="">推荐队友</a></li>
            <li><a href="">克制技巧</a></li>
        </ul>
    </div>
</div>
<div class="right">
    <div>
        <div>
            <span class="h-skill"><img src="被动.jpg" alt=""></span>
            <span class="cd">CD：0s</span>
        </div>
        <div class="skill-name">活力迸发：孙尚香每次普通攻击命中敌人都会减少0.5秒翻滚突袭的冷却时间。</div>

        <div class="skill-show">技能说明：普攻缩短1技能cd，没事你就射就对了</div>
    </div>
    <hr>
        <div>
        <span class="h-skill"><img src="一技能.jpg" alt=""></span>
        <span class="cd">CD：6s</span>

    <div class="skill-name">
        翻滚突袭：孙尚香向指定方向翻滚，下一次普通攻击变更为强化射击，强化射击会对一条直线上的敌人造成250/275/300/325/350/375（+100%物理加成）点物理伤害，如果翻滚后附近有敌方英雄将会增加80%持续衰减的移动速度，持续2秒，使用强化射击后会重置下一次普通攻击并增加攻击距离。
    </div>

    <div class="skill-show">技能说明：一技能是最主要的输出技能，熟练使用侧滚是区分一个人会不会玩孙尚香的主要标准，尽量不要直直的往前翻滚，很可能滚过去就回不来</div>
    </div>
    <hr>
        <div>
            <span class="h-skill"><img src="二技能.jpg" alt=""></span>
            <span class="cd">CD：10s</span>

        <div class="skill-name">
            红莲爆弹：孙尚香朝指定位置投掷爆弹，对范围内敌人造成200/240/280/320/360/400（+100%物理加成）点物理伤害并减少其90%移动速度，持续1秒。被命中的英雄和小兵还会被标记5秒，孙尚香的普攻伤害会对标记目标造成额外100/120/140/160/180/200（+20%物理加成）点物理伤害（对小兵的伤害翻倍）；命中敌人后增加孙尚香物理穿透25%,持续5秒。
        </div>

        <div>技能说明：用完一技能之后别急着普攻，如果距离够的话，先用二技能，可以增加自身的穿甲能力，输出爆炸</div>
        </div>
    <hr>
<div>
    <span class="h-skill"><img src="三技能.jpg" alt=""></span>
    <span class="cd">CD：30s</span>
</div>
<div class="skill-name">
    究极弩炮：孙尚香蓄力向指定方向发射一枚弩炮，弩炮在触碰敌人或者飞行到最远距离后将发生爆炸，对第一名触碰的敌人造成500/750/1000（+185%物理加成）点物理伤害，对爆破范围内的敌人造成75%伤害。
</div>

<div class="skill-show">技能说明：用完一技能，放二技能，平a，最后放个大招潇洒回头，然后你就可以等待王者峡谷为你播报一声喷他kill</div>
</div>
</div>
</body>
</html>
/*整体*/
body {
    margin: 0;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}
/*左面*/
.left {
    background-color: #eeeeee;
    float: left;
    width: 20%;
    height: 100%;
    position: fixed;
}
.human-avatar img {
    max-width: 100%;
}
.human-avatar {
    height: 150px;
    width: 150px;
    border: 3px blue solid;
    border-radius: 50%;
    overflow: hidden;
    margin: 20px auto;
}
.human-name {
    font-size: 25px;
    text-align: center;
    margin-bottom: 10px;
}
.human-info {
    font-size: 18px;
    text-align: center;
}
ul {
    text-align: center;
}
.human-show a:hover,.human-skill a:hover {
    color: cornflowerblue;
}




/*右面*/
.right {
    background-color: azure;
    float: right;
    width: 80%;
    height: 100%;
}

.cd {
    float: right;
    margin: 50px 750px auto auto;
}

.skill-name,.skill-show {
    font-size: 15px;
    color: black;
    text-indent: 20px;
}