有没有办法将边框插入到对象的高度？答案

【问题标题】：Is there a way to inset a border to the height of an object?有没有办法将边框插入到对象的高度？
【发布时间】：2021-08-16 00:21:19
【问题描述】：

我正在开发一个使用网站控制机器的项目，并且我目前正在开发 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...

【问题讨论】：

标签： css object height border

【解决方案1】：

您想将您的容器设置为box-sizing:border-box;

.borderInside {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:1px solid red;
}

【讨论】：

你应该总是把无前缀的放在最后。当前版本的 Chrome 和 Safari 支持不带前缀的 box-sizing。他们还支持前缀，他们会使用你最后写的那个——在这种情况下是前缀的。