盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容（content）、内边距（padding）、边框（border）与外边距（margin）这几个部分。
盒子模型分为两种：ie盒子模型（怪异盒模型）和标准w3c盒模型。
css盒子模型尺寸如何计算？
1、标准盒子的尺寸计算
盒子自身的尺寸：内容的宽高+两侧内边距+两侧边框
盒子在页面中占位的尺寸：内容的宽高+两侧内边距+两侧边框+两侧外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子自身尺寸</title>
<style>
div.box1{
width:200px;
height:200px;
padding:20px;
border:5px red solid;
}
/*盒子自身的宽度:200px + 20px*2 + 5px*2 = 250px*/
/*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/
div.box2{
width:200px;
height:200px;
padding:20px;
border:5px red solid;
margin:50px 100px;
margin-left:-100px;/*当左侧外边距变为负值:盒子的占位宽度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/
}
/*盒子占位的宽度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/
/*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/
/* 当盒子的外边距为负值时，盒子占位的尺寸有可能小于盒子自身的尺寸*/
</style>
</head>
<body>
<div></div>
box2前面的文字
<div></div>
box2后面的文字
</body>
</html>2、怪异盒子的尺寸计算
直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现
更多前端开发知识，请查阅 HTML中文网 ！！
以上就是css盒子模型尺寸如何计算？的详细内容，更多请关注易知道|edz.cc其它相关文章！
