基本介绍：
图片示意：
我们将一间教室比作是一个盒子
内容区：
内边距：
边框：
外边距：
效果演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
background-color: seagreen;
padding-left: 300px;/* 左内边距 */
padding-bottom: 50px;/* 下内边距 */
border: 3px dashed red;/* 边框：3px 虚线 红色 */
margin: auto;/* 水平居中 */
margin-top: 50px;/* 上外边距 */
}
</style>
</head>
<body>
<div>内容区1</div>
<div>内容区2</div>
</body>
</html>网页效果：由于盒子模型是透明的，所以需要使用检查来对代码进行调试
