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

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

来源

2013-03-03 Jeroen Vorsselman

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

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

来源

2013-03-03 12:21:50 deadlock

你应该始终把前缀的最后一个。 Chrome和Safari的当前版本支持不带前缀的框大小。他们也支持它的前缀，他们会使用你最后写的 - 在这种情况下，前缀。 – Ana 2013-03-03 12:54:55

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

回答

相关问题