CSS核心（四十七）内减模式 将padding border等增大体积的元素变成原来的大小
先看不加内减模式的情况：<!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。
其实编程一开始并没有太多的“路”和灵感，编的程序多了，也便有了。。。。FOR i=学习 TO 实践Print String(i, 成功些)PrintNext i 好贴！ 支持！ 为什么那么多人还是没有领会事情的真正含义，就是人家说的，cpu不是为你服务的，为什么那么简单的问题要为pc解决，其实我们太拘泥与编程，而忘了人的能动性，那是你高中常做的是，就是小学生可能都解决。人人都有内在的局限性。即使是你是高手。 受益匪浅，万分感谢 作为一名程序员我真的有许许多多的话要说~!可我不知道怎么说本来我一直以为适合自写的方法才是最好的算法但我现在才明白CPU是为用户服务的,不是为程序员服务的这句话的道理~~!!!! UP 如梦初醒! man,u r absolutely fabulous,wish u get a perspective furture 写的很好，想成为一个好的程序员，需要努力努力再努力！！！ 谢谢您的提醒。我好象也在犯你的错误 我终于搞编程数学是多么重要，尤其是看到第三个程序，天哪，我想如果是我也会和你一样想不到的！