为什么css不会自己继承答案

【问题标题】：Why css wont inherit on their own为什么css不会自己继承
【发布时间】：2018-03-12 04:20:48
【问题描述】：

我正在尝试设计一个简单的网站。我在使用 css 时遇到了麻烦，尤其是在继承方面。我的目标是让侧边菜单和里面的项目一个一个地放在另一个之下：

#inner-flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#container {
  display: flex;
}

.left-menu-navbar {
  display: inherit;
  flex-direction: column;
}

.left-menu {
  display: inherit;
  background: hotpink;
  flex-direction: column;
}

.header {
  flex: 1;
  background: tomato;
}

.outlet {
  flex: 2;
  background: deepskyblue;
}

.footer {
  flex: 1;
  background: lightgreen;
}

<div id="container">
  <div class="left-menu">
    <span class="left-menu-navbar">
        <a routerLink="projects" routerLinkActive="active">Projects</a>
        <a routerLink="upload" routerLinkActive="active">Upload</a>
        <a routerLink="account" routerLinkActive="active">Account</a>
        <a routerLink="create" routerLinkActive="active">Create project</a>
      </span>
    <span>111</span>
    <span>222</span>
    <span>333</span>
  </div>
  <div id="inner-flex-container">
    <span class="header">MENU COMPONENT</span>
    <div class="outlet">
      <router-outlet></router-outlet>
    </div>
    <span class="footer">vVVVVVVv</span>
  </div>
</div>

这段代码完成了这项工作，但我要问的是为什么我必须在标签<span class=left-menu-navbar"> css 属性中显式声明为显示并显式声明方向？我希望从父母 (left-menu) 那里继承它，但那没有发生......

【问题讨论】：

可能重复：stackoverflow.com/q/37840646/3597276
@Michael_B 这更多是关于继承而不是 Flexbox，所以我将其发布为答案。

标签： html css flexbox alignment

【解决方案1】：

为什么我必须在标签中显式声明 css 属性作为显示并显式声明方向？

简单的答案是：

并非所有 CSS 属性都是继承的，因为它没有意义其中一些是。例如，边距不是继承的，因为子元素不太可能需要与其相同的边距父母。在大多数情况下，常识会告诉您哪些属性是继承，哪些不是，但要确定你需要查找 CSS 2.1 specification property summary table 中的每个属性。

源：https://www.w3.org/wiki/Inheritance_and_cascade

【讨论】：