Question

我正在开发一个项目来控制使用网站的机器，我正在研究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的高度，因为它必须使用不同的分辨率看起来很好 有没有办法将边框插入到物体的高度？
就像你可以插入盒子阴影一样......

Answer 1

您希望将容器设置为box-sizing:border-box;

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

有没有办法将边界插入物体的高度？

1 个答案: