css+边框不占用外部
导读：今天我们来讲一下 CSS 中关于边框不占用外部的问题。首先，CSS 里有一个属性叫做 box-sizing，这个属性的默认值是 content-box。所谓 content box，就是元素的宽高只包括内容，不包括边框和内边距。如果我们设置...
今天我们来讲一下 CSS 中关于边框不占用外部的问题。首先，CSS 里有一个属性叫做 box-sizing，这个属性的默认值是 content-box。所谓 content box，就是元素的宽高只包括内容，不包括边框和内边距。如果我们设置元素的边框和内边距，那么元素的实际宽度就会比我们设置的宽度要大，具体可以看下面这个例子：style>
div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 20px;
}
/style>
div>
/div>
这段代码设置了一个宽高为 100px 的 div 元素，同时给它设置了 10px 的边框和 20px 的内边距。我们会发现，这个 div 元素实际上的宽度是 160px，而不是我们设置的 100px。如果我们想让元素的实际宽高只包括边框和内边距，不包括内容，就可以把 box-sizing 的值设置为 border-box。这样，元素的宽高就包括了内容、边框和内边距。比如，我们把上面的代码修改一下，将 box-sizing 的值设置为 border-box：style>
div {
width: 100px;
height: 100px;
border: 10px solid black;
padding: 20px;
box-sizing: border-box;
}
/style>
div>
/div>
这样，div 元素实际的宽度就是我们设置的 100px，不会因为边框和内边距而增加。总结一下，如果我们想让元素的实际宽高包括边框和内边距，可以把 box-sizing 的值设置为 border-box。如果我们不想让元素的实际宽高包括边框和内边距，就保持默认值 content-box 即可。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css+边框不占用外部
本文地址： https://pptw.com/jishu/500205.html