1、盒子模型

所有的html元素都可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用的，它包含：外边框(margin)、边框(border)、内边框(padding)和实际内容(centent)
10.盒子模型box model - 图1
如上图，如果把把盒子模型看作是生活中的快递，那么内容就是我们购买的实物，内边距就是泡沫，边框就是快递盒子，外边框就是两个盒子在快递架之间的间隙

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒子模型</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: green;
  12.             /* 内边距，上下左右都是50px */
  13.             padding: 50px;
  15.             /* 内边距，上下50px 左右10px */
  16.             padding: 50px 10px;
  18.             /* 内边距，上50px 右10px 下30px*/
  19.             padding: 50px 10px 30px;
  21.             /* 内边距，上50px 右10px 下30px 左20px*/
  22.             padding: 50px 10px 30px 20px;
  24.             /* 边框，第一个参数是边框线条宽度，第二个参数是线条类型，第三个参数是线条颜色  */
  25.             border: 1px solid red;
  27.             /* 外边距，上下左右都是50px */
  28.             margin: 50px;
  30.             /* 外边距，独立设置各个方向10px */
  31.             margin-top: 10px;
  32.             margin-right: 10px;
  33.             margin-bottom: 10px;
  34.             margin-left: 10px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  40.     <div>
  41.         我是内容
  42.     </div>
  44. </body>
  45. </html>