day10

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 鼠标悬停