本文介绍了CSS盒子模型如何影响元素的尺寸，并提出两种解决方案。当设置内边距和边框时，元素的实际大小会增加，导致布局混乱。一种方法是手动调整宽高以抵消这些影响，但这种方法繁琐。另一种更简便的方法是使用`box-sizing:border-box;`，它会让元素的宽高包括内边距和边框，从而简化计算。示例代码展示了如何应用`border-box`实现预期效果。
当设置遇盒子内间距和边框后，会将盒子撑大盒，然而我们又不想盒子被撑大，因为这会影响我们的布局。
盒子模型的宽高=内容区（自己设置的宽高）+内边距+边框
所以当我们设置盒子内间距边框等属性的时候就盒子宽高就会发生变化,想解决这个问题有两种办法.
第一种就是自己手动减去对应的宽高,这样就可以获得我们想要的盒子大小，但时候这种太麻烦
第二种 使用 box-sizing:border-box;这样就会自动给我们计算减去宽度高度，不需要我们手动计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: rosybrown;
border: 10px solid red;
padding: 20px;
box-sizing:border-box;;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
扫一扫
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
