发表日期： 2022-05-31 08:47:23 浏览次数：80
黑龙江省双鸭山网站建设_网页定制制作与开发多少钱_做到满意为止
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
亲自试一试
box-sizing 属性解决了这个问题。
如果使用 CSS box-sizing 属性
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。
如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：
现在两个 div 的大小相同！
Hooray!
该例与上例相同，两个 <div> 元素都设置了 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;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。
将其应用于所有元素是安全且明智的：
实例
* {
box-sizing: border-box;
}
亲自试一试
CSS Box Sizing 属性
属性 描述
box-sizing 定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。
