1.效果图：image.png

  1. Margin(外边距) - 清除边框外的区域，外边距是透明的。(盒子与外界的边距)
  2. Border(边框) - 围绕在内边距和内容外的边框。
  3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。(盒子与内部的边距)
  4. Content(内容) - 盒子的内容，显示文本和图像。
  5. width(宽度)-盒子的宽度
  6. height(高度)-盒子的高度
  7. 通常通过div标记定义盒子模型

2.边框属性(border)

设置内容 样式属性 常用属性值
边框样式 border-style:上[ 右 下 左] none 无（默认） soild 单实线 dashed 虚线 dotted 点线 double 双实线
边框宽度 border-width: 上[ 右 下 左] 像素值（px）
边框颜色 border-color:上[ 右 下 左] 颜色值、#十六进制、rgb(r,g,b) 、 rgb(r%,g%,b%)
综合设置边框 border:四边宽度 四边样式 四边颜色
圆角边框 border-radius:水平半径参数/垂直半径参数 像素值或百分比
图片边框 border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式；

3.Padding属性四个值

  1. padding:10px 5px 15px 20px;
  3. 上填充是 10px
  4. 右填充是 5px
  5. 下填充是 15px
  6. 左填充是 20px
  7. padding:10px 5px 15px;
  9. 上填充是 10px
  10. 右填充和左填充是 5px
  11. 下填充是 15px
  12. padding:10px 5px;
  14. 上填充和下填充是 10px
  15. 右填充和左填充是 5px
  16. padding:10px;
  17. 所有四个填充都是 10px

4.Margin属性

  1. margin:10px 5px 15px 20px;
  2. 上边距是 10px
  3. 右边距是 5px
  4. 下边距是 15px
  5. 左边距是 20px
  7. margin:10px 5px 15px;
  8. 上边距是 10px
  9. 右边距和左边距是 5px
  10. 下边距是 15px
  12. margin:10px 5px;
  13. 上边距和下边距是 10px
  14. 右边距和左边距是 5px
  16. margin:10px;
  17. 所有四个边距都是 10px

5.阴影属性(box-shadow)

box-shadow 属性向框添加一个或多个阴影。

  1. 语法格式：
  3. box-shadow: h-shadow v-shadow blur spread color inset;
  4. 注释：box-shadow 向框添加一个或多个阴影。
  5. 该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
  1. h-shadow
  2. 必需。水平阴影的位置。允许负值。
  3. v-shadow
  4. 必需。垂直阴影的位置。允许负值。
  5. blur
  6. 可选。模糊距离。
  7. spread
  8. 可选。阴影的尺寸。
  9. color
  10. 可选。阴影的颜色。请参阅 CSS 颜色值。
  11. inset
  12. 可选。将外部阴影 (outset) 改为内部阴影。

6.box-sizing属性

  1. 语法格式
  2. box-sizing: content-box|border-box|inherit;
值 说明
content-box 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注：border-box 不包含 margin。
inherit 指定 box-sizing 属性的值，应该从父元素继承

7.背景属性：

定义和用法

background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：

  1. background-color
  2. background-position
  3. background-size
  4. background-repeat
  5. background-origin
  6. background-clip
  7. background-attachment
  8. background-image
  9. 如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
值 描述 CSS
background-color 规定要使用的背景颜色。 1
background-position 规定背景图像的位置。 1
background-size 规定背景图片的尺寸。 3
background-repeat 规定如何重复背景图像。 1
background-origin 规定背景图片的定位区域。 3
background-clip 规定背景的绘制区域。 3
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 规定要使用的背景图像。 1
inherit 规定应该从父元素继承 background 属性的设置。 1