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

最新推荐文章于 2023-09-18 17:32:45 发布

换元不配限

最新推荐文章于 2023-09-18 17:32:45 发布

阅读量707

点赞数 1

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

本文链接：https://blog.csdn.net/ITMonkeyKing/article/details/128967765

版权

【往期文章】

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