1、css背景图片和img标签的选择
若图像属于内容，而不是样式的一部分，则使用img标签。img标签利于SEO，背景图片不利于SEO。通过将内容（img标签）置于HTML页面中并使用背景图像创建样式的好处:
- 通过改进标记方法，降低了页面文件大小。
- 由于
css将被浏览器缓存，所以若是将大多数（甚至所有）的样式标记置于css中的话，浏览器将不必每次都从服务器重复获取页面样式，提高页面加载速度。 - 可读性增强
- 可维护性增强
为了尽可能的增强性能（
css加载图片可以重复class调取，img需要多次添加标签调取），可以将不需要SEO的图像全部使用背景图片。
2、外边距重叠
外边距重叠是指，若两个元素上下毗邻且都定义了不为0的外边距值，同时又没有任何内边距、边框等设定，那么这两个元素之间的距离将小于二者外边距的和。 解决方法：
- 添加垂直内边距：如
padding: 1px 0; - 采用
BFC
3、css position属性
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。relative：生成相对定位的元素，相对于其正常位置进行定位。static：默认值。没有定位，元素出现在正常的流中（标准文档流，忽略top,bottom,left,right或者z-index声明）。inherit：规定应该从父元素继承position属性的值。
4、居中显示
（1）、使用自动外边距
为需要居中的元素创建一个起容器作用的div，必须为该容器指定宽度。设置margin-left和margin-right 为auto。
div.container {
margin: 0 auto;
width: 100px;
}
此法只能水平居中，为什么不能垂直居中？auto是自动填充剩余空间，块级元素占满一行，但是其高度不会自动扩充，所以它的外部尺寸是不自动充满父元素。
（2）、使用text-align
为容器div应用text-align属性：
.container {
text-align: center;
}
container所有子孙元素都会被居中显示
（3）、负外边距解决方案
首先创建一个包含居中元素的容器，然后将其绝对定位于相对页面边缘50%的位置，再将容器的左外边距设置为负的容器宽度的一半。
.container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
扩展阅读： 学会这几种方法css居中很简单 以及另一篇 CSS实现居中的方式
5、清除浮动
引入空元素：
<div class="clear"></div>
.clear {
clear: both;
}
clear: left 用于清除左浮动，clear: right 用于清除右浮动。此处空标签div置于浮动元素之后：
<div style="float: left;"></div>
<div class="clear"></div>
其他方式：触发BFC
6、理解并选择图像文件格式
色深（color depth）是指某种图像格式包含的颜色的多少。色深用位（bit）计量，更高的色深表示将包含更多的颜色种类。例如：8位的色深只有256种颜色，而24位色深包含1600万种颜色。
（1）、GIF
GIF需要使用颜色索引来实现无损压缩，该格式的色深只允许同一张图像中最多出现256种颜色，超过256种颜色的图像仍可保存为GIF格式，但会丢失某些颜色信息--最终变成有损压缩。
GIF支持1位的透明度，完全透明/完全不透明。
支持基于桢的简单动画以及隔行扫描技术（加快图像加载速度）。
（2）、JPEG
JPEG的24位色深能够很好的表现图像的色彩、细节。有损压缩，不支持动画和透明度。支持隔行扫描。
（3）、PNG
png支持8位和24位色深。24位色深的png文件很大，但却能保证完全无损。png不支持动画，是无损压缩。支持1位和8位透明度。
web项目中的图像格式选择：
需要考虑加装速度、图像内容质量等，logo等色彩单调的小图可以使用png或gif来减少图像存储空间，一般推荐png，重内容质量的用jpg，动画gif。
高保真、复杂图像用png时，图片文件很大，不适合在web展示
7、display:none 和 visibility:hidden
display:none 会加载DOM所有内容（css不改变DOM加载行为），不占用页面空间。
visibility:hidden 会占用页面空间且具有以下特点：
visibility具有继承性，会继承父元素的visibility:hidden，但子元素重新设置visibility：visible，则子元素会显示出来。visibility：hidden不影响计时器的计数。css3的transition支持visibility属性，但不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。
8、文本的样式
font-variant：这个属性的唯一作用是将文字用略小的大写字母表示。原先大写字母保持不变，而原先小写的字母将由稍小的大写字母表示。该属性的两个值为：normal和small-caps。
p {
font-variant: small-caps;
}
text-transform：和font-variant类似，text-transform提供了更精确的字符大小写控制，可选值有capitalize、uppercase、lowercase、none。text-decoration：可选值有none、underline、overline、line-through、blink。underline会为文字添加下划线，overline显示上划线，line-through显示中划线，blink产生时隐时现效果。 一般仅在链接中使用underline，line-through一般仅用于表示已经不再相关、非事实或无效的文字，这些文字可能会很快被其他文字替代。overline--在数学中，上划线表示平均值，其他领域很少用。
