4

我很困惑。我刚刚发现了这个 CSS 属性：display:box; 我不明白它给 CSS 带来了什么，而 display:block、inline、inline-block 是不可能的。

任何人都可以启发我吗？提前致谢。

4

4 回答 4

10

它是新的 flexbox 模块的一部分。从工作草案：

在 flexbox 布局模型中，flexbox 的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。

它仍然是一个草案规范，但值得一试，直到它被浏览器完全实现。在许多情况下，它可能会让我们摆脱浮动！

请注意，display:box它已被弃用，取而代之的是display:flexbox.

最后但同样重要的是：不要依赖 w3schools！

于 2012-04-21T02:38:29.277 回答
3

你可以在这里找到更多信息。

简要总结：

除了 CSS 1 和 2 的传统盒子模型之外，CSS 3 还引入了一种全新的盒子模型。灵活盒子模型决定了盒子在其他盒子中的分布方式以及它们共享可用空间的方式。

这种盒子模型类似于 XUL（Firefox 使用的用户界面语言）使用的模型。其他一些语言使用类似的盒子模型，例如 XAML 或 GladeXML。

通常，如果您想创建适应浏览器窗口大小的流体布局或适应字体大小的弹性布局，灵活的盒子模型正是您所需要的。

...

默认情况下，传统的 CSS 盒子模型根据 HTML 流垂直分布盒子。使用灵活的盒子模型，可以明确指定顺序。你甚至可以逆转它。要切换到灵活盒子模型，请将属性 display 设置为具有子盒子的盒子上的值盒子（或内联盒子）。

于 2012-04-21T02:25:29.130 回答
2

查看MDN的文档：

CSSbox-orient属性指定元素是水平还是垂直布局其内容。

例如，XULbox和hbox元素默认水平布局其内容，但 XULvbox元素默认垂直布局其内容。

默认情况下，HTML DOM 元素沿内联轴布置其内容。此 CSS 属性仅适用于 CSSdisplay值为box或的 HTML 元素inline-box。

于 2012-04-21T02:23:46.790 回答
1

显示：框允许：

  • box-orient、box-direction、box-ordinal-group等box的灵活分布……可以修改另一个box内部box的正态分布，不仅可以从垂直到水平（可以通过inline、inline-block或者block来实现）有一些浮动技巧），但也有相反的顺序（可以通过一些浮动技巧来实现水平反向顺序），甚至是明确的顺序。
  • 灵活的大小：框的大小可以计算为显式大小（使用高度、宽度、最大高度、最大宽度......）或父框的大小和可用空间（使用 box-flex）。
  • 使用 box-align、box-pack、box-lines 处理可用空间...

新的盒子模型可以做一些旧模型在没有额外的javascript计算的情况下做不到的事情，不多

于 2012-04-21T02:50:18.920 回答