前端css（完）

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

"""
解决浮动带来的影响 推导步骤
    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>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;
        }
        #d2 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #d3 {
            height: 100px;
            width: 100px;
            background-color: greenyellow;
            float: left;
        }
        /*#d4 {*/
        /*    !*height: 50px;*!*/
        /*    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>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        p {
            height: 100px;
            width: 100px;
            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>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        body {
            margin: 0;
            background-color: #4e4e4e;
        }
        #d1 {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            margin: 20px auto;
            overflow: hidden;
        }
        #d1>img {
            /*max-width: 100%;*/
            width: 100%;
            /*占标签100%比例*/
        }
    style>
head>
body>
div id="d1">
    img src="111.jpg" alt="">
div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    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 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>

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
    1.相对定位
# 脱离文档流
    1.浮动
  2.绝对定位
  3.固定定位
  








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>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    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;

        }
        h1  {
            text-align: center;
        }

        #d1, #d2 {
            text-align: center;
        }
        button {
            margin-bottom: 10px;
            margin-left: 40%;
        }
    style>
head>
body>
div>这是最底层的页面内容div>
div class="cover">div>
div class="modal">
    h1>登陆页面h1>
    p id="d1">username:input type="text">p>
    p id="d2">password:input type="text">p>
    button>点我点我~button>
div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    meta name="viewport" content="width=device-width, initial-scale=1">
    style>
        #d1 {
            background-color: rgba(0,0,0,0.5);
        }
        #d2 {
            background-color: rgb(0,0,0);
            opacity: 0.5;
            color: blue;
        }
    style>
head>
body>
    p id="d1">111p>
    p id="d2">22asdasdasd2p>
body>
html>