web前端实习Day6--css4--定位

LXSJZBD

已于 2024-03-11 16:17:46 修改

阅读量1k

点赞数 28

文章标签：前端 css

于 2024-03-10 23:11:23 首次发布

本文链接：https://blog.csdn.net/LXSJZBD/article/details/136587708

版权

1.position定位----相对定位（relative）

2.position定位----绝对定位（absolute）

3.position定位----固定定位（fixed）

4.堆叠次序

5.行内元素设置宽高

6.居中问题

1.position定位----相对定位（relative）

相对定位的特性：

1 相对定位以元素自身的位置为基准

2 相对定位占位置

<style>
    div{
        width: 50px;
        height: 50px;
        background-color: red;
    }
    div:nth-child(2){
        background-color: green;
        position: relative;
        top: 10px;
        left: 50px;
    }
</style>

2.position定位----绝对定位（absolute）

绝对定位特性：

1 以父级为标准移动位置

若父级没有定位，则绝对定位的盒子以文档为准

若父级有定位，则绝对定位以父级为准移动位置

2 绝对定位不占有位置

<style>
    #father{
        width: 350px;
        height: 350px;
        background-color: green;
        /* 父级定位 */
        position: relative;
        top: 50px;
        left: 50px;
    }
    #son{
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>

子绝父相定位

<style>
    .father{
        width: 500px;
        height: 100px;
        background-color: red;
        position: relative;
    }
    .down{
        width: 600px;
        height: 200px;
        background-color: #000;
    }
    .father>div{
        width: 40px;
        height: 40px;
        background-color: purple;
        position: absolute;
    }
    .son-l{
        left: 0;
        top: 30px;
    }
    .son-r{
        right: 0;
        top: 30px;
    }
</style>

<body>
    <div class="father">
        father
        <div class="son-l">son1</div>
        <div class="son-r">son2</div>
    </div>
    <div class="down"></div>
</body>

3.position定位----固定定位（fixed）

和父级没有任何关系会脱标

4.堆叠次序

z-index:数值数值越大越靠上，后面不要跟单位，只能是整数

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
    .one{
        z-index: 3;
    }
    .two{
        top: 50px;
        left: 50px;
        background-color: green;
        /* 数值越大越靠上 后面不要跟单位 只能是整数 */
        z-index: 2;
    }
    .three{
        top: 100px;
        left: 100px;
        background-color: blue;
    }
</style>

5.行内元素设置宽高

块级元素不设置width时，默认和父元素一样宽

行内设置宽度不生效，可以通过以下三种方式给行内元素设置宽高：

1 display:inline-block

2 绝对定位、固定定位

3 设置浮动

6.居中问题

横向居中：

        行内、行内块、文字在块级里面横向居中：

                给块级元素添加 text-align:center

        行内、文字、行内块在行内块里面横向居中：

                给行内块添加 text-align:center

        块级在另一个块级里面横向居中：

                给内部的块级加宽度(小于外部的)，同时设置 margin:0 auto

纵向居中：

        行内、文字在块级里面纵向居中：

                给当前的块级+line-height=当前块级元素高度前提是行内和文字是单行的

        行内块、在块级里面纵向居中：

                给当前行内块+vertical-align:middle

                给外部的块级+line-height：块级的高度

                不一定百分百生效

        块级元素在另一个块级里面纵向居中：

                只能通过定位 top 50% margin-top:-自身高度的一半

绝对居中：

        第一种：

        分开横向居中+纵向居中

        top:50%;margin-top:-自身高度的一半

        left:50%;margin-left:-自身宽度的一半

        第二种

        left:0;top:0;right:0;bottom:0;

        margin:auto

LXSJZBD

关注

28
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
web前端实习Day6--css4--定位

给当前的块级+line-height=当前块级元素高度前提是行内和文字是单行的。给内部的块级加宽度(小于外部的)，同时设置 margin:0 auto。只能通过定位 top 50% margin-top:-自身高度的一半。给当前行内块+vertical-align:middle。margin-left:-自身宽度的一半。给行内块添加 text-align:center。给外部的块级+line-height：块级的高度。margin-top:-自身高度的一半。若父级没有定位，则绝对定位的盒子以文档为准。
复制链接

扫一扫