CSS块容器盒是什么?它是否一定是容器?空div盒属哪类?
结论
你的理解是错的,示例里的空<div>生成的盒同时属于块级盒、块容器盒、块盒,和行内盒没有关系。
判定依据
- 块容器的定义约束的是盒的内容排布规则,不是要求盒必须实际装着子元素。规范里说块容器“要么仅包含块级盒,要么建立行内格式化上下文仅包含行内级盒”,意思是块容器只要承载内容,就只会走这两种排布模式,不是说盒子空着就不算容器了。就像空抽屉还是抽屉,它有装东西的结构,不会因为里面没东西就变成别的物件。
- 规则明确说明:除了表格盒、替换元素之外,块级盒天然就是块容器盒。默认
display: block的普通div属于非替换块级元素,天生就符合块容器的判定,内部有没有子节点不影响这个属性。你往空div里塞块级元素(比如p标签),它就按块排布;塞普通文本,它就自动建立行内格式化上下文按行内规则排布,这种能力不会因为它暂时是空的就消失。 - 块盒的定义就是“同时是块容器的块级盒”,既然空div满足块级盒、块容器两个条件,自然就是块盒。
直观验证
你写的示例代码里,空div设置的width: 64px、height: 64px、红色背景可以正常渲染成一个正方形红块,本身就是它属于块盒的直接证据——如果它真的不是块容器、不是块盒,这些块盒专属的渲染规则根本不会按你的预期生效。
内容的提问来源于stack exchange,提问作者Cristiano Moraes
相关产品推荐
相关产品推荐

