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

總結

以上是生活随笔為你收集整理的HTML边框百分比,CSS：以百分比和边框表示的宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。