sizebox模型下载_css 盒模型、box-sizing 学习笔记

默认情况下，给元素设置的高度和宽度是元素内容区的宽度和高度，给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式：

元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；

别人说过的话，你记住了，时间久了你就会忘记了，为了加深记忆，这里亲自验证，并记录下验证过程，方便下次复习使用。验证结论我们先给处一张标准的盒模型

如上图盒模型示例：元素是绝对定位的，上右下左均是0px,内容宽度420px, 加上左右内边距各10px，加上左右边框 各10px，元素的宽是460px;

验证结论，我们给盒子加一个父盒子：

1、设置宽度为420px，overflow设置为自动，子盒子的宽度会超出父盒子内容区的宽度，父盒子出现横向的滚动条；

2、设置宽度为460px，overflow设置为自动，子盒子的宽度不会超出父盒子内容区的宽度，父盒子不出现横向的滚动条；

如果以上两点成立，则结论是正确的。

效果看下面两张图片：

从上面的两张图上我们可以看出，我们的结论是正确的，即，元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

我们可以用同样的方法验证：元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；当然本人是亲自验证过的，这里不再给出高度的截图了，贴出源码，有兴趣的可以自行验证一下，加深记录。

源码如下：

Title

*{margin:0;padding:0px;

}html,body{height:100%;overflow:hidden;

}#wrapper{height:100%;overflow:auto;

}#demo-parent{position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;background-color:pink;width:460px;height:250px;overflow:auto;

}

/*居中定位*/#demo{position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;width:420px;height:200px;font-family:"楷体";font-size:24px;line-height:40px;text-align:center;font-weight:bold;color:black;background-color:#cccccc;padding:10px;border:solid 10px #c3c3c3;

/*box-sizing: border-box;*/

}

红军不怕远征难，

万水千山只等闲。

五岭逶迤腾细浪，

乌蒙磅礴走泥丸。

金沙水拍云崖暖，

大渡桥横铁索寒。

更喜岷山千里雪，

三军过后尽开颜。