设置理想视口后，如果内部元素设置的宽度大于视口宽度，为什么bo

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #999;
    }

    .box {
      background-color: #6cf;
      width: 750px;
      height: 10px;
      margin: auto;
    }

    .line {
      margin-top: 20px;
      height: 10px;
      background-color: #000;
      width: 100%;
    }
  </style>
  <div class="box"></div>
  <div class="line"></div>
</body>
</html>

如果去掉理想视口，margin：auto; 会多出边距；

###

在常规流（normal flow）中：

默认情况下，块级元素将占据这一内联方向¹的所有空间，因此我们的段落会铺开分布在多行，尽可能排满他的包含块。

注意这里说它是占据这一内联方向的所有空间，而不是由自己包含的内容撑开，所以包含内容过宽的时候就看 overflow 怎么设的了。
行内元素和行内块元素则是由内容撑开。

个人理解，像英文等横向排版的内联方向为横向，回鹘式蒙古文等纵向排版的内联方向为纵向。 ?