我正在从事一个使用网站控制机器的元素，目前我正在研究 CSS 样式表。 我现在有这个脚本:
<html>
<head>
<title>Machine overview V1</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<h1>Machine overview</h1>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
现在让我们说:
header{height:15%;width:100%;}
section{height:80%;width:100%;}
footer{height:5%;width:100%;}
但是当你添加一个
border:1px solid black;
对于这些属性中的任何一个，它都会弄乱以 % 为单位的高度，
这基本上打乱了页面的整个布局。
我不能强制使用 npx 的高度，因为使用不同的分辨率它必须看起来不错。
有没有办法根据对象的高度插入边框？
就像您可以插入 box-shadow 一样...
最佳答案
您想将容器设置为 box-sizing:border-box;
.borderInside {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid red;
}
关于css - 有没有办法将边框插入到对象的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15185561/