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

2回答

提问者快乐的Justin 2021-10-18 15:32:03

我的理解是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>

以上感觉都是可以的，

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

0 回复有任何疑惑可以回复我~

收起回答

西门老舅 #1

如果是需要通栏和内容居中的，采用第一种方式；如果非通栏情况采用第三种，第二种没有意义。

回复有任何疑惑可以回复我~ 2021-10-18 17:36:39

慕村510262 回复西门老舅 #2
```
什么是通栏呢？
```
回复有任何疑惑可以回复我~ 2022-07-03 00:21:19
西门老舅回复慕村510262 #3
```
通栏就是容器跟浏览器可视区一样宽
```
回复有任何疑惑可以回复我~ 2022-07-03 09:24:56

提问者快乐的Justin 2021-10-18 15:07:39

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

0 回复有任何疑惑可以回复我~

收起回答

西门老舅 #1

你说的正确的，因为有时候背景色是通栏的，而内容是要居中的，所以要嵌套一层来解决。

回复有任何疑惑可以回复我~ 2021-10-18 15:21:53

提问者快乐的Justin 回复西门老舅 #2
```
老师我更新了内容，您看下。
```
回复有任何疑惑可以回复我~ 2021-10-18 15:36:26

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

正在回答回答被采纳积分+3

2回答

相似问题

请选择置顶位置

本课精华内容

多个盒子，flex-shrink以为值的时候，该如何计算呢？

为什么用p包裹news2-item-content不用div包裹

SMACSS中基础的前缀是什么？

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

更新全局变量能批量修改吗

测试题

练习题

测试题

练习题

测试题

热搜

最近搜索清空

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

正在回答 回答被采纳积分+3

2回答

相似问题

请选择置顶位置

本课精华内容

多个盒子，flex-shrink以为值的时候，该如何计算呢？

为什么用p包裹news2-item-content不用div包裹

SMACSS中基础的前缀是什么？

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

更新全局变量能批量修改吗

测试题

练习题

测试题

练习题

测试题

正在回答回答被采纳积分+3