我结合课上笔记和网上查询的资料列下下列大体知识点{网页里的所有元素都可以看成一个矩形盒子由内到外分为四层1. 内容区放文字/图片的地方用 width 和 height 设置大小注意行内元素默认不能直接设置宽高需要加 display:block 转成块级2. 边框 border 可以整体设置宽度、样式、颜色也能单独设置上/右/下/左四个边CSS3 还新增了 border-radius 实现圆角边框3. 内边距 padding 内容和边框之间的留白4. 外边距 margin 盒子和其他盒子之间的距离永远是透明的不会被背景色影响核心概念文档流就是网页元素默认的“排队规则”块元素从上往下排行内元素从左往右排写不下就换行缺点布局不灵活容易出现高低不齐、文本空格折叠、元素间距异常等问题解决办法就是脱离文档流后续布局手段思维导图里还提到了三种布局方式1. 传统布局1盒子的定位2. 传统布局2盒子的 display 属性3. 现代布局Flex 弹性盒模型}接下来我将具体代码实现讲解1、这段代码是给 idcontainer1 的元素设置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~10是完全透明1是完全不透明0.1意味着盒子几乎是透明的只能隐约看到轮廓*padding: 20px;设置盒子的内边距也就是内容区和边框之间的距离上下左右都是20px盒子内部会多出一圈空白让内容不会贴在边框上*border: red 5px solid给盒子设置边框是简写形式完整包含三个属性颜色red红色厚度5px线型solid实线* margin: 10px;设置盒子的外边距也就是这个盒子和其他盒子之间的距离上下左右都是10px2、这段代码是给所有 classcontent 的元素设置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 langzh-CN head meta charsetUTF-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 classtext-bold 这个课堂练习禁止使用br和hr标签:加粗文本 /div !-- 下划线文本部分 -- div classtext-underline 这个课堂练习禁止使用br和hr标签:下划线文本 /div !-- 三个不同大小的校徽盒子 -- div classlogo-box logo-small img srchttps://t1.chei.com.cn/common/xh/14760.jpg alt广东云浮中医药职业学院校徽 /div div classlogo-box logo-medium img srchttps://t1.chei.com.cn/common/xh/14760.jpg alt广东云浮中医药职业学院校徽 /div div classlogo-box logo-large img srchttps://t1.chei.com.cn/common/xh/14760.jpg alt广东云浮中医药职业学院校徽 /div /body /html其效果图为你也来试试吧