块级盒子模型(原盒子模型):两种盒子有什么不同?
什么是盒子模型?这是旧的叫法,新的叫法是CSS视觉格式化模型里面的块级盒子。
一个块级元素至少会生成一个块级盒子,但也有可能生成多个。所以在谈到盒子模型时,我们用块级盒子,代替块盒子,这样的描述更准确。
盒子示例:
代码语言:javascript复制行内盒子(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 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。