如何理解css盒模型?

盒子模型是CSS中一个重要概念,理解了盒子模型才能更好的排版。盒子模型分为两种:ie盒子模型(怪异盒模型)和标准w3c盒模型。盒子模型包含了元素内容(content)、内边距(padding)、边框(border)和外边距(margin)几个要素。

标准盒模型

1.jpg

通过上图我们可以看到标准盒模型的范围包括:content、padding、border、margin,并且content部分不包含其他部分。

ie盒模型

2.jpg

ie盒模型也是包括content、padding、border、margin,和标准盒模型不同的是:ie盒模型大的content部分包含了padding和border部分

box-sizing

box-sizing的语法:

box-sizing:content-box || border-box || inherit;
  • 当设置box-sizing:content-box;时,将采用标准模式解析计算,也是默认模式;

  • 当设置box-sizing:border-box;时,将采用怪异模式解析计算。

所以将标准盒模型转为ie盒模型的时候可以给元素添加box-sizing:border-box;属性来解决。

以上就是如何理解css盒模型?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏