------------恢复内容开始------------
1.外边距margin属性
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>边距</title>
6 <style>
7 body{
8 border:2px solid red;
9 width:420px;
10 }
11 div{
12 width:200px;
13 height:200px;
14 background:yellow;
15 margin-left: 100px;
16 margin-top: 100px;
17 margin-bottom: 100px;
18 border:10px solid deeppink;
19 }
20 </style>
21 </head>
22 <body>
23 <div>这是一个div</div>
24 </body>
25 </html> 演示结果：
2.内边距属性
演示代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>边距</title>
6 <style>
7 body{
8 border:2px solid red;
9 width:420px;
10 }
11 div{
12 width:100px;
13 height:100px;
14 background:yellow;
15 margin-left: 100px;
16 margin-top: 100px;
17 margin-bottom: 100px;
18 border:10px solid deeppink;
19 padding-left:30px;
20 padding-top: 30px;
21 padding-right:30px;
22 }
23 </style>
24 </head>
25 <body>
26 <div>这是一个div</div>
27 </body>
28 </html> w3c:盒子模型 content-box，给定的宽度是内容的宽度
div所占的高度：上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
ie的盒子模型： border-box 给定的宽度是border的宽度
box-sizing属性控制盒子模型的类型。语法：box-sizing:content-box|border-box|inherit; inherit:元素继承父元素的盒子模型
边框模型宽（高）=外边距+内边距+border宽（高）
注意：
1)margin:调整元素的水平居中,元素自己必须有宽度.
margin: 0 auto;
2)上下相邻的两个元素，margin-botton和margin-top的时候，
当两个值都是正数的时候，取两者中的最大值；
当有负数存在时，结果是相加的后的值。
当两个值都是负数的时候，取两者绝对值大的那个；
3）水平方向的margin-left(margin-right)：正常的计算方式。
4)当子元素紧贴父元素上方元素时，设置子元素的margintop时父元素也会一起向下移动。
改变方法：通过给父元素增加border或者padding-top使子元素与父元素上方元素分离。
注意的第二点要自己尝试，否则很容易搞不明白。
height和width属性
min-height:最小高度
min-width:最小宽度
max-height:最大高度
max-width:最大宽度
over-flow：属性，溢出控制
overflow:hidden; 溢出隐藏
overflow:auto; 超出出现滚动条
overflow:scroll; 强制出现滚动条
以下三个属性结合使用，使超出文本显示 点点点
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
案例演示代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 border: 2px solid red;
9 height: 300px;
10 }
11 div#d1{
12 width: 300px;
13 /* min-height:200px;
14 max-height:200px;*/
15 height:200px;
16 background: skyblue;
17 overflow:scroll;
18 }
19 p{
20 background: seagreen;
21 width: 200px;
22 white-space: nowrap; /* 不允许换行*/
23 overflow:hidden;
24 text-overflow:ellipsis;
25 }
26 </style>
27 </head>
28 <body>
29 </div>
30 <p>木兰花·拟古决绝词柬友 纳兰性德</p>
31 <div id="d1">
32 人生若只如初见，何事秋风悲画扇？
33 等闲变却故人心，却道故人心易变。
34 骊山语罢清宵半，泪雨零铃终不怨。
35 何如薄幸锦衣郎，比翼连枝当日愿。
36 </div>
37 </body>
38 </html> 结果：