<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--空元素 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- -->
<style>
*{
padding:0;
/* 内边距为0 */
margin:0;
/* 外边距为0*/
}
div{
width:100%;
/* 宽 */
color: #78818F;
/* 颜色 */
}
#box{
height:900px;
/* 高 */
box-sizing: border-box;
/* 计算盒子大小方法：边框 */
padding: 30px 50px 30px;
/* 盒子内边距：上 左右 下 */
background-color: #D9DAE0;
/* 背景颜色 */
}
h1{
padding-bottom: 10px;
/* 内边距底部距离 */
border-bottom: 2px solid black;
/* 下边框底部距离：2px 固定 颜色*/
}
#mainbody{
width: 80%;
/* 宽 */
margin-top: 30px;
/* 上外边距的距离：30px */
padding-left:30px;
/* 左内边距的距离 */
margin-left:50px;
/* 左外边距的距离 */
background-color: #D9D9D9;
/* 背景颜色 */
border-left:10px solid #42456d;
/*左边框距离;10px 固定颜色 */
}
.div{
margin-top:30px;
/* 上外边框的距离 */
text-align: center;
/* 水平对齐 居中 */
font-size: 28px;
/* 字体大小 */
}
.one{
width:100px;
/* 宽 */
border-left:10px solid #474859;
/* 左边框距离：厚度 样式 颜色 */
border-right:10px solid #474859;
/*右边框距离：厚度 样式 颜色 */
}
.two{
margin-top:30px;
/* 上外边距的距离 */
}
#three{
height:100px;
/* 高 */
background-color: #A6A6A6;
/* 背景颜色 */
margin-top:40px;
/* 上外边距的距离 */
padding-top:5px;
/* 上内边距的距离 */
padding-left:40px;
/* 左内边距的距离 */
}
p{
margin-top:30px;
/* 上外边距的距离 */
}
a{
color: #78818F;
/* 颜色 */
}
</style>
</head>
<body>
<div id="box">
<h1> CSS盒子模型</h1>
<div>
<div id="mainbody">
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。<br>
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。<br>
CSS盒子模型就是在网页设计中经常用到的CSS技术所便用的一种思维模型。<br>
</div>
</div>
<div class="one div">原理</div>
<div class="two">
先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。<br>
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。<br>
</div>
<div class="one div">特点</div>
<div class="two">
想象一个盒子，它有：外边距（margin)、边框（border)、内边距（padding)、内容（content)四个属性；<br>
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content),都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西, 外边距就是边框外面自动留出的一段空白。<br>
</div>
<div class="one div">结构</div>
<div class="two">
内容（CONTENT)就是盒子里装的东西；<br>
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；<br>
边框(BORDER)就是盒子本身了；至于边界(MARGIN则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文宇、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， 现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。<br>
填充只有宽度属性，每个HTML标记都可看作一个盒子；<br>
</div>
<div id="three">
<p>内容来源：<a herf="#">CSS盒子模型-百度百科</a></p>
<p>作者：百度百科</p>
</div>
</div>
</body>
</html>