网页优化布局优化、图片优化

为什么页面优化？

1. 页面扩展灵活
2. 提高页面的加载速度
3. 提高用户的体验

布局优化-高度自适应

自适应

1.宽高不写
注意:当子元素浮动时，父元素不写高度会引起高度塌陷
2.宽高写%单位
3.使用max-width/min-width/max-height/min-height

高度塌陷

清除高度塌陷的方法
1.塌陷元素加overflow：hidden
2.浮动元素后增加空标签含有clear:both样式（不建议增加多余的代码冗余，可读性不好）
3.塌陷元素增加:after{content:‘’; display:block; clear:both}

图片优化 精灵图和iconfont

css sprites (css 精灵)是一种网页图片处理技术，主要指将网页中需要的小图片集成到大图片中，这个拼接好的图叫精灵图也叫雪碧图。

为什么使用精灵图？

1.通过合成图，来减少对服务器的请求次数，从而提高页面加载速度
2.通过合成图来减少图片体积
#### 使用雪碧图的方法
1.img 标签，调整位置
2.background background-position 调整位置
3.:before :after background

图片优化 iconfont

这篇好文章是转载于：学新通技术网