盒子模型这么有趣，确定不来看看吗？
我结合课上笔记和网上查询的资料，列下下列大体知识点{
网页里的所有元素都可以看成一个矩形盒子，由内到外分为四层：
1. 内容区：放文字/图片的地方，用 width 和 height 设置大小（注意：行内元素默认不能直接设置宽高，需要加 display:block 转成块级）
2. 边框 border ：可以整体设置（宽度、样式、颜色），也能单独设置上/右/下/左四个边；CSS3 还新增了 border-radius 实现圆角边框
3. 内边距 padding ：内容和边框之间的留白
4. 外边距 margin ：盒子和其他盒子之间的距离，永远是透明的，不会被背景色影响
核心概念：文档流
就是网页元素默认的“排队规则”：
块元素：从上往下排
行内元素：从左往右排，写不下就换行
缺点：布局不灵活，容易出现高低不齐、文本空格折叠、元素间距异常等问题，解决办法就是脱离文档流
后续布局手段
思维导图里还提到了三种布局方式：
1. 传统布局1：盒子的定位
2. 传统布局2：盒子的 display 属性
3. 现代布局：Flex 弹性盒模型
}
接下来我将具体代码实现讲解：
1、这段代码是给 id="container1" 的元素设置CSS盒子模型样式，控制它的背景、圆角、透明度、大小、边距、边框等外观
#container1 { /* 配置盒子的填充色 */ background-color: aquamarine; /* 配置盒子的圆角边框 */ border-radius: 20px; /* 配置盒子的不透明度 */ opacity: 0.1; /* 配置盒子内容区的宽与高 */ width: 200px; height: 100px; /* 配置盒子的内边距 */ padding: 20px; /* 配置盒子边框的颜色，厚度，线型 */ border: red 5px solid ; /* 配置盒子的外边距 */ margin: 10px; }* background-color: aquamarine;给盒子设置背景色为海蓝色（aquamarine）（背景色会铺满「内容区+内边距」区域）
* border-radius: 20px;给盒子设置圆角边框，圆角半径为20px
*opacity: 0.1;设置盒子的整体不透明度，数值范围0~1，0是完全透明，1是完全不透明，0.1，意味着盒子几乎是透明的，只能隐约看到轮廓
*padding: 20px;设置盒子的内边距，也就是内容区和边框之间的距离，上下左右都是20px，盒子内部会多出一圈空白，让内容不会贴在边框上
*border: red 5px solid；给盒子设置边框，是简写形式，完整包含三个属性：
颜色：red（红色）
厚度：5px
线型：solid（实线）
* margin: 10px;设置盒子的外边距，也就是这个盒子和其他盒子之间的距离，上下左右都是10px
2、这段代码是给所有 class="content" 的元素设置CSS盒子模型样式，控制它的背景色、内容大小、内边距、边框和上外边距。
.content { /* 配置盒子的填充色 */ background-color: rosybrown; /* 配置盒子内容区的宽与高 */ width: 200px; height: 100px; /* 配置盒子的内边距 */ padding: 20px; /* 配置盒子边框的颜色，厚度，线型 */ border: blue 5px solid ; /* 配置盒子的外边距 */ margin-top: 40px; }*.content选择器，作用于所有class为 content 的元素。
*background-color: rosybrown;给盒子设置背景色为玫瑰棕色（rosybrown），背景会铺满「内容区 + 内边距」。
* width: 200px; / height: 100px;设置盒子内容区的宽高，也就是放文字/图片的核心区域大小。
* padding: 20px;设置盒子的内边距，上下左右都是20px，让内容和边框之间有空白。
*border: blue 5px solid;简写形式的边框属性，设置边框为：
颜色：blue（蓝色）
厚度：5px
线型：solid（实线）
*margin-top: 40px; 只设置盒子的上外边距为40px，让这个盒子和上方的元素拉开40px的距离。
结合以上知识点并加以完善，其效果图为：
小实验：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>盒子属性的练习</title> <style> /* 全局基础样式 */ body { padding: 20px; font-family: "微软雅黑", sans-serif; } /* 加粗文本样式 */ .text-bold { width: 600px; background-color: #c8a2c8; /* 紫色背景 */ border: 2px solid green; /* 绿色边框 */ padding: 5px; margin-bottom: 20px; font-weight: bold; /* 文本加粗 */ } /* 下划线文本样式 */ .text-underline { width: 600px; background-color: #c8a2c8; /* 紫色背景 */ border: 2px solid blue; /* 蓝色边框 */ padding: 5px; margin-bottom: 50px; text-decoration: underline; /* 文本下划线 */ } /* 校徽盒子通用样式 */ .logo-box { display: inline-block; padding: 15px; border: 3px solid red; /* 红色外边框 */ background-color: #c8a2c8; /* 紫色背景 */ border-radius: 10px 10px 30px 10px; /* 右上角圆角 */ margin-right: 30px; } /* 不同大小的校徽 */ .logo-box img { display: block; } .logo-small img { width: 80px; height: 80px; } .logo-medium img { width: 150px; height: 150px; } .logo-large img { width: 220px; height: 220px; } </style> </head> <body> <!-- 加粗文本部分 --> <div class="text-bold"> 这个课堂练习禁止使用br和hr标签:加粗文本 </div> <!-- 下划线文本部分 --> <div class="text-underline"> 这个课堂练习禁止使用br和hr标签:下划线文本 </div> <!-- 三个不同大小的校徽盒子 --> <div class="logo-box logo-small"> <img src="https://t1.chei.com.cn/common/xh/14760.jpg" alt="广东云浮中医药职业学院校徽"> </div> <div class="logo-box logo-medium"> <img src="https://t1.chei.com.cn/common/xh/14760.jpg" alt="广东云浮中医药职业学院校徽"> </div> <div class="logo-box logo-large"> <img src="https://t1.chei.com.cn/common/xh/14760.jpg" alt="广东云浮中医药职业学院校徽"> </div> </body> </html>其效果图为：
你也来试试吧！