小白也能学会的盒模型基础！！！
代码
<!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型基础</title> <style> #text1{ border: rgb(20, 104, 41) solid 4px; background-color: rgb(113, 115, 115); width: 500px; margin-top:30px ; } #text2{ border: rgb(42, 32, 179) solid 4px; background-color: rgb(113, 115, 115); width: 550px; margin-top:30px ; padding-left: 20px; } .body{ display: flex; gap: 20px; } #text3{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 80px; height: 80px; padding:20px ; margin-top: 350px; margin-left: 10px; border-radius: 10px; display:flex; } #text4{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 150px; height: 150px; display: flex; margin-top: 280px; padding:20px ; border-radius: 10px 40px 10px 10px; } #text4 img{ border-radius:0px 30px 0px 0px; max-width: 100%; max-height: 100%; display: block; } #text5{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 300px; height: 300px; display: flex; margin-top: 130px; padding:20px ; border-radius: 70px 10px 70px 10px; } #text5 img{ border-radius:70px 0px 70px 0px; max-width: 100%; max-height: 100%; display: block; } </style> </head> <body> <div id="text1"><b>这个课堂练习禁止使用br和hr标签：加粗文本</b></div> <div id="text2"><u>这个课堂练习禁止使用br和hr标签：下划线文本</u></div> <div class="body"> <div id="text3"><img src="E:/前端/img_src/photo2.jpg"></div> <div id="text4"><img src="E:/前端/img_src/photo2.jpg"></div> <div id="text5" ><img src="E:/前端/img_src/photo2.jpg"></div> </div> </body> </html>效果图