CSS3:box-sizing 怪异盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" href="style/box.css"> </head> <body> 标准盒模型 <hr /> <div class="bag"> <div class="shoes_box"> <div class="shoes"> 鞋子 </div> </div> </div> 怪异盒模型 <hr /> <div class="bag1"> <div class="shoes_box1"> <div class="shoes1"> 鞋子 </div> </div> </div> </body> </html>
/*盒子模型*/ .shoes{ width: 100px; height: 100px; background: #F69A0B; text-align: center;line-height: 100px; color: #fff; } .shoes_box{ padding: 10px; width: 100px; height: 100px; background: #FE6403; border: 5px solid #02C3F5; } .bag{ width: 130px; height: 130px; margin:100px; } /*怪异盒模型*/ .shoes1{ width: 100px; height: 100px; background: #F69A0B; text-align: center;line-height: 100px; color: #fff; } .shoes_box1{ padding: 10px; width: 130px; height: 130px; background: #FE6403; border: 5px solid #02C3F5; box-sizing:border-box; } .bag1{ width: 130px; height: 130px; margin:100px; }
2024还活着,挺好的,向着星辰与深渊,加油,博客园不要倒下啊!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)