前端学习之css 定位与浮动

news2024/11/19 10:40:25

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位和浮动</title>
    <style>
        *{
            /* 将模块紧紧贴着浏览器边框 */
            margin: 0;
        }
        .c{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            border: 2px solid chocolate;
            /* 固定定位,位置固定 */
            position: fixed;
            /* 提供了设置位置的属性 */
            right: 50px;
            bottom: 50px;
        }
        .a{
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            /* 相对定位，参考原来的位置定位 */
            position: relative;
            top: 20px;
            left: 20px;
            /* 浮动 */
            float: left;
        }
        .b{
            background-color: blue;
            width: 100px;
            height: 100px;
            /*
             1、绝对定位
                父级元素有定位，则根据父级元素定位
                没有定位，则1根据body来定位，脱离文档流
             */
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
   
    <!-- 
        1、定位
            静态定位：static等价于无定位
            固定定位：fiexd固定一个值，用于锚链接，“回到顶部那个按钮”
            相对定位：relative
            绝对定位：absoult
     -->
     <div class="c">c</div>
     <div class="a">a
        <div class="b">b</div>
     </div>
</body>
</html>

结果

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /* 类似于display的行级变换  */
        .a{
            background-color: aqua;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="b">b</div>
    <div class="b">b</div>
    <div class="b">b</div>
    <div class="b">b</div>

</body>
</html>