10.5 块级盒子模型（原盒子模型）：两种盒子有什么不同？

块级盒子模型（原盒子模型）：两种盒子有什么不同？

什么是盒子模型？这是旧的叫法，新的叫法是CSS视觉格式化模型里面的块级盒子。

一个块级元素至少会生成一个块级盒子，但也有可能生成多个。所以在谈到盒子模型时，我们用块级盒子，代替块盒子，这样的描述更准确。

盒子示例：

行内盒子（inline box）、行内级盒子（inline-level box）
原子行内级盒子（atomic inline-level box）
块级盒子：block-level box，块盒子：block box

行内级盒子没有宽高，块级盒子有宽高。块级盒子因为有宽高，在布局中经常被用到。接下来我们看一下常见的块级盒子。

标准块级盒子

IE块级盒子

区别大于content的宽度定义不一样。

这与box-sizing样式有关，不同宿主环境box-sizing的默认值不同。

块级盒子3D立体示意图，及遮挡关系

2020年9月29日

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。