注意：这篇文章需要用到我们之前学过的CSS知识，如果忘記了的同学可以点击链接回顾之前所学过的知识 👉点我! 

先来看效果，学会这个小技巧，你也可以做出这种简单的页面。

一、盒子模型是什么？

CSS盒子模型是一种CSS的基本概念，它将网页上的所有元素视为一个个的盒子。每个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些部分共同决定了元素在页面上的布局和大小。

盒子中每个对象的尺寸与边框等样式表属性的关系如图所示。

二、实现效果

1.上半部分的实现

学习了CSS后，我们再也不用br和hr标签加粗和下划线文本了。在CSS的盒子模型里，可以使用

font-weight：bold | number | normal | lighter 属性设置字体的粗细（bold（表示加粗，相当于数字700）、number（可以写100-900的数字，将其分为九个等级，数字越小字体越细、数字越大字体越粗）、 normal（表示默认粗细，相当于数字400）、lighter（表示细体） ）

font-style：normal || italic || oblique 属性设置字体的倾斜（normal（表示默认）、italic （斜体）、 oblique（倾斜） ）

text-decoration：underline || blink || overline || line-decoration 属性修饰文本（underline（下划线）、 blink（闪烁） overline（上划线）、line-decoration（贯穿线））

首先，在<head>标签里定义好相对应盒子的CSS属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子属性的练习</title>
    <style>
        #container1 {
            /* 配置盒子的填充色 */
            background-color:gray ;
            /* 设置字体的粗细 */
            font-weight: bold;
            /* 配置盒子内容区的宽与高 */
            width: 600px;
            /* height: 5px; */
            /* 配置盒子的内边距 */
            padding: 3px;
            /* 配置盒子边框的颜色，厚度，线型 */
            border: green 3px solid ;
            /* 配置盒子的外边距 */
            margin-left: 10px;
            margin-top: 20px;
            margin-bottom: 30px;
        }
        #container2 {
            /* 配置盒子的填充色 */
            background-color:gray ;
            /* 设置字体的粗细 */
            /* font-weight: lighter; */
            /* 设置下划线 */
            text-decoration: underline;
            /* 配置盒子内容区的宽与高 */
            width: 630px;
            /* height: 5px; */
            /* 配置盒子的内边距 */
            padding: 3px;
            /* 配置盒子边框的颜色，厚度，线型 */
            border: rgb(0, 94, 255) 3px solid ;
            /* 配置盒子的外边距 */
            margin-left: 10px;
            margin-top: 40px;
            margin-bottom: 30px;
        }
</head>

接着，在<body>里，我们写一个DIV标签，因为DIV标签是独占一行的，所以就算你在里面写了很少的文字，在后边再添加一个div它会直接换行。这里定义一下ID和class，方便上面的CSS的编辑，在上面的代码区域里面写下面ID和class对应的名称，就可以定义相对应的属性。

<body>
    <div id="container1" class="content">
        这个练习禁止使用br和hr标签：加粗文本
    </div>
    <div id="container2" class="content">
        这个练习禁止使用br和hr标签：下划线文本
    </div>
</body>

2.下半部分的实现

首先，还是先在<head>标签里定义好相对应盒子的CSS属性。

padding为内边距（即图片中灰色边框的直径）、content为图片、border为边框（即图片中红色的线）和margin为外边距（即图片之间的距离）。

<body>
    <style>
        #img1{
            /* 配置盒子的填充色 */
            background-color:gray ;
            /* 配置盒子内容区的宽与高 */
            width: 100px;
            /* height: 5px; */
            /* 配置盒子边框的颜色，厚度，线型 */
            border: red 3px solid ;
            /* 配置盒子的内边距 */
            padding: 20px;
            /* 配置盒子的圆角边框 */
            border-radius: 20px;
        }
        #img2{
            /* 配置盒子的填充色 */
            background-color:gray ;
            /* 配置盒子内容区的宽与高 */
            width: 200px;
            /* height: 5px; */
            /* 配置盒子边框的颜色，厚度，线型 */
            border: red 3px solid ;
            /* 配置盒子的内边距 */
            padding: 20px;
            /* 配置盒子的圆角边框 */
            border-radius: 20px;
            /* 配置盒子的外边距 */
            margin: 20px;
        }
        #img3{
            /* 配置盒子的填充色 */
            background-color:gray ;
            /* 配置盒子内容区的宽与高 */
            width: 300px;
            /* height: 5px; */
            /* 配置盒子边框的颜色，厚度，线型 */
            border: red 3px solid ;
            /* 配置盒子的内边距 */
            padding: 20px;
            /* 配置盒子的圆角边框 */
            border-radius: 20px;
            /* 配置盒子的外边距 */
            margin: 20px;
        }
    </style>
</head>

接着就根据上面定义的ID分别插入3张图片,img1、img、img3。

<body>
    <img id="img1" src="./img_src/photo2.jpg" alt="">
    <img id="img2" src="./img_src/photo2.jpg" alt="">
    <img id="img3" src="./img_src/photo2.jpg" alt="">
</body>

三、总结

本文介绍了CSS盒子模型的基本概念和应用。盒子模型将网页元素视为由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的盒子。文章通过两个实例演示了盒子模型的应用：上半部分展示了如何使用CSS属性替代HTML标签实现文本加粗和下划线效果；下半部分演示了如何为图片设置不同尺寸、边框、内边距和圆角效果。通过定义不同的CSS样式，可以灵活控制元素的显示效果和布局。