读《CSS禅意花园》 有感

1、图片用<img>标签添加到页面中，会增加页面的大小，导致页面加载需要更长的时间。可以用css background 引用图片。

1.1、若图像属于“内容”而不是“样式”的一部分，例如“公司介绍”页面中，一张CEO的照片，应用<img>标签

2、不要用表格布局，每次页面加载时，浏览器必须重新加载各种内容，并对之重绘。若用CSS，这些布局信息可缓存于浏览器中。禅意花园的作品，应用图片的代码只需加载一次。

3、外边距重叠(collapsing margin)

　　若两个元素上下毗邻且都定义了不为零的外边距，同时又没有任何内边距、边框等设定，那么两个元素之间的距离小于二者外边距之和。

　　防止外边距重叠解决方案：1：设置padding 打破生产重叠条件（禅意花园推荐）

　　另网上搜集其他解决方法如下：

1. 外层元素padding代替
2. 内层元素透明边框 border:1px solid transparent;
3. 内层元素绝对定位 postion:absolute:
4. 外层元素 overflow:hidden;
5. 内层元素 加float:left;或display:inline-block;
6. 内层元素padding:1px;

4、合理的设置字体大小

　　

4.2  使用"small"等关键字