css笔记

1、id及class命名时不能以数字开头;（关于命名，确实需要注意一下，具体如何可以看鑫前辈的http://www.zhangxinxu.com/wordpress/?p=1098，里面的观点当然我并不是很赞同，对于那些数量固定的元素，自然是能一步到位便好，而如果是动态添加的话，还是用层级方便很多，毕竟css方面优化的效果并不明显，而且会使得html变得臃肿）

2、字体默认大小为16px;text-transform:uppercase（大写）/lowercase（小写）/capitalize（首字母大写）;

3、文本不换行white-space:nowrap；单词间距word-spacing；字符间距letter-spacing；

4、表格border-collapse : separate(默认) | collapse（边框层叠） | inherit；

5、垂直居中vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit；【只对行内元素有效，对块级元素无效】

6、元素轮廓outline，点击a标签（图片/文字）时，会出现虚框，消除方法：active{outline：none；}；

7、min-height和max-height用于限定overflow溢出隐藏的容器的宽高范围（img等置换元素也是其中一种）；【ie8及以下不支持】

8、background-attachment可以使得设置了overflow：scroll或者position：fixed的元素背景位置不变；

9、visibility：hidden只是把元素弄成透明的，仍然占据空间；

10、行内元素（如span）变更为块状元素（display：block），不代表它就能包含块状元素，只不过是它的表现形式变成了块状元素而已，如果这个行内元素在另一个行内元素中，那么将会把外层的行内元素分割为三行，中间一行即为定义为block的部分。块状元素内包含行内元素（文本或span等标签），声明为display：inline后会视为行内元素。块状元素内包含块状元素，声明display：inline后无反应，而若display：inline-block则会按照行内元素来处理。

11、静态定位的元素不会受到top, bottom, left, right影响，只有定义了position为fixed、relative或absolute才管用；同样z-index在正常的文档流中是无效的，另外父标签position：relative / 本标签包含浮动属性 也会导致z-index失效；

12、clip:rect(0px,60px,200px,0px)用来裁剪图片，类似的是用overflow：hidden来控制溢出隐藏；

13、设置透明度opacity:0.4; filter:alpha(opacity=40); 【 IE8 及其更早版本】   opacity会导致子元素也出现透明的情况，解决方法：1、把子元素拖出文档流，该方法仅对ie7、8有效；2、透明度改为rgba，但要ie9+；3、不要设置父子关系（最后的手段）；

14、@media 规则允许在相同样式表为不同媒体设置不同的样式；

15、before和after伪元素中 【content:string|url|counter(name)|counter(name, list-style-type)|counters(name, string)|counters(name, string, list-style-type)|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote;】

16、counter-increment:jishu; content:counter(jishu) "." counter(jishu) " "; ——该方法可以用来对标签进行排序，counter-increment是当选择器每次选取时增加1，counter-reset则是重置为0

17、属性选择器:

　　　　　　[title]含title属性，[title=hello]，[title~=hello]含title属性且值中包含hello，[title|=hello]含title属性且值以hello开始（hello是独立的单词，后面可以跟“-”），[title^=hello]含title属性且值中字符以hello开始，[title$=hello]含title属性且值中字符以hello结束，[title*=hello]含title属性且值中字符包含hello；