CSS - display：（inline | block）和display：box之间的区别？

Question

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

任何人都可以为此感到高兴吗？ 提前谢谢。

Answer 1

这是新的flexbox模块的一部分。来自working draft：

  

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

它仍然是草案规范，但值得玩，直到它完全由浏览器实现。在很多情况下，它可能会让我们摆脱花车！

请注意，display:box已被弃用，有利于display:flexbox。

最后但并非最不重要：do not rely on w3schools！

Answer 2

您可以找到更多信息here.

摘要：

  

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

     

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

     

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

     

...

     

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

Answer 3

查看MDN的文档：

  

CSS box-orient属性指定元素是水平放置还是垂直放置。

     

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

     

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

Answer 4

显示：框允许：

• 盒子方向，盒子方向，盒子序列组的盒子的灵活分布......您可以修改另一个盒子内的盒子的正常分布，不仅从垂直到水平（可以通过内联，内联 - 实现 - 用一些浮动技巧阻塞或阻塞）但也以相反的顺序（水平反向顺序可以通过一些浮动技巧实现），甚至以明确的顺序。
• 灵活的大小：框的大小可以计算为显式大小（使用高度，宽度，最大高度，最大宽度...）或父框大小和可用空间（使用box-flex） ）。
• 使用box-align，box-pack，box-lines处理可用空间......

新的盒子模型可以做一些旧模型不能没有额外的javascript计算，没有多少