zoukankan      html  css  js  c++  java
  • 盒子定位与层模型

    一、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;

    }

  • 相关阅读:
    [HAOI2009] 毛毛虫
    [NOI2015]品酒大会
    SDOI2016 生成魔咒
    [POJ2406]字符串的幂
    [SPOJ705]不同的子串
    快速幂和矩阵快速幂
    对于最近的一些日常总结by520(17.10.18)
    思维训练
    趣味性的高智商(贼有意思)的题(坑)
    C++手动开O2优化
  • 原文地址:https://www.cnblogs.com/xibuhaohao/p/10342772.html
Copyright © 2011-2022 走看看