CSS盒子模型就是在写CSS时所使用的一种思维模型，它由四个属性组成：content（内容区）、padding（填充区）、border（边框区）、margin（外边界区），它规定了网页元素如何在网页中显示以及元素间相互位置关系。
1、内容区（content）
内容区指的是盒子中放置内容的区域，如果没有为元素设置padding和border，则内容区大小默认和盒子大小是一致的。
2、填充区（padding）
填充区指的是元素内容区（content）与边框（border）以内的空间，填充区可以使用padding属性来设置。
3、边框区（border）
在元素周围的边框，边框是元素可见框的最外部，边框区可以使用border属性来设置。
4、外边界区（margin）
外边界区是元素边框与网页其他元素相距的空间，外边界区可以使用margin属性来设置。
我们先来看一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
border:10px solid #000;
padding:30px;
margin:30px;
background:#0f0;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
上面的代码就是设一个width（宽）300px，height（高）300px的div（content），并设置有10px的border（边框区）、30px的padding（填充区）和30px的margin（外边界区），且背景色为绿色。
浏览器显示效果如下：
这里我们会发现盒子宽高都变成了380px，并不是我们上面设置的300px。
找到浏览器调试页面找到如下示意图：
从上图我们可以得出现在盒子的高度和宽度都加上了padding（填充区）的值和border（边框）的值，但是margin（外边界区）的值是没有加的，元素新的宽度和高度分别为：
宽度（width）=（content）300px+（padding）30px乘2+（border）10px乘2=380px
高度（height）=（content）300px+（padding）30px乘2+（border）10px乘2=380px
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
