读《CSS禅意花园》 有感
2015-11-03 11:01
591 查看
1、图片用<img>标签添加到页面中,会增加页面的大小,导致页面加载需要更长的时间。可以用css background 引用图片。
1.1、若图像属于“内容”而不是“样式”的一部分,例如“公司介绍”页面中,一张CEO的照片,应用<img>标签
2、不要用表格布局,每次页面加载时,浏览器必须重新加载各种内容,并对之重绘。若用CSS,这些布局信息可缓存于浏览器中。禅意花园的作品,应用图片的代码只需加载一次。
3、外边距重叠(collapsing margin)
若两个元素上下毗邻且都定义了不为零的外边距,同时又没有任何内边距、边框等设定,那么两个元素之间的距离小于二者外边距之和。
防止外边距重叠解决方案:1:设置padding 打破生产重叠条件(禅意花园推荐)
另网上搜集其他解决方法如下:
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
4、合理的设置字体大小
![](http://images2015.cnblogs.com/blog/813175/201511/813175-20151105101143102-1280751980.png)
4.2 使用"small"等关键字
1.1、若图像属于“内容”而不是“样式”的一部分,例如“公司介绍”页面中,一张CEO的照片,应用<img>标签
2、不要用表格布局,每次页面加载时,浏览器必须重新加载各种内容,并对之重绘。若用CSS,这些布局信息可缓存于浏览器中。禅意花园的作品,应用图片的代码只需加载一次。
3、外边距重叠(collapsing margin)
若两个元素上下毗邻且都定义了不为零的外边距,同时又没有任何内边距、边框等设定,那么两个元素之间的距离小于二者外边距之和。
防止外边距重叠解决方案:1:设置padding 打破生产重叠条件(禅意花园推荐)
另网上搜集其他解决方法如下:
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
4、合理的设置字体大小
![](http://images2015.cnblogs.com/blog/813175/201511/813175-20151105101143102-1280751980.png)
4.2 使用"small"等关键字