添加内边框时如何保持div尺寸不变？

如何在不扩展其尺寸的情况下将边框放置在 Div 内？

当设计

时带有边框的元素，默认行为是将边框厚度添加到元素的宽度和高度上。但是，您可能会遇到希望边框出现在 div 现有尺寸内的情况。

要实现此效果，可以使用 box-sizing 属性并将其设置为 border-box：

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

通过将 box-sizing 设置为 border-box，div 的宽度和高度将包括边框厚度，确保当边框出现在其内部时，可见框保持相同的大小边缘：

<pre class="brush:php;toolbar:false">box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;

}

div div {

box-sizing: border-box;
border: 10px solid red;

}

您好！

你好！