Question

我试图设计一个简单的网站。我在使用CSS时遇到麻烦，尤其是继承问题。我的目标是有侧面菜单，里面的物品放在另一个下面：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

为什么我必须在tag中明确声明将css属性显示为显式并明确声明方向？

简单的答案是：

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

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

为什么css不会自己继承

1 个答案: