CSS3 浮动与定位

最新推荐文章于 2022-06-16 23:07:28 发布

苦涩2020

最新推荐文章于 2022-06-16 23:07:28 发布

阅读量230

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106129148

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

本文介绍了CSS3中的浮动特性，包括浮动的特点、如何清除浮动以及高度塌陷问题。接着讨论了定位，包括相对定位、绝对定位和固定定位的原理及应用场景，并解释了定位元素的层级管理。

摘要由CSDN通过智能技术生成

浮动

float:方向 让块级元素在一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动初始</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        ul{width: 300px; background: #ccc; margin: 20px auto;}
        li{width: 100px; height: 100px; float: left;}
        .a{background: red;}
        .b{background: green;}
        .c{background: blue;}
    </style>
</head>
<body>
    <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
    </ul>
</body>
</html>

浮动特点

浮动元素就像浮云一样浮起来了，浮动元素后面正常元素会自动补位
浮动元素会脱离正常的文档流，但没有完全脱离文档流
浮动元素会被父元素宽度所约束，所以浮动元素并没有完全脱离文档流
当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行
左浮动：元素会向左跑，会从上一行最右边出来继续往左跑，知道遇到有浮动属性的元素才会停止
右浮动：元素会向右跑，会从上一行最左边出来继续往右跑，知道遇到有浮动属性的元素才会停止
浮动元素会对它下面正常元素中的文字产生影响

清除浮动

规定元素哪一侧不能有浮动元素

clear:left; 元素左侧不能有浮动元素

clear:right; 元素右侧不能有浮动元素

clear:both; 元素左右两侧都不能有浮动元素

高度塌陷（清浮动）

由于父元素中的子元素设置了浮动属性，会造成父元素高度塌陷

防止高度塌陷

直接给父元素设置高度
在浮动元素内容之后加一个块级元素，设置左右两侧不能有浮动元素，就可以防止父元素高度塌陷
使用伪元素方法在浮动元素内容之后加一个空内容，转成块级元素。设置左右两侧不能有浮动元素
ul::after{ content: “”; display: block; clear: both; }
父元素设置有高度时，不用清浮动。父元素没有设置高度时，一定要清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        ul{width: 304px; border: 2px solid black; margin: 20px auto;}
        .a,.b,.c{width: 100px; height: 100px; float: left;}
        .a{background: red;}
        .b{background: green;}
        .c{background: blue;}
        /* .d{background: #ccc; clear: both;} */

        /* 防止高度塌陷方法2 */
        ul::after{
            content: "";
            display: table; /*默认是行内元素，所有要转换*/
            clear: both;
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <!-- <li class="d"></li>防止塌陷方法1 -->
    </ul>
</body>
</html>

定位

规定元素的位置，定位用于没有规律的元素而布局

定位的三种方式：relative相对定位、absolute绝对定位、固定定位

定位使用方法：

position:定位方式规定是哪一个定位方式
指定在方向上的偏移量：top bottom left right（top和bottom只有一个会生效，left和right也是只有一个会生效；left和top优先）

相对定位

指定相对定位后，元素就是一个定位元素，脱离文档流，但没有完全脱离文档流
相对定位元素脱离了文档流，但原来的位置还是保留
相对定位是相对于原来的位置进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        .box{
            width: 302px; height: 302; 
            border: 1px solid black; margin: 50px auto;
        }
        .pst1,.pst2,.pst3{width: 100px; height: 100px;}
        .pst1{background: red;}
        .pst2{
            background: green;
            position: relative;
            left: 50px; top: 70px;
            }
        .pst3{background: blue;}
    </style>
</head>
<body>
    <div class="box">
        <div class="pst1"></div>
        <div class="pst2"></div>
        <div class="pst3"></div>
    </div>
</body>
</html>

绝对定位

指定绝对定位后，元素就是一个定位元素，完全脱离文档流，原来的位置不会保留
绝对定位是相对于最近有定位属性的父元素进行定位
如果往上没找到有定位元素的父元素，才会相对于body元素进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        .bigBox{width: 500px; height: 500px; position: relative;
                margin: 10px auto; border: 1px solid red;}

        .box{
            width: 302px; height: 302;  margin: 50px auto;
            border: 1px solid black;
        }
        .pst1,.pst2,.pst3{width: 100px; height: 100px;}
        .pst1{background: red; }
        .pst2{
            background: green;
            position: absolute;
            left: 50px; top: 20px;
            }
        .pst3{background: blue;}
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="box">
            <div class="pst1"></div>
            <div class="pst2"></div>
            <div class="pst3"></div>
        </div>
    </div>
</body>
</html>

固定定位

指定固定定位后，元素就是一个定位元素，完全脱离文档流，原来的位置不会保留
父元素是否设置了定位属性并不影响固定定位
固定定位是相对于浏览器窗口进行定位；注意：不是相对于body元素进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        body{height: 2000px;}
        .bigBox{width: 500px; height: 500px; position: relative;
                margin: 10px auto; border: 1px solid red;}

        .box{
            width: 302px; height: 302;  margin: 50px auto;
            border: 1px solid black; position: relative;
        }
        .pst1,.pst2,.pst3{width: 100px; height: 100px;}
        .pst1{background: red; }
        .pst2{
            background: green;
            position: fixed;
            top: 50px; left: 100px;
        }   
        .pst3{background: blue;}
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="box">
            <div class="pst1"></div>
            <div class="pst2"></div>
            <div class="pst3"></div>
        </div>
    </div>
</body>
</html>

层级

z-index:数值

每一个定位元素会独占一层
改变层级来改变定位元素堆叠顺序
数值越大，层级越高，层级默认值为0
当层级一样，后写元素会盖住先写元素，后来居上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级</title>
    <link rel="stylesheet" href="../reset.css">
    <style type="text/css">
        .box{
            width: 302px; height: 302px; margin: 50px auto;
            border: 2px solid black; position: relative;
        }
        .pst1,.pst2,.pst3{width: 100px; height: 100px;}
        .pst1{
            background: red;
            position: absolute;
            left: 30px; top: 30px; 
            z-index: 9;
            }
        .pst2{
            background: green;
            position: absolute;
            left: 60px; top: 60px;
            z-index: 2;
            }
        .pst3{
            background: blue;
            position: absolute;
            left: 90px; top: 90px;
            z-index: 7;
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="pst1"></div>
        <div class="pst2"></div>
        <div class="pst3"></div>
    </div>
</body>
</html>