CSS盒模型详解

最新推荐文章于 2024-04-15 19:17:28 发布

布唉冻

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量196

点赞数 3

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_39114437/article/details/117535372

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

盒模型

盒模型：由内容（content）、内边距（补白,填充,padding）、边框（border）和外边界（margin）组成；如图：
在这里插入图片描述
淡蓝色部分auto x auto为内容

margin:外边距

只能设置距离值，且为顺时针方向作用
例：
margin:1px 3px;
表示：margin-top(上边距为1px) ；
margin-right(右边距为1px)；
margin-botton(下边距为1px) ；
margin-left(左边距为1px)；
代码：

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #F00;
            margin: 30px 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

结果图：
在这里插入图片描述

border：边框

可以设置边框的宽度、类型、颜色
例：
border:5px solid red;
表示：边框宽度：3px；
边框的线型为：solid(实线)；
颜色为：红色；
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(42, 219, 19);
            margin: 30px 50px;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

结果图：
在这里插入图片描述

padding：内边距

内容到边框的距离，只能设置距离****，顺时针方向作用，（与margin一样）
例：
padding: 10px;
代码：

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .Bigbox {
            width: 300px;
            height: 300px;
            background-color: rgb(70, 123, 238);
            padding: 10px;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(42, 219, 19);
        }
    </style>
</head>

<body>
    <div class="Bigbox">
        <div class="box"></div>
    </div>
</body>

</html>

在这里插入图片描述

content:内容

标签内套住的内容，如：<p>这是内容</p> 的汉字
代码：
结果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        p {
            background-color: rgb(92, 221, 221);
        }
    </style>
</head>

<body>
    <p>这是内容</p>
</body>

</html>