布局与定位

最新推荐文章于 2022-08-23 08:50:35 发布

星辰呀

最新推荐文章于 2022-08-23 08:50:35 发布

阅读量203

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_60659070/article/details/119501397

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

圣杯布局：

 <style>
    .main{
        width: 1000px;
        height: 500px;
        border: 1px solid red;
        margin:0 auto;
    }
    .header{
        width: 100%;
        height: 100px;
        background: lightblue;
    }
    .container{
        width: 100%;
        height: 300px;

    }
    .container .left{
        width:300px;
        height: 300px;
        float: left;
        background: lightcoral;
    }
    .container .center{
        width: 400px;
        height: 300px;
        float: left;
        background: lightsalmon;
    }
    .container .right{
        width: 300px;
        height: 300px;
        float: left;
        background: lightseagreen;
    }
    .footer{
        width: 100%;
        height: 100px;
        background: lightslategray;
    }
</style>

相对定位：

    <style>
	    .father{
        margin: 0 auto;
        width: 700px ;
        height: 700px;
        border: 1px solid red;

    }
    .son{
        margin: 100px auto;
        width: 200px;
        height: 200px;
        background: lime;
        position: relative;
        margin-top: 200px;
        /* 当你只有一个相对定位的时候 坐标轴是谁*/
        /* 其坐标原点是其原来的位置 */
    }

    /* 
    实际上定位有三种 
    相对定位 绝对定位 固定定位  
    定位的属性是 position 
    relative absolute fixed
    */

    /* 
        1)相对定位是不会脱离标准文档流的,他原本的位置还是被自己占着,别人是不能占用
        2)不管一个盒子 之前是什么性别  相对定位后 还是什么性别 性别是不会改变的
        3)一般情况下,我们一般都要通过使用left,top,right,bottom来设置偏移量 ,但是 position:relative这一行代码除了表示相对定位外 还有其他含义
        4)相对定位的应用场景,一般是用到对一个元素的位置进行微调
    */
</style>




</head>
<body>
<div class="father">
	    <div class="son">

    </div>
</div>
</body>

固定定位：

 <	style>
    html{
        height: 300%;
    }
    .guanggao{
        width: 100px;
        height: 200px;
        border: 1px solid red;
        position: fixed;
        right: 0;
        bottom: 0;
    }
    /* 1.固定定位 没有参考点,就以body为参考点 */
    /* 2.固定定位也可以和margin同时使用 */
    /* 3.一般情况下 这种小广告 需要用到固定定位的东西 一般都是写在body的下一级 */
    /* .test{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        overflow: scroll;
        position: relative;
    }
    .son{
        height: 200%;
    }
    .xiaoguanggao{
        width: 20px;
        height: 20px;
        position: fixed;
        background: lime;
        top: 0;
        right: 0;
    } */
</style>

<body>
<div class="guanggao">
    我是一个小广告,你来消灭我
</div>

<!-- <div class="test">
    <div class="son">
    </div>
    <div class="xiaoguanggao">
    </div>
</div> -->