CSS的盒子模型
博客专区 > dong23 的博客 > 博客详情
CSS的盒子模型
dong23 发表于1个月前
CSS的盒子模型
  • 发表于 1个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

盒子模型分为IE盒子和W3C盒子两种:

W3C盒子由margin,border,padding,content

IE盒子由margin,padding,padding,content构成,但是由于content包括padding,border,即为margin+content

 

例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释,那么这个盒子模型占用的

 宽度为:20*2+10*2+10*2+200=280px; 

  高度:20*2+10*2+20*2+50=130px;

 盒子的实际宽度大小为:10*2+10*2+200=240px;

 实际高度:10*2+10*2+50=90px;

用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

盒子的实际大小为:宽度:200px,  高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

 

共有 人打赏支持
粉丝 0
博文 10
码字总数 1763
×
dong23
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: