CSS学习笔记 04、浮动与定位（下）

举报
长路 发表于 2022/11/28 20:36:32 2022/11/28
【摘要】 文章目录前言一、浮动1.1.1、浮动的基本概念1.1.2、浮动的顺序贴靠特性1.1.3、右浮动效果1.1.4、案例：使用浮动设计网页布局(分析及源码)1.1.5、BFC规范与浏览器差异认识overflow属性介绍overflow属性介绍hiddle值认识BFC原则(包含没有形成该原则案例)解决盒子没有形成BFC情况(4种)BFC的其他作用(解决另外两个问题：①margin塌陷；②元素浮动覆盖)浏览

二、定位

2.1、相对定位

介绍相对定位

相对定位(relavtive postion)：盒子可以相对自己原来的位置进行位置调整，称为相对定位。

语法：

postion: relative
top: ??
bottom: ??

具有四个位置：left、right、top、bottom；其中的值可以为负数，即往规定方向相反移动。

性质：相对定位的元素，会在"老家留坑"，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成"影子"，不会对页面其他元素产生任何影响。(不脱离标准流，能够进行覆盖其他的元素)

用途：①经常用下进行微调元素位置，实际上原本的位置不会改变的，只不过效果展示的会根据指定位置调节，不会影响其他元素位置。

②相对定位的盒子，可以当做是绝对定位的参考盒子。

image-20210601154722248


案例1：简单展示相对定位

添加相对定位前：

image-20210601160714473

添加相对定位后：

image-20210601160829085

代码如下：

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .box1 {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
        margin: 0 auto;
    }

    .box2 {
        height: 50px;
        width: 50px;
        background-color: red;
        /* 设置相对定位(实际原来的位置部分不改变，效果进行改变) */
        position: relative;
        top: 55px;
        left: 30px;
        border-radius: 30px;
    }

    ul {
        list-style: none;
    }

    li:nth-child(2) {
        color: red;
    }
</style>

<body>
    <div class="box1">
        <div class="box2">
        </div>
        <ul>
            <li>长路</li>
            <li>❤</li>
            <li>林儿</li>
        </ul>
    </div>
</body>

案例2：实际应用到导航栏微调(hover效果微调)

实际效果展示

微调前效果：你可以看到每个链接触发时上边框就会触发并且将原本的内容顶到框外边去。

GIF

微调后效果：即在触发样式时将这个边框效果向上移边框高度，实际链接内容并没有被挤出去了

GIF

核心代码：设置hover事件的相对定位

/* 鼠标移动时触发的效果 */
div.box ul li a:hover {
    background-color: #00ac97;
    border-top: 5px solid gold;
    /* 设置相对定位为原本位置的上面5px */
    position: relative;
    top: -5px;
}

源代码

<style>
    * {
        font-weight: bold;
        color: black;
        padding: 0px;
        margin: 0px;
    }

    div {
        height: 35px;
        width: 720px;
        margin: 20px auto;
        border: 1px solid #000;
    }

    div.box ul {
        list-style-type: none;
    }

    /* 设置每个li属性 */
    div.box ul li {
        float: left;
    }

    div.box ul li a {
        text-decoration: none;
        width: 120px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        /* 将a标签设置为块元素，此时才能够作用到整个宽高 */
        display: block;
    }

    /* 鼠标移动时触发的效果 */
    div.box ul li a:hover {
        background-color: #00ac97;
        border-top: 5px solid gold;
        /* 设置相对定位为原本位置的上面5px */
        position: relative;
        top: -5px;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li><a href="#">网站首页</a></li>
            <li><a href="#">新闻中心</a></li>
            <li><a href="#">学校概况</a></li>
            <li><a href="#">院校设置</a></li>
            <li><a href="#">招生就业</a></li>
            <li><a href="#">校园生活</a></li>
        </ul>
    </div>
</body>

2.2、绝对定位

介绍绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。

位置描述：left、top、right、bottom。

重点：绝对定位脱离标准文档流。意味它将释放自己的位置，对其他元素不会产生任何的干扰，而是对他们进行压盖。

绝对定位的参考盒子：绝对定位的盒子并不是永远以浏览器作为基准点，绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子当做基准点。这个盒子通常是相对定位的，所以这个性质也叫做"子绝父相"。

用途：用来制作"压盖"、“遮罩的效果”，可以用来结合css精灵来使用，并且能够结合js来实现动画。

image-20210601165556382


案例1：绝对定位示例

两个重点：

  1. 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子当做基准点。(关键点是祖先节点)
  2. 脱离文档流，进行绝对定位之后不会对其他元素造成影响。

祖先节点无定位属性情况

若是祖先节点中无任何节点有定位属性，就会依据body整个页面来进行绝对定位。

image-20210601172718195


祖先节点有定位属性情况

设置绝对定位的属性永远会跟着祖先节点中的定位属性来移动位置：

image-20210601172839567

image-20210601172855147

源码：

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    /* 这三个祖先盒子都能够来进行设置定位属性来测试，一般定位属性设置为relative */
    div.box1 {
        width: 600px;
        height: 600px;
        border: 1px solid #000;
        margin: 20px auto;
        position: relative;
    }

    div.box2 {
        width: 450px;
        height: 450px;
        border: 1px solid #000;
        margin: 75px 75px;
    }

    div.box3 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 125px 125px;

    }

    p {
        width: 50px;
        height: 50px;
        background-color: orange;
        /* 设置绝对定位 */
        position: absolute;
        top: 0;
        left: 0;
    }
</style>


<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <p></p>
            </div>
        </div>
    </div>
</body>

案例2：绝对定位实现水平垂直居中

绝对定位来达到垂直居中是一个非常使用的技术

position: absolute
top: 50%
margin-top: -自己高度的一半

说明：top50%我们知道就是占父盒子的50%高度嘛，那这个margin-top为什么是负的自己高度一半，看下面例子：

image-20210601173804769

此时我们将margin-top添上：

image-20210601173943020

垂直居中效果：

image-20210601173957575

既然垂直居中做到了，那么水平居中也就很容易了一样的方法，下面给出水平垂直的核心代码：

div.box1 {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px auto;
    /* 1、设置定位属性(作为绝对定位的基准点) */
    position: relative;
}

div.box2 {
    width: 50px;
    height: 50px;
    background-color: red;
    /* 2、设置绝对定位 */
    position: absolute;
    /* 垂直居中 */
    top: 50%;
    margin-top: -25px;
    /* 水平居中 */
    left: 50%;
    margin-left: -25px;
}

image-20210601174157178


堆叠顺序index属性

z-index属性：是一个没有单位的正整数，数值大的能够压住数值小的。

两种方式来修改堆叠顺序

①不设置z-index属性会依据写标签的顺序来进行压盖。

两个div盒子都设置绝对定位时，会脱离文档流，后写的盒子就会压盖主前面的div盒子，依照标签顺序。若是想蓝色盒子被红色盒子压盖只需要先写蓝色盒子标签后写红色盒子标签即可。

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    div.box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: red;
        /* 设置绝对定位 */
        position: absolute;
        top: 150px;
        left: 150px;
    }

    div.box2 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: blue;
        /* 设置绝对定位 */
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

image-20210601175900064


②一般来设置999或者9999，后面的大于前面的

使用z-index属性即可实现压盖效果，想要实现红色盒子压盖蓝色盒子呢？在上面的设置z-index更大即可

image-20210601180059248

效果：

image-20210601180114964


案例3：轮播图实际案例(使用绝对定位)

案例说明：通过使用绝对定位来实现的左右按钮的位置以及下面的小按钮组中四个小按钮的实现，并且能够触碰时有黄色效果

GIF

结构如下：

<body>
    <div class="sideshow">
        <img src="./123456.jpg" alt="">
        <a href="#" class="rightbtn btn">&gt;</a>
        <a href="#" class="leftbtn btn">&lt;</a>
        <div class="points">
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</body>

分析：

div.sideshow：设置相对定位，来为下面的a、按钮组来作为基准点

  • img：展示的图片。
  • a：使用绝对定位，相对靠左。
  • a：使用绝对定位，相对靠右
  • div.points：使用绝对定位，实现在图片的底部中央。

说明：对于左右按钮，在前端中实际也可以进行抽离重复的部分如btn样式，在这个样式中定义了高宽，绝对定位，背景颜色，圆框这类重复的元素，通过rightbtn，leftbtn样式可以设置绝对定位的左右位置。

小提示(tips)：

  1. 实际开发中不建议去掉href属性，而是建议设置href="#"或者设置href=“javascript:;”，禁止链接刷新或跳转。
  2. 设置绝对定位是可以设置宽度与高度的。(可以将其看做是块元素进行设置宽高以及位置)。

css源代码：

<style>
* {
    padding: 0px;
    margin: 0px;
}

/* 外部图片居中 */
div.sideshow {
    width: 550px;
    /* 高度溢出 */
    overflow: hidden;
    margin: 0 auto;
    /* 设置相对定位：作为绝对定位的基础点 */
    position: relative;
}

/* 设置图片大小 */
img {
    width: 550px;
    height: 300px;
}

/* 去除掉超链接的下划线 */
div.sideshow a {
    text-decoration: none;
}

/* 两个按钮的css样式 */
/* 设置按钮 */
.btn {
    /* 绝对定位能够设置宽高 */
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgb(255, 255, 255, .5);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
}

/* 左按钮 */
.leftbtn {
    left: 10px;
    /* 垂直居中 */
    top: 50%;
    margin-top: -15px;
}

/* 右按钮 */
.rightbtn {
    right: 10px;
    /* 垂直居中 */
    top: 50%;
    margin-top: -15px;
}


/* 小圆点的css样式 */
/* 小圆点按钮组 */
div.sideshow div.points {
    width: 90px;
    height: 15px;
    /* background-color: gold; */
    /* 绝对定位：设置底部20px，垂直居中 */
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -45px;
    /* border: 1px solid #000; */
}

/* 去除掉ul列表的样式 */
div.sideshow div.points ul {
    list-style: none;
    text-align: center;
}

/* 设置li的属性 */
div.sideshow div.points ul li a {
    /* 左悬浮 */
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 12.5px;
    background-color: rgb(255, 255, 255, .5);
    line-height: 25px;
    margin-right: 10px;
}

/* 最后一个小圆点的右外边距为0px */
div.sideshow div.points ul li:nth-child(4) a {
    margin-right: 0px;
}

/* 设置小圆点触碰时为黄色 */
div.sideshow div.points ul li a:hover {
    background-color: gold;
}

/* 默认第2个小圆点是黄色 */
div.sideshow div.points ul li:nth-child(2) a {
    background-color: gold;
}
</style>

2.3、固定定位

介绍

含义：不管页面如何卷动，它永远固定在那里。永远以浏览器为参考固定在那里。

语法：postion:fixed

注意点：固定定位只能以页面为参考点，没有子固父相这个性质，固定定位脱离标准文档流。

用途：返回顶部，楼层导航。


示例

可以看到无论你屏幕如何滚动，右下角的盒子都不会移动，一直固定着。

GIF

源码：

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    img {
        width: 800px;
        height: 400px;
    }

    /* 盒子进行固定定位 */
    .box {
        height: 100px;
        width: 100px;
        position: fixed;
        bottom: 30px;
        right: 30px;
        background-color: orange;
    }
</style>

<body>
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <img src="./123456.jpg" alt="">
    <div class="box">
    </div>
</body>

脱离文档流的三种方法

脱离文档流概念：意味它将释放自己的位置，对其他元素不会产生任何的干扰，而是对他们进行压盖。

浮动、绝对定位与固定定位

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入