媒体查询的宽度计算中不包括边框

Question

导致事情看起来很草率。

有一个div扩展到100％，但右边界被切断。

请在此处查看开发网站 - 它位于Feed

下

https://frozen-dusk-2587.herokuapp.com/

这里是我使用Chrome开发工具切换边框的图片：

这就是我在边境上切换：

Answer 1

这是所有box-sizing:content-box元素的默认行为，这是所有元素的默认值。将box-sizing:border-box;添加到#at_view。这会导致浏览器在相对宽度计算中包含边框和填充。

Answer 2

如果您定义宽度为100％的元素以及边框，则边框会添加到100％，因此这会使总宽度超过100％，这会导致您的问题（请在css框中阅读 - 型号：http://www.w3schools.com/css/css_boxmodel.asp）。

因此，一个解决方案是您可以将#at_view的宽度更改为小于100％，尝试90-95％ - 直到看起来正确。

或者非常具体，您可以将#at_view宽度定义为100％并使用calc（）减去边框：

#at_view { 
  width: calc(100% - 20px);
}

（减去20px，因为看起来20px是边框添加的宽度，因为边框是10px - 左边是10px +右边是10px = 20px。）

Answer 3

甚至可以使用CSS规则修改框模型等基本内容。

见

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

更改框模型的默认行为：

#at_view{
  box-sizing:border-box;
}