尚硅谷 3.6 CSS盒子模型

小昔超厉害

于 2024-07-06 21:44:13 发布

阅读量251

点赞数 6

分类专栏：未分类文章标签： css 前端

本文链接：https://blog.csdn.net/zjj8008120308/article/details/140236005

版权

未分类专栏收录该内容

14 篇文章 0 订阅

订阅专栏

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:边距(margin)，边框(border)，填充(padding)，和实际内容(content)。

在这里插入图片描述

Margin(外边距)-清除边框外的区域，外边距是透明的，
Border(边框)-围绕在内边距和内容外的边框;
Padding(内边距)-清除内容周围的区域，内边距是透明的-不会占用Content区域，若设置了值，会往外挤，但还在Border内
Content(内容)-盒子的内容，显示文本和图像;

在这里插入图片描述

代码

下面展示一些 内联代码片。

 <head>
        <meta charset="UTF-8">
       <style>
        .outerDiv {
            width: 800px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            /* margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px; */
            margin: 10px 20px 30px 40px;
           
        }
        .d1{
            background-color: greenyellow;
            /* padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px; */
            padding: 10px 20px 30px 40px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
       </style>
    </head>
    <body>
       <div class="outerDiv">
            <div class="innerDiv d1">框1</div>
            <div class="innerDiv d2">框2</div>
            <div class="innerDiv d3">框3</div>
       </div> 
    </body>

效果

在这里插入图片描述
在浏览器上,通过F12工具查看盒子模型状态