先看不加内减模式的情况：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内减模式 将padding border等增大体积的元素变成原来的大小</title>
</head>
<style>
.box{
width:300px;
height: 300px;
background:#f00;
}
.s1{
width:300px;
height:200px;
background:#0f0;
border:20px solid #00f;
padding-top:50px;
/* 内减模式 */
/* box-sizing:border-box; */
}
</style>
<body>
<div class="box">
<div class="s1">青青园中葵，朝露待日晞</div>
</div>
</body>
</html>
以上代码的显示结果如下：
里面的盒子s1的原始宽度为300，高度为200，由于我们设置了上内边距50px，所以盒子的高度变为250px，还设置了20像素的蓝色边框，最终盒子的宽度为340px，高度为290px。
现在我们可以通过内减模式，让s1盒子在不丢失所有样式的状态下，宽高变回以前的300和200.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内减模式 将padding border等增大体积的元素变成原来的大小</title>
</head>
<style>
.box{
width:300px;
height: 300px;
background:#f00;
}
.s1{
width:300px;
height:200px;
background:#0f0;
border:20px solid #00f;
padding-top:50px;
/* 内减模式 */
box-sizing:border-box;
}
</style>
<body>
<div class="box">
<div class="s1">青青园中葵，朝露待日晞</div>
</div>
</body>
</html>
显示结果如下：
宽度变回了300px，高度变回了200px。
|
窥视卡
雷达卡
发表于 2023-2-1 18:32:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 03:30:24
