文档流概念:HTML网页文档默认的元素摆放机制1.块元素的文档流自上而下流水线摆放2.行内元素的文档流以左到右流水线摆放注意类似我们的书写方式从左到右从上到下写不下就换行文档流也可以理解为一个“排队流”。缺陷元素摆放布局非常不灵活出现元素间高低不平比如img底边对齐但顶边却不对齐)文本空格默认折叠元素间默认空隙过小的现象。盒子文本属性1.使用CSS给文本加粗以及下划线配置盒子的填充色 background-color 配置盒子的不透明度opacity配置盒子内容区的宽与高 widthheight单位px配置盒子边框的颜色厚度线型border: [ ] ( )px solid ;字体内容加粗:font-weight:bold;下划线文本:text-decoration: underline;配置盒子的外边距:margin-top: [ ]px;2.注意这些词语最后一定要加分号【 】为了更直观的分辨边距的问题我把一张图片放在下面以供参考由上面内容可得head style #A1{ /* 配置盒子的填充色 */ background-color:darkgrey; /* 配置盒子的不透明度 */ opacity: 0.8; /* 配置盒子内容区的宽与高 */ width: 400px; height: 20px; /* 配置盒子边框的颜色厚度线型 */ border: green 5px solid ; /* 字体内容加粗 */ font-weight:bold; } #A2{ /* 配置盒子的填充色 */ background-color:darkgrey; /* 配置盒子的不透明度 */ opacity: 0.8; /* 配置盒子内容区的宽与高 */ width: 600px; height: 25px; /* 配置盒子边框的颜色厚度线型 */ border: blue 5px solid ; /* 下划线文本 */ text-decoration: underline; /* 配置盒子的外边距 */ margin-top: 20px; } /style /head body div idA1 这个课堂练习禁止使用br和hr标签:加粗文本 /div div idA2 这个课堂练习禁止使用br和hr标签:下划线文本 /div /body运行代码如下盒子图像属性1.使用CSS在盒子中插入图片的常用语句配置盒子的填充色 background-color 配置盒子的不透明度opacity配置盒子内容区的宽与高 widthheight单位px配置盒子边框的颜色厚度线型border: [ ] ( )px solid ;配置盒子的外边距:margin-top: [ ]px;border-radius: 【】px 【】px 【】px 【】px;依次对应的角为左上角/右上角/右下角/左下角2.注意1.这些词语最后也一定要加分号【 】2..B2 img{width: 100%;height: 100%;}的目的是使照片完全展现出来没有被裁减或者被挤出盒子根据上面的内容我们可以得出下面的代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title盒子模型 2/title style .B2{ /* 配置盒子的填充色 */ background-color:darkgrey; /* 配置盒子的不透明度 */ opacity: 0.8; /* 配置盒子边框的颜色厚度线型 */ border: red 5px solid ; /* 配置盒子的内边距 */ padding: 20px; /* 配置盒子的外边距 */ margin-top: 30px; /* 水平摆放 */ display: inline-block; } #A3{ /* 配置盒子内容区的宽与高 */ width: 80px; height: 80px; } #A4{ /* 配置盒子内容区的宽与高 */ width: 150px; height: 150px; /* 右上角圆角 */ border-radius: 10px 50px 10px 10px; } #A5{ /* 配置盒子内容区的宽与高 */ width: 250px; height: 250px; /* 左下圆角 右上角圆角 */ border-radius: 10px 50px 10px 50px; } .B2 img{ width: 100%; height: 100%; } /style /head body div idA3 classB2 img src./zuoye/史迪奇弹琴.webp alt /div div idA4 classB2 img src./zuoye/史迪奇弹琴.webp alt /div div idA5 classB2 img src./zuoye/史迪奇弹琴.webp alt /div /body /html运行结果如下图所示