使用该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的支持。