css - 使用 css 设置 div 外宽

Question

我想知道是否有办法设置outerwidth一个div使用css来忽略填充和边框。

当我将 a 设置div为50%宽度时，填充和边框将添加到宽度中。javascript如果没有or ，我该如何解决jQuery.outerWidth()？

不想使用额外的元素

Answer 1

我想知道是否有办法使用 css 设置 div 的外部宽度以忽略填充和边框。

你可以box-sizing: border-box用来制作padding和border计算里面width：

div {
    box-sizing: border-box;
}

请参阅：http : //jsfiddle.net/thirtydot/6xx3h/

浏览器支持：http ://caniuse.com/css3-boxsizing

规范：http ://www.w3.org/TR/css3-ui/#box-sizing

Answer 2

将另一个嵌套div在您的内部，并将填充/边框应用于嵌套的一个：

<div style="width:50%;"> <div style="padding:5px;">  ....  </div> </div>

不幸的是，没有纯粹的 CSS 方法来实现这一点（或者至少我不知道有一种方法）。

Answer 3

我假设您不想添加更多元素并稍微不同地回答您的问题。

1. 浏览器，而不是样式表，决定了相对度量的实际大小，例如 em 和 %。
2. 没有通用/标准机制将计算数据从浏览器的内部布局引擎反馈回样式表（这可能是一个危险的循环问题）。

确实，做到这一点的唯一方法是：

1. 使用固定宽度尺寸并将像素计算添加到您的样式中。
2. 使用 JavaScript 或相关框架来实现结果。

Answer 4

如果可能的话，我会简单地在该 div 中添加一个 div。

<div id="outerwidth">
  <div class="inner">
   //Content
  </div>
</div>

.outerwidth { width: 50%; }
.inner { padding: 20px; }

Answer 5

您可以将分配给宽度的 50% 值拆分为：

width: 46%;

margin: 0 1%; // 0 top/bottom and 1% each for left and right

padding: 0 1%; // same as above

您可以重新计算百分比以满足您的需要，只要总数为 50% 就可以了。

我会避免使用 js 来解决小的外观问题，因为这在 js 关闭的情况下不起作用，并且会给您的客户端浏览器增加额外的工作量 - 想想移动设备，您就会明白为什么性能很重要！