CSS calc 百分比宽度和除法

【问题标题】：CSS calc percentage width and divisionCSS calc 百分比宽度和除法
【发布时间】：2016-04-13 07:41:35
【问题描述】：

我有一个包含三个列表项的列表：

<ul class="menu_container">
  <li class="item">Item1</li>
  <li class="item">Item2</li>
  <li class="item">Item3</li>
</ul>

ul 元素的宽度会随着您调整浏览器的大小而变化，我正在尝试使用 calc 来锻炼项目的宽度，以使它们相等。第一个和第三个列表项有一个 2px 宽的左右边框。

在 Chrome 开发工具中，menu_container 的宽度是 636px。如果我检查第一个列表项并执行 width: 100% 它显示 640px。但是，如果我这样做 calc((100% - 12px) / 3) 它会显示 212px 的宽度。为什么不是 (640 - 12) / 3 = 209.333？

【问题讨论】：

你加了box-sizing:border-box
谢谢，这正是我想要的！

标签： html css css-calc

【解决方案1】：

box-sizing:border-box

使用 box-sizing:border-box 计算尺寸为，宽度 = 边框 + 填充 + 宽度内容的高度 = 边框 + 内边距 + 内容的高度。

示例

宽度 = 100px + 2px 两侧边框 = 4px + 填充 5px 两侧 = 10px

总数为100px + 4px + 10px = 114px

带有box-sizing:borderbox 属性

总数将为100px，因为border 和padding 是从内部给出的

【讨论】：