day53-浮动影响，溢出，定位，透明，模态框等

解决浮动带来的影响

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

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

溢出属性

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

定位

静态

所有的标签默认都是静态的static，无法改变位置
相对定位(了解)

相对于标签原来的位置做移动relative
绝对定位(常用)

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

eg:小米网站购物车

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

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

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; 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px; 200px;background-color: greenyellow"></div>-->

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

<div style="height: 100px; 200px;background-color: red;"></div>
<div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px; 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;

博客园页面搭建

界面-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园</title>
    <link rel="stylesheet" href="博客园CSS.css">
</head>
<body>
    <div class="left">左半部分
        <div class="left-img">
            <img src="111.jpg" alt="">
        </div>
        <div class="left-1">
            <p>老司机的博客</p>
        </div>

        <div class="left-2">
            <p>车速太快</p>
        </div>

        <div class="left-3">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">微信公众号</a></li>
            </ul>
            </div>
        <div class="left-4">
            <ul>
            <li><a href="">#Python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#Golang</a></li>
        </ul>
            </div>
    </div>


    <div class="right">右半部分
        <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
                <div class="r0">
            <div class="r1">
                <span class="r1-1">文化开车的重要性</span>
                <span class="r1-2">2020-5-14 18:11:51</span>
            </div>
            <div class="r2">
                <span class="r2-1">jason老师从来不开车,非常正儿八经的!</span>
            </div>
            <div class="r3">
                <span class="r3-1"> #Python   &nbsp#JavaScript</span>
            </div>
        </div>
        
    </div>
</body>
</html>

界面-css

body{
    margin: 0;
    background-color: whitesmoke;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
.left{
     float: left;
     20%;
    height: 100%;


    position: fixed;
    background-color: gray;


    /*clear: both;*/

}
.left-img{
    height: 100px;
     100px;
    border-radius: 50%;
    border: #eeeeee 5px solid;
    overflow: hidden;
    margin: 20px auto;
}
.left-img img{
    max- 100%;
}
.right{
    background: whitesmoke;
    height: 1000px;
     80%;
    float: right;


}
.left-1,.left-2{
    color: #4e4e4e;
    font-size: 18px;
    text-align: center;
}

.left-3,.left-4{
    font-size: 24px;
}

.left-3 a,.left-4 a{
    color: #4e4e4e;

}
.left-3 a:hover,.left-4 a:hover{
    color: white;

}
.left-3 ul,.left-4 ul{
    text-align: center;
    margin-top: 120px;
}
.r0{
    margin: 10px 40px 20px 10px;
    background-color: rosybrown;
    box-shadow: 5px 5px 5px rgba(128,128,128,0.5);
}
.r1{
    border-left: red 5px solid;
    margin-bottom: 20px;
}
.r1-1{
    font-size: 36px;

}
.r1-2{
    float: right;
    margin: 20px 10px;
    font-size: 18px;
}
.r2-1{
    margin-left: 10px;

}
.r2{
    border-bottom: black 1px solid;
    margin-bottom: 20px;
}
.r3-1{
    margin-left: 10px;
}

Js简介

1.js也是一门编程语言 它也是可以写后端代码的
    用js一统天下 前后端都可以写
      nodejs 支持js代码跑在后端服务器上
    然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度


ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。


JS版本
    主要还是用的5.1和6.0

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

# js的注释
"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

# 两种引入方式
    1.script标签内部直接书写js代码
  2.script标签src属性引入外部js代码

# js语法结构
    js是以分号作为语句的结束
  但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符

变量

"""
在js中 首次定义一个变量名的时候需要用关键字声明
    1.关键字var
        var name='jason'
    2.es6推出的新语法
        let name='jason'
        如果你的编辑器支持的版本是5.1那么无法使用let
        如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
  print(n)
print(n)  
# var 5        let 10

"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""

常量

# python中没有真正意义上的常量默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14

相关阅读:
bugku-web40
buuctf-BabyUpload
webpack4系列之【1. webpack入门】
webpack Cannot find module 'webpack/schemas/WebpackOptions.json'
.gitignore无效解决方案以及git rm和rm的区别
 nginx启动或者重启失败，报错nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)
vue-学习系列之vue双向绑定原理
 mac环境下配置nginx
杂记
 更换淘宝源
原文地址：https://www.cnblogs.com/xiao-zang/p/12890533.html