JavaWeb8.5【CSS属性、盒子模型】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css属性</title> 6 7 <style> 8 p{ 9 color: red; 10 font-size: 30px; 11 text-align: center; 12 line-height: 100px; 13 /*边框*/ 14 border: 1px solid red; 15 } 16 17 div{ 18 border: 1px solid blue; 19 height: 200px; 20 width: 200px; 21 22 background: url("../img/logo.jpg") no-repeat center; 23 } 24 </style> 25 </head> 26 <body> 27 28 <p>传智播客</p> 29 <div>ITer</div> 30 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css属性-盒子模型</title> 6 7 <style> 8 div{ 9 border: 1px solid blue; 10 width: 100px; 11 } 12 13 .div1{ 14 width: 100px; 15 height: 100px; 16 17 /*通过设置内盒子的四周外边距让其居于大盒子的中间*/ 18 /*margin: 50px;*/ 19 } 20 .div2{ 21 width: 200px; 22 height: 200px; 23 24 /*margin-left: 300px;*/ 25 margin-bottom: 20px; 26 27 /*通过设置大盒子的内边距让小盒子居于中间*/ 28 padding: 50px; 29 /*设置大盒子的属性，让之前设置的宽和高就是最终大盒子的大小；不设置的话有padding的时候大盒子大小会变化*/ 30 box-sizing: border-box; 31 } 32 33 .div3{ 34 float: left; 35 } 36 .div4{ 37 float: left; 38 } 39 .div5{ 40 float: right; 41 } 42 </style> 43 </head> 44 <body> 45 46 <div class="div2"> 47 <div class="div1"></div> 48 </div> 49 50 <div class="div3">aaaa</div> 51 <div class="div4">bbbbb</div> 52 <div class="div5">cccc</div> 53 54 </body> 55 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！