CSS背景和列表

所有HTML标签都是盒子模型

div标签自定义盒子模型

class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

盒子模型组成部分：

1. 自身内容：width、height 宽高
2. 内边距： padding
3. 盒子边框： border 边框线
4. 与其他盒子距离： margin 外边距
5. 内容+内边距+边框+外边距=面积

border边框：

常见写法：

1. border:1px solid #f00;
2. border-width（边框宽度）
3. border-style:（边框样式）
4. dotted （点状虚线）
5. dashed（虚线）
6. solid（实线）
7. double（双实线）
8. border-color (颜色)
9. padding内边距：
10. padding:10px; 上下左右
11. padding:10px 10px; 上下 左右
12. padding:10px 10px 10px; 上 左右 下
13. padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
14. padding-top: 设置元素上内边距的宽度
15. padding-right: 设置元素右内边距的宽度
16. padding-bottom:设置元素下内边距的宽度
17. padding-left: 设置元素左内边距的宽度
18. margin外边距：
19. margin:10px; 上下左右
20. margin:10px 10px; 上下 左右
21. margin:10px 10px 10px; 上 左右 下
22. margin:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
23. margin-top:设置元素上外边距的宽度
24. margin-right:设置元素右外边距的宽度
25. margin-bottom:设置元素下外边距的宽度
26. margin-left: 设置元素左外边距的宽度

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

IE盒子模型width = padding+border+内容

标准盒子模型 = 内容的宽度（不包含border+padding）

背景颜色：

1. background:red;
2. backgronnd-color:red;

背景图片：

1. background:url(“images/1.jpg”);
2. backgronnd-image:url(“images/1.jpg”);

背景平铺：

1. 不平铺：background-repeat:no-repeat;
2. 水平方向平铺：background-repeat:repeat-x;
3. 垂直方向平铺：background-repeat:repeat-y;
4. 完全平铺：默认为完全平铺

背景图片定位：

1. 通过属性background-position来实现显示背景图片的位置
2. background-position取值范围：
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. ottom right
12. background-position:x y;
13. background-position:x% y%;

背景图片的大小：

通过属性background-size来设置背景图片的大小

1. length：设置背景图像的高度和宽度
2. percentage：以父元素的百分比来设置背景图像的宽度和高度
3. cover：将背景图片等比缩放以填满整个容器
4. contain：将背景图片等比缩放至某一边紧贴容器边缘为止
5. background-size取值范围：
6. background-size:x y;
7. background-size:x% y%;

背景图片的滚动：

通过属性background-attachment来设置背景图片是否随着内容的滚动而滚动

1. background-attachment:fixed; 固定，不随内容的滚动而滚动
2. background-attachment:scroll; 滚动，随内容的滚动而滚动

背景图像区域：

1. background-clip 属性：（指定背景绘制区域）
2. border-box：背景被裁剪到边框盒
3. padding-box：背景被裁剪到内边距框
4. content-box：背景被裁剪到内容框
5. background-origin 属性：（设置元素背景图片的原始起始位置）

多重背景图像：

1. background-image：url(img1.jpg), url(img2.jpg)