盒模型计算问题

Charlotte0924
  • 182

本来以为自己搞懂了结果应用时候又蒙圈😂
上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      margin: 0 auto;
      max-width: 800px;
      border: 1px solid blue;
      /* box-sizing: border-box; */
    }
    .intro {
      display: inline-block;
      width: 180px;
      height: 180px;
      line-height: 180px;
      border-radius: 90px;
      border: 1px solid yellow;
      text-align: center;
      margin: 7px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="intro">intro1</div>
    <div class="intro">intro2</div>
    <div class="intro">intro3</div>
    <div class="intro">intro4</div>
  </div>
</body>
</html>

浏览器显示效果:
image.png
外面container的宽度是802px
image.png
里面每个intro的宽度是182px
image.png
因为没有设置box-sizing,所以默认是content-box模式,所以单个intro的宽度应该是180+2(border)=182px,但是182px*4是小于container的802px的宽度呀,怎么会这样,不应该是4个intro的宽度加起来等于container的宽度吗?
这个彻底晕了,哪位大佬帮我解释一下这个例子是怎么计算的,非常感谢!!

回复
阅读 1.1k
3 个回答
✓ 已被采纳

用 Firefox 很容易就发现了原因:

image

经典问题了,很多方式解决:

  1. 字体大小设 0
  2. flex 布局
  3. 改 html,移除空白
  4. 未来的 text-space-collapse

父是margin:0 auto, 子的宽度是182*4 小于父的宽度,水平居中有什么问题?不就是这样的吗

.intro {
    display: inline-block;
}

行内块元素横向排列时是存在默认间距的,所以不是盒模型你没理解,而是对于元素种类理解不到位可能,
可考虑使用flex/float布局

希望帮得到你~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏