CSS盒子模型布局的应用

最新推荐文章于 2024-07-25 11:52:08 发布

wOVx..

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量177

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_43544863/article/details/117671917

版权

本次分享CSS盒子模型中浮动和定位的相关知识点和在web页面中的应用

一、css盒子模型的知识点归纳如下图所示

二、使用盒子模型设计一个简单的自适应网页

该例子我们一共使用三个div盒子进行设计，首先定义一个大盒子，然后在大盒子中嵌套三个小盒子，再在<style>标签中编写css样式，html源代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应布局</title>
    <style>
        .box{
           width: 100%;
           height: 100%;
           display: flex;
        }
        .box1{
            background-color: rgb(182,162,220);
            height: 100px;
            flex: 1;
        }
        .box2{
            background-color: rgb(158,226,172);
            height: 100px;
            flex: 1;
        }
        .box3{
            background-color: rgb(246,150,84);
            height: 100px;
            flex: 1;            
        }
    </style>
</head> 
<body>
    <div class="box">
        <div class="box1">第1个元素中的内容</div>
        <div class="box2">第2个元素中的内容</div>
        <div class="box3">第3个元素中的内容</div>
    </div>
</body>
</html>

通过浏览器打开文件查看结果如下图所示，页面的布局是可以自适应浏览器页面的缩放的