详解CSS中的Box Model盒属性的使用

页面上显示的每个元素（包括内联元素）都可以看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：

可以显而易见的看出盒模型由 4 部分组成。从内到外分别是：

content -> padding -> border -> margin
按理来说一个元素的宽度（高度以此类推）应该这样计算：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同浏览器（你没有猜错，就是那个与众不同的浏览器）对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。于是你规定一个元素：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表