• 盒子定位与层模型


    一、position定位参数,配合参数left、right、top、bottom

    position:absolute;  //定位,脱离原来位置,进行定位

    HTML代码

    <body>

        <div></div>

    </body>

    CSS代码

    div{

        position:absolute;  //定位,脱离原来位置,进行定位

        lft:100px;            //right:200px;  left、right不可同时出现

        top:200px;           //bottom:200px;  一般情况不设置底bottom

        100px;

        height:100px;

        background-color:red;

    }

    二、relative定位参数

    position:relative;  //保留原来位置进行定位

    三、定位总结

    absolute:

    定位是相对于最近的有定位的父级定位

    如果没有最近的定位的父级,那么相对于文档进行定位

    relative:相对于自己原来的位置进行定位

    四、定位如何使用

    用relative作为参照物

    用absolute作为定位

    好处:减少对后续元素的破坏

    五、fixed定位

    以不变应万变,滚动条怎么滑动它都不动

    HTML代码

    <body>

        <div></div>

    </body>

    CSS代码

    div{

       position:fixed;

        50px;

        left:0;

        top:300px;

        height:200px;

        background-color:red;

        color:#fff;

    }
    <br>

    <br>

    <br>

    <br>

    <br>

    .

    .

    .

    <br>

    六、永久居中(屏幕正中间)

    CSS代码

    方法一

    div{
        100px;

        height:100px;

        background-color:red;

        position:absolute;

        left:50%;           //只是左顶点

        top:50%;           //只是左顶点

        margin-left:-50px;

        margin-top:-50px;

    }

    方法二

    div{
        100px;

        height:100px;

        background-color:red;

        position:fixed;

        left:50%;           //只是左顶点

        top:50%;           //只是左顶点

        margin-left:-50px;

        margin-top:-50px;

    }

  • 相关阅读:
    【Linux】命令——基本命令
    正则表达式
    Letex
    Markdown
    文本编辑器Vim
    【Linux】集群
    【Linux】软件安装
    共线性synteny
    windows触控手势
    【Linux】bin结尾的安装包
  • 原文地址:https://www.cnblogs.com/xibuhaohao/p/10342772.html
Copyright © 2020-2023  润新知