1 背景相关属性
（背景颜色和背景图片可以同时存在，背景图片会盖住背景颜色）
background 复合属性：颜色、图片、图片的重复方式、图片的位置、是否固定
background-color 颜色
background-image 图片 url（路径）
背景图片如果比元素本身大，则只显示元素本身大小的的背景图片，从背景图片的左上角开始加载，超区的不显示，背景图片如果比元素本身小，则会水平垂直平铺，直到铺满整个元素的区域。
background-repeat repeat默认值，no-repeat不平铺，repeat-x 水平平铺，repeat-y 垂直平铺
background-position 图片的位置，值1（水平） 值2（垂直）
可以是具体的数值，正值向右向下，负值向左向上
可以是具体的方向值：Left right center top bottom center （如果水平垂直方向都市center可以缩写成一个）
可以设置百分比值
background-attachment 图片是否固定 scroll 滚动，默认值 fixed固定
2 网页中的图片
- 1 html的img的插入图片
- 2 css的背景图片
- 区别 1 背景图片不能右击图片另存为去下载图片，插入额图片可以
- 2 背景图片可以添加文字和插入图片，插入的图片不可以
- 网页中所支持的图片格式
- jpg 普通图片 png 可以支持背景透明
- GIF 可以支持背景透明和动画
- svg 放大放小不失真
3 logo的优化
以背景图片的形式添加logo图片，在这个标签中添加对应的文字
如何隐藏文字（一般用h1标题）
- 1 设置font-size：0
- 2 line-height足够大让文字溢出，overflow:hidden
- 3 height:0 ,padding-top:图片高度 ,overflow:hidden
- 4 text-indent :负值要足够大
4 精灵图（雪碧图）
将页面中有规则的小图标放在一张图片上，利用背景图片的移动性来实现，精灵图必须是以背景图片出现在页面的
精灵图的优势
1 减小图片的体积，提高页面加载速度，提高用户体验
2 减少向服务器的请求次数，减少网络带宽占有
5 精灵图的种类
- 1 水平精灵图 宽度定死
- 2 垂直精灵图 高度定死
- 3 定点精灵图 宽度、高度都定死
注意事项：不是所有的图片都可以用作精灵图，必须是背景图片，精灵图不要过大，最好不要超过100kb
6 display 元素类型的转换属性
元素的分类 （区别）
1 块级元素可以设置宽度和高度，行内元素不可以，行内元素宽高是内容的宽高
2 块级元素独占一行自上而下排列，行内元素自左向右在一排显示，宽度不够自动换行
3 块级元素和行内元素都遵循盒子模型设置，但行内元素的某些属性不能正常显示，一般块级元素作为其他内联元素的盒子使用
常用的块级元素：div h1 h2 h3 h4 h5 h6 ul ol li dl dt dd table form
常用的行内元素：span a b strong i u em s ins del sup sub img input
注意：块级元素可嵌套块级元素，但h标签之间不能相互嵌套，h标签和p标签之间不能相互嵌套。
7 元素类型的转换
- block:块元素（如果元素添加了float属性，相当于给元素添加了display：block）
- inline：行内元素
- inline-block：行内块元素，此元素支持vertical-align属性，img input select textarea
- list-item：列表元素li
- table-cell：表格元素中的td和th
- none 隐藏
- 伪类选择器 ：hover 鼠标悬停
\
