完成flex布局与float布局

最新推荐文章于 2024-11-11 09:45:18 发布

KylinZhang_0817

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量110

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/KylinZhang_0817/article/details/133810670

版权

float和flex在视觉上直观的区别就是：

flex布局的元素宽高和元素之间的间距是变化的，随着页面缩小，父类空白空间减少，元素能分配到的空间也减少，元素的间距也减少。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>less01</title>
</head>
<body>
    <body>
        <div class="menu">
            <div class="box">卡皮巴拉</div>
            <div class="box">水豚</div>
            <div class="box">capybara</div>
          </div>
    </body>
    <style>
        .menu{
            display: flex;
        }
        .box{
            flex: 1;
        }
    </style>
</body>
</html>

float元素宽高和元素之间的间距都是固定的，随着页面缩小，元素会换行。（可以设置为不换行）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>less01</title>
</head>
<body>
    <div class="container">
        <div class="box">卡皮巴拉</div>
        <div class="box">水豚</div>
        <div class="box">capybara</div>
      </div>
</body>
<style>
    .container {
        width: 100%;
    }
    .box {
        float: left;
        width: 33.33%;
    }
</style>
</body>
</html>