css-浮动

最新推荐文章于 2024-04-08 20:02:50 发布

qq_32476533

最新推荐文章于 2024-04-08 20:02:50 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/qq_32476533/article/details/105575832

版权

浮动之-----浮（注意看代码以及效果区别）

 <style>
        /* 第一个盒子浮上来，第二个盒子顶在第一个盒子原来得位置 */
        .nav {
            float: left;
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .nb {
            /* float: left; */
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>

在这里插入图片描述

<!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>
        .nav {
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .nb {
            float: left;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="nb"></div>
</body>
</html>

在这里插入图片描述

<!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>
        /* 特：加了float后变成行内块元素，所以是并排排列，且没缝隙，特性改变 */
        .nav {
            float: left;
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .nb {
            float: left;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="nb"></div>
</body>
</html>

在这里插入图片描述

qq_32476533

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-浮动

浮动之-----浮（注意看代码以及效果区别） <style> /* 第一个盒子浮上来，第二个盒子顶在第一个盒子原来得位置 */ .nav { float: left; width: 400px; height: 400px; background-color...
复制链接

扫一扫