为什么header-wrapper外面还要套个header-cotainer？

来源：4-18 综合案例二(知乎导航)

快乐的Justin

2021-10-18

RT
我看宽度和高度都写在header-wrapper上了，
我一直不清楚的是 html 中各div为什么要这样子嵌套，这也是我看这节课的理由

写回答

2回答

快乐的Justin

提问者

2021-10-18

我的理解是flex布局需要外面有一个容器，所以需要一个wrapper，像下面这样

<head>
    <style>
    .header-container{
        background:white;
    }
    .header-wrapper{
        display:flex;
        width:1156px;
        height:48px;
    }
    </style>
</head>
<body>
    <div class="header-container">
      <div class="header-wrapper">
      items
      </div>
  </div>
</body>

但当非通栏时可以写成下面的形式吗？

<head>
    <style>
    .header-container{
        width:1156px;
        height:48px;
        background:white;
    }
    .header-wrapper{
        display:flex;
    }
    </style>
</head>
<body>
    <div class="header-container">
      <div class="header-wrapper">
      items
      </div>
  </div>
</body>

或者是并成一个

<head>
    <style>
    .header-container{
        width:1156px;
        height:48px;
        background:white;
        display:flex;
    }
    </style>
</head>
<body>
    <div class="header-container">
    items
    </div>
</body>

以上感觉都是可以的，

行业里有什么规范或者说是什么标准吗？

西门老舅

慕村510262

通栏就是容器跟浏览器可视区一样宽

2022-07-03

共3条回复

快乐的Justin

提问者

2021-10-18

仔细看了下，因为是通栏，需要一个容器放入white背景色？

快乐的Justin