padding和margin的简写方式 顺序是按照顺时针来的
-
css子选择器的使用注意事项：
- 使用子选择器，会增加css选择符的权重，css选择符的权重越高，样式越不容易被覆盖，越容易对其他选择符产生影响。
- 除非是html结构非常稳定，尽量不要使用子选择器
- 为了保证样式容易被覆盖，提高可维护性，css选择符需要保证权重尽可能低
css sprite 是否需要取决于 对服务器的负荷是否有要求，减少http请求
css编写风格：一行式（目前采用的风格）
-
css hack
-
ie注释法：
<!--[if lte IE 9]> 假如版本小于 ie9，则xxx <![endif]--> 标签前缀：
*html属性前缀：
_width
-
a标签的四种状态的顺序：l(link) ov(visited)e h(hover)a(active)te
inline元素设置了float或者position:absolute属性后，会隐式地激活inline-block属性，既可以设置长宽-
居中
- 水平居中
- 文本，图片等行内元素的居中：父级元素设置
text-align:center - 确定宽度的块级元素居中：利用
margin:0 auto来进行居中 -
不确定宽度的块级元素居中:我比较常用的方法是设置成
inline-block，然后父元素设置text-align:center
- 文本，图片等行内元素的居中：父级元素设置
- 垂直居中
- 父元素高度不确定的文本，图片，块级元素的垂直居中
- 给父元素设置上下相同的
padding
- 给父元素设置上下相同的
- 父元素高度确定的单行文本：设置
line-height为父元素的高度 - 父元素高度确定的多行文本，图片和块级元素居中
- 父级元素设置为
display:table-cell;vertical-align:middle - 使用
position:absolute;top:50%;margin-top:-height(height为文本，图片和块级元素的高度)
- 父级元素设置为
- 父元素高度不确定的文本，图片，块级元素的垂直居中
- 水平居中
-
布局命名
-
main，sidebar，content之类的功能块最好不要设置具体样式，只是表明具体区域 - 板块的宽度一般不会任意设置，所以一般会用具体的宽度来进行命名class，比如
w7025代表该板块占据100%中的75%，为两栏布局,这两栏之间的空隙为5% - 左右浮动也抽取出来取特定的class
fr或者 fl，我一般习惯使用left和right
-
-
z-index
- 需要设置position才能激活
z-index,但是元素设置了float属性后也会隐式激活z-index - 当几个元素的z-index是一样的时候，渲染时，后出现的元素会在先出现的元素之上
- z-index可以有负值，但是如果是负值的话，鼠标无法点击到（body是0）
- 设置
margin-left（right）为负值（负边距）可以让相邻元素的位置产生重叠，后出现的元素在先出现的元素之上：
- 需要设置position才能激活
<style>
span{display: inline-block;padding: 2px 5px;background: #ddd}
.s2{margin-left: -20px;background: #f00}
</style>
<div>
<span class="s1">span1</span>
<span class="s2">span2</span>
</div>