CSS的浮动及定位

¤～空

已于 2024-07-28 10:29:01 修改

阅读量395

点赞数 5

分类专栏： CSS 文章标签： css 前端

于 2024-07-26 21:34:02 首次发布

本文链接：https://blog.csdn.net/weixin_59680226/article/details/140724331

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、浮动

1.浮动元素的可选值

--noon：不设置浮动，默认值

--left: 向左浮动；在同一父类中一般使用left设置浮动，根据设置浮动的前后，可以确定浮动元素在父类内容区的左侧，还是右侧。

--right: 向右浮动；

2.浮动的特点

1)、被设置了浮动的元素会脱离文档流，可以向左或向右浮动；

2)、浮动的元素不会超过父元素的边框，也就是浮动的元素一直在父元素的内容区里；

3)、元素被设置浮动之后，同一父类未设置浮动或定位的元素会自动上移；

注意：未设置浮动的元素若是块元素会被设置浮动的覆盖，行内元素不会

4)、兄弟元素之间，如果哥哥（默认谁在前面谁就是哥哥）没有设置浮动，那么就算弟弟设置浮动，也不会浮动到哥哥的左右；如果同时设置浮动，则最多一样高，不可能超过父元素边框。

5)、设置浮动的元素，不在强制满足

左右边框+左右内边距+左右外边距+内容区=父元素内容区成立

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动的特点</title>
    <style>
        #outer {
            width: 800px;
            height: 600px;           
            border: 0px solid red;
            background-color: aqua;
            margin: 0 auto;
        }

        .box1,
        .box2,
        .box3 {
            width: 200px;
            height: 200px;
        }

        .box1 {
            float: right;
            background-color: antiquewhite;
        }

        .box2 {
            float: left;
            background-color: blue;
        }

        .box3 {
            float: left;
            background-color: greenyellow;
        }
    </style>

</head>

<body >
    <div id="outer">
        <div class="box1">阿斯顿发送到发是否达到发送到发送到发送到发送到发生发大水发大水发大是大非</div>
        <span>我是一只小小小小鸟</span>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>

</html>

3.浮动对元素性质的影响

1)、对块元素的影响：

-设置了浮动的元素，之前设置的居中效果就失效了，后面设置的也不在生效；

-设置浮动的元素不会覆盖行内元素内容，会覆盖块元素内容；

2)、对行内元素的影响：

-行内元素设置浮动后，就不具备行内元素的特性（可以设置宽、高，不再是由内容决定）；

-行高属性设置的和height属性设置的一样时，可以使文字居中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* 默认的浮动的块元素的宽和高是被元素撑起来的，也可以自行设置 */
            /* width: 400px;
            height: 400px; */
            background-color: aqua;
            /* 因为设置浮动，所以居中失效 */
            margin: 0 auto;
            border: 0px solid red;
            height: 200px;width: 400px;
            float: left;
            /* 设置浮动后文字并没有被覆盖 */
        }
        span {
            /* 行内元素设置浮动后，就不具备行内元素的特性 */
            float: left;
            width: 600px;
            height: 50px;
            border: 1px solid red;
            /* 行高属性设置的和height属性设置一样时 可以使文字居中 */
            line-height: 50px
        }
    </style>
</head>
<body>
    <div class="box1">ui各一份田野调查</div>
    <p>凭立窗前望雪。雪花在天地间不急不慢地漫扬，雪花在玻璃外面如粉如绒，急的时候如白线，就如同流动的窗帘花，又像是瀑布，还似是幕布挂满窗帘，煞是好看。雪花在风的吹拂下，时而袅袅飞来，时而飘然而去，看着、看着，雪花不由得飘到了窗前，忽一阵风又把她招回去了。当你索性推开窗子，这时候有的雪花像是心有灵犀似的，真就探头探脑地进来了，与你来一次亲密接触；有的雪花探探头又缩回去了，这便更增添了望雪的兴致。乘着兴致你不妨走下楼去，仰头望向天空，沐浴在雪中，这种感受又不同了，这是雪对你最亲密地、频繁地接触，四周的雪花都会纷纷向你扑来，凉飕飕的雪花冷不丁地拍打在脸上、身上，感怀却在心里，此时的你定会感到幸福的。雪花的节奏时而明快、时而舒缓，时而不缓不疾，多么浪漫、多么惬意，沐浴在雪中，总会使人感慨万千，也总会令人心旷神怡。　　每日睁开眼，世界都是单调的一色，没有鸟鸣，没有温和，一颗心被紧紧地包裹在厚重的棉衣下，躯体时时刻刻都在寻求温暖的路上奔波。我们都在冬季寻求着温暖的慰藉，殊不知，最荒芜，最寒冷的莫过于心灵。心若有梦，又岂惧这寒冷的冬季。想想明朝大儒宋濂，从小家境贫寒，只能把别人的书借回来手自笔录，记日以还，然后再苦学。尤其读到他求学的过程时，每每让人感动落泪，大冬天，砚台都结了冰，手指都被冻的麻木了，他从来不敢懈怠。正是这种不畏寒冷，刻苦学习的精神，才使他观遍全书。成人之后，他又长途跋涉去外乡求学，负箧曳屣，行深山巨谷中，穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。我们的古人给我们留下着太多的财富，而我们却往往把这一切当作是不可能再实现的传说，眼观四周，人心浮躁的让人惊叹。</p>
    <div class="box2">asasasasasasasas</div>\
    <span>我是一只鹅</span>
</body>
</html>

4.高度坍塌问题

前提：父元素的所有子元素都设置了浮动

1)、解决方案：

a.设置父元素的高度 (违背了父元素让子元素撑起来的意愿；

b.设置父元素属性 overflow:hidden；

c.添加一个新的div，设置属性clear:both,消除浮动（缺点：代码冗余，又多了个没有用的div；

d.使用父元素的伪代码选择器解决

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #outer {
        border: 2px solid red;
        width: 600px;
        /* height: 600px; */
        margin: 0 auto;
        background-color: aqua;
        /* overflow: hidden; */
    }

    #outer::after {
        /* 在父元素的内容区的最后插入一个字符串，因为有文字
        应该会在环绕浮动的子元素周围 */
        content: "abc";
        /* 将不存在的这个伪元素设置成具有块元素的样式 */
        display: block;
        /* 清除伪元素两侧的浮动效果 */
        /* clear: both; */
    }
    //设置空的div消除浮动
    /* #kong {
        clear: both;
    } */

    #inner {
        border: 2px solid greenyellow;
        background-color: bisque;
        width: 300px;
        height: 300px;
        float: left;
        /* 设置了浮动效果，父元素的高度就不会被子元素的高度撑起来，出现了坍塌问题 */
    }
</style>

<body>
    <div id="outer">
        
        <div id="inner"></div>
        <div id = "kong"></div>
    </div>
</body>

</html>

二、定位

1.相对定位 position: relative

特点：

1.如果设置相对定位，没有偏移量，元素也是不会移动的，属性值

只是开启了元素的相对定位这一属性；

2.相对位置是相对于元素所在文档流的位置；

3.设置了相对位置的元素不会脱离文档流：

4.设置了相对位置的元素会提高自己的层级；

5.设置了相对位置的元素，元素本身的性质是不会改变的，

块元素依旧是块元素，行内元素依旧是行内元素。

偏移量：

注意！：垂直和水平方向个选一个就行

top：正值向下移动，负值向上移动；

buttom: 移动方向与top相反； top，bottom两者选一个即可

left: 正值向右移动，负值向左移动；

right：移动方向与相反。 left，right两者选一个即可

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位的演示</title>
    <style>
        .box1,
        .box2,
        .box3 {
            width: 300px;
            height: 300px;
        }

        .box1 {
            background-color: aqua;
        }

        .box2 {
            background-color: rgb(255, 0, 0);
            /* 开启相对位置， 相对他之前在文档流的位置 */
            position: relative;
            /* 设置偏移量 */
            top: 200px;
            left: 200px;
        }

        .box3 {
            background-color: rgb(5, 24, 241);
        }
    </style>
</head>

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

</html>

2.绝对定位 position: absolute;

特点： 1.与相对定位相同的是，不设置偏移量，元素是不会发生改变的；

2.与相对定位不同的是，设置绝对定位的元素是会脱离文档流的，如果下面的元素没有设置浮动或者绝对定位的话，元素会自动上移；

3.绝对定位的偏移量是相对于，设置了绝对定位的元素，所在包含块决定的；

4.与相对定位相同的是，设置绝对定位的元素会提高自己的层级；

5.与相对定位不同的是，设置了绝对定位的元素的性质会发生改变；

偏移量见相对定位；

包含块：如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。如果所有的祖先块元素都没有设置定位，那么就是相对HTML这个根元素来说的

建议：包含块尽量设置相对定位，应为绝对定位会脱离文档流简言之：最近的设置了相对定位的祖先块称之为包含块。

HTML：是所有元素的初始包含块。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位的学习：</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .box1,.box3,.box4 {
            width: 400px;
            height: 400px;
        }
        .box3 {
            width: 500px;
            height: 500px;
        }
        .box1 {
            background-color: aqua;
            /* position: absolute; */
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 开启绝对定位，相对的是包含块 ，
            包含块必须开启相对定位*/
            /* position: absolute; */
            left: 100px;
            top: -300px;
        }
        .box3 {
            background-color: blanchedalmond;
        }
        .box4 {
            background-color: blueviolet;
            /* 因为box2想要相对box4进行绝对定位 
            box4 要开启相对定位*/
            position: absolute;
        }
        .box5 {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box4">
         <div class="box5">
            <div class="box2"></div>
            <span>大盒套小盒</span>
         </div>
    </div>
    <div class="box3"></div>
</body>
</html>

3.固定定位 position: fixed;

特点： 1.固定定位也是绝对定位的一种，特点与普通绝对定位差不多；

2.固定定位是相对于当前浏览器的视口(viewport)来说的

因此固定定位的元素不会随着滚动条滚动。

3.比较适合广告位。

代码示例：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位的学习</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;           
            background-color: blueviolet;
            
            position: absolute;
            left: 100px;
            top: 100px;
        }
        .box2{
            width: 200px;
            height: 2000px;
            background-color:brown;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color:chartreuse;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

4.粘滞定位 position: sticy;

特点： 1.粘滞定位的特点与相对定位差不多；

2.不同的是，设置偏移量后，会到达那一位置后，不在移动；

3.粘滞定位的范围不能超出父元素的范围，否则粘滞效果消失；

代码示例：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘滞定位的学习：</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:brown;
            float: left;
            position:sticky;
            /* 当元素移动到距离视口顶端50px时，则被粘住，不动*/
            top: 50px;  
             /* 当元素移动到距离视口左边100px时，则被粘住，不动*/
            left: 100px;  
            overflow: hidden;     
        }
        .box3{
            width: 2000px;
            height: 2000px;
            background-color:chartreuse;
        }
        .box11 {
            width: 200px;
            height: 200px;
            float: left;
            background-color: blueviolet;
        }
        body {
            width: 2000px;

        }
    </style>
</head>
<body>
    <div class="box1"></div>   
    <div class="box11"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

5.z-index属性

属性: z-index 是用来设置定位元素的层级的。值越大，层级越高

兄弟元素： z-index的值越大，层级越高，值相等时弟弟元素会覆盖在哥哥元素上。

父子元素：父元素的z-index的值再大，

也不会覆盖子元素(也不会高过子元素的层级)

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index属性测试</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
         .box1{
             width: 200px;
             height: 200px;
             background-color: black;
             position: absolute;
             z-index: 2;
             
         }

         .box2{
             width: 200px;
             height: 200px;
             background-color:pink;
             position: absolute;
             left:50px;
             top: 50px;
             z-index: 2;
         }

         .box3{
             width: 100px;
             height: 100px;
             background-color:blue;
             position: absolute;
             left: 100px;
             top:100px;
             z-index: 1;
         }

    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2">
                <div class="box3"></div>
        </div>
</body>
</html>