CSS基础学习（3）——浮动和定位

最新推荐文章于 2024-07-26 21:34:02 发布

换元不配限

最新推荐文章于 2024-07-26 21:34:02 发布

阅读量799

点赞数 1

分类专栏： web前端文章标签： css 学习 css3 浮动布局定位布局

本文链接：https://blog.youkuaiyun.com/ITMonkeyKing/article/details/128967765

版权

web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS中的浮动布局和定位布局，包括浮动属性float如何让元素脱离文档流，实现多元素同行；清除浮动clear的万能公式；定位方式如相对定位、绝对定位和固定定位的用法，以及层叠顺序z-index的设定，帮助理解CSS布局原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【往期文章】

1. 浮动和定位特点

除了盒模型布局，还有浮动布局和定位布局。

浮动布局中，元素可以脱离文档流，实现将多个块元素同处一行的效果。
定位布局可以实现元素嵌套，实现多个元素堆叠展示，指定元素相对于自身或父元素出现指定位置。

1.1 浮动属性float

元素设置浮动属性后，元素特点会发生变化。

块元素特点是，默认宽度和高度都由内容撑开，不再独占一行。
内联元素特点是，变为块元素，支持宽和高属性。
浮动元素不会覆盖内联元素，可以利用该特性实现文字环绕效果。

//语法
float:属性值

//示例
float:left|right|none

完整代码示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            border: 6px solid #EC8C32;

        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #AAB6E0;
            margin: 10px;
            font-size: 22px;
            color: #ffffff;
            line-height: 100px;
            text-align: center;
            /* float: left; */
            float: right;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
    
</body>
</html>

1.2 清除浮动clear

clear属性规定元素的某个方向上不允许出现其他浮动元素。

clear:none|left|right|both;

1.2.1 清除浮动万能公式

    .clearfix::after{
        display: block;
        content:"";
        clear:both;
    }

2. 定位方式

定位属性position可以控制元素的位置，可以指定元素的堆叠顺序，包括相对定位、绝对定位和固定定位。

使用position来指定定位语法如下：

position:static|absolute|fixed|relative;

值	描述
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
relative	生成相对定位的元素，相对于其正常位置进行定位
static	默认值

【说明】
absolute绝对定位需要同时使用left、right、top和bottom等元素位置属性。

2.1 相对定位

position:relative;

完整示例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 3px solid #916B84;
        }
        .son{
            width: 98px;
            height: 98px;
            background-color: #EBCD51;
            text-align: center;
            line-height: 98px;
            font-size: 20px;
            color: #916B84;
            border: 1px solid #916B84;
        }
        /* 使用相对定位属性，第二个div左偏移100，上方偏移0，此时元素右移动100px */
        .son:nth-of-type(2){
            position: relative;
            left: 100px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
    
</body>
</html>

【说明】
CSS3 :nth-of-type(n) 选择器。规定属于其父元素的特定类型的第n个子元素的每个元素。
详情可以参阅【W3School】

2.2 绝对定位

position:absolute;

绝对定位使元素完全脱离文档流
相对定位元素一般都是配合绝对定位元素
相对于最近的定位父级发生偏移–没有定位父级相当于document发生偏移
提升元素的层级

完整示例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 3px solid #916B84;
            /* 给父级增加相对定位属性，使其成为定位父级 */
            position: relative;
        }
        .son{
            width: 98px;
            height: 98px;
            background-color: #EBCD51;
            text-align: center;
            line-height: 98px;
            font-size: 20px;
            color: #916B84;
            border: 1px solid #916B84;
        }
        .son:nth-of-type(2){
            /* 第二个子元素设置绝对定位，左偏移量100，相对于父级向右移动100px */
            position: absolute;
            left: 100px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>
    
</body>
</html>

2.3 固定定位

position:fixed;

固定定位属于绝对定位一种，但永远参照浏览器的视口进行定位
固定定位元素不会随网页滚动

关键代码示例：

     <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
         /* 省略相同代码，请参考上面绝对定位示例 */
        .son:nth-of-type(2){
            /* 第二个子元素设置固定定位，左偏移量100，相对于父级向右移动100px */
            position: fixed;
            left: 100px;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- 省略相同代码，请参考上面绝对定位示例 -->
</body>
</html>

2.4 层叠顺序z-index

层叠顺序可以设置层的先后顺序和覆盖关系。默认值z-index=auto。

z-index:auto | 数字

完整示例代码如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            border: 3px solid grey;
            position: relative;
            width: 300px;
            height: 200px;
        }
        p{
            width: 100%;
            font-size: 22px;
            color: #ffffff;
            text-align: center;
            font-family: "微软雅黑";
            height: 30px;
            line-height: 30px;
            position: absolute;
            top: 20px;
             /* 使用z-index属性提高文字层级--文字显示在图片上面 */
            z-index: 2;
        }
        img{
            position: absolute;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>微阳下乔木</p>
        <img src="img/sunset.jpg" alt="落日">
    </div>
    
</body>
</html>