HTML边框百分比,CSS：以百分比和边框表示的宽度

使用该box-sizing: border-box属性。它修改了盒子模型的行为，以将填充和边框视为元素总宽度的一部分(但不包括边距)。这意味着元素的设置宽度或高度包括为填充和边框设置的尺寸。在您的情况下，这意味着元素的宽度及其边界的宽度将占用30％的可用空间。

CSS盒子模型

对它的支持并不完美，但是，即使不是所有的现代浏览器，供应商前缀也会吸引大多数人：

.left {

width: 30%;

border: 3px solid #000;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

可以在MDN和Quirksmode上找到更多信息。

据怪异模式，使用3个供应商前缀以上(-moz-，-webkit-和-ms-)，你会得到所有的浏览器，甚至IE8的支持。