CSS如何使用box-sizing属性

            
这个div更小(宽度为300px，高度为100px)。

这个div更大(宽度也是300px，高度也是100px)。

box-sizing属性解决了这个问题。

使用CSS box-sizing属性

box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中：

.div1 {  width: 300px;  height: 100px;  border: 1px solid blue;  box-sizing: border-box;}.div2 {  width: 300px;  height: 100px;  padding: 50px;  border: 1px solid red;  box-sizing: border-box;}

在线体验一下

由于使用它的结果box-sizing: border-box;非常好，许多开发人员希望他们页面上的所有元素都以这种方式工作。下面的代码确保以更直观的方式调整所有元素的大小。许多浏览器已经box-sizing: border-box;用于许多表单元素（但不是全部 - 这就是输入和文本区域在宽度上看起来不同的原因：100％;）。将其应用于所有元素是安全和明智的：

* {  box-sizing: border-box;}

CSS Box大小调整属性

box-sizing 定义如何计算元素的宽度和高度:是否应该包含填充和边框

感谢你能够认真阅读完这篇文章，希望小编分享的"CSS如何使用box-sizing属性"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!