html - "block box"和 "block-level element"和有什么区别?

标签 html css

This MDN doc说:

In CSS we broadly have two types of boxes - block boxes and inline boxes.

但是在 this MDN doc谈论正常流程时,从未提及 block 盒。仅提到了 block 级元素。

有什么区别?

最佳答案

block 与 block 级

很多。 block 盒既是 block 级也是 block 容器。这是 display:blockdisplay:flow-rootdisplay:list-item 的主体框和 的表格包装框显示:表

盒子是 block 级的,但不是 block 容器,因此不是 block 盒子,是那些具有例如display:flexdisplay:grid 以及 display:table 的表格网格框

盒子是 block 容器,但不是 block 级的,因此不是 block 盒子,它们具有例如display:inline-blockdisplay:table-cell

说大致有两种类型的框 - block 框和内联框 - 即使不是完全错误,最多也是一种误导。我们可以更好地说,大致有两种类型的框 - block 级和内联级,但即便如此,也只是大致。 block 级框是 block 格式化上下文的参与者。内联级框是内联格式化上下文的参与者。参与其他格式化上下文的框(例如 Flex 元素、网格元素以及一些内部表格和 ruby​​ 框)都不是。

元素与盒子

元素是 SGML、HTML 和 DOM 的对象。盒子是 CSS 的对象。 block 级元素是指在形成 CSS 框树时,默认情况至少生成一个 block 级主框。

关于html - "block box"和 "block-level element"和有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75090912/

相关文章:

html - HTML 页面上的 3D 模型

JavaScript 逻辑,按钮不起作用

javascript - 不使用 jQuery 突出显示事件 anchor 链接

html - Bootstrap 列延伸到容器的一侧

html - 中心渐变

css - 如何在 CSS 中定位多个 DIV

超链接中的 javascript 引用?

html - 过渡背景图像

html - 如何在没有 div 的情况下通过 css 将图像放在内联 svg 之上?

css - 使用纯 CSS 为三 Angular 形添加边框