CSS总结(三)—— 盒子模型(标准/IE下)
若盒子模型中的margin:20px,padding:10px,border:1px,content宽:200px,content高:50px.
在标准W3C盒模型中:
盒子占据位置:宽:20*2+10*2+1*2+200 = 262px;
高:20*2+10*2+1*2+50 = 112px;
盒子实际大小:宽:1*2+10*2+200 = 222px;
高:1*2+10*2+50 = 72px;
在IE盒模型中:
盒子占据位置:宽:20*2 + 200 = 240px;
高:20*2 + 50 = 90px;
盒子实际大小:宽:200px;
高:50px;
★ 标准盒模型中包含margin,padding,border,content,并且content部分不包含其他部分;而IE盒子中的content包含了 border 和 padding。
为了让网页能兼容各个浏览器,选择标准的W3C盒子模型,需要在网页顶部加DOCTYPE声明。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步