1. 表格 边框

*{
   padding:0;margin:0;font-family: 'Microsoft Yahei';}table{
   border-collapse:collapse;}td,th{
   font-size:12px;text-align:center;height:25px;border:1px solid #ccc;}.evenRow{
   background-color:#f6f6f6;}.oddRow{
   background-color:#fff;}.activeRow{
   background-color:#FFFFb3;}

 2. nth-child(n) 

/*css3 ie8-不支持*/td:nth-child(1) {width:50px;}        td:nth-child(2) {width:300px;}/*css2*/tr>td:first-child{width:50px;}    tr>td:first-child + td {width:300px;} /* 参考： */

 div#box>(div.one>a)*2

这样的html结构，用下面的两种css，应该用第二种

#box a:nth-child(1) {color:red;}

#box a:nth-child(2) {color:blue;}

#box .one:nth-child(1) a{color:red;}

#box .one:nth-child(2) a{color:blue;}  

需要列明层次，伪类附在最外层的列表元素上。

 3. fixed、absolute的margin

　　margin是指文档流中相对原位置的偏移，fixed、absolute的margin可以用在居中显示上，如

     
      相对窗口居中显示
     

 4. ie5-11 hack

color:red\0---8 9 10 11 no 5 6 7color:red\9---5 6 7 8 9 10 no 11color:red\9\0---5 8 9 10 no 6 7 11_color:red---6 no 7 8 9 10 11*color:red---6 7 no 8 9 10 11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}/* IE10+ */ 

more:http://yuanjianhang.iteye.com/blog/836847 

 5. table单元格强制不换行 导致td宽度设置无意义问题

假设th内字符实际撑出的宽度是500px的话，浏览器执行效果上的优先级是th{
   width:300px;} < th{
   white-space:nowrap;} < th{
   min-width:600px;}或者th{
   max-width:100px;} 也就是说，设置了强制不换行之后，再想控制单元格的宽度，就需要使用min-width或者max-width了。

6 . 优先级

    !important > inline > id > class > tag  > *

  
         文字是红色

    更详细的权重规则：

1、内联样式，如: style=””，权值为1000。2、ID选择器，如：#content，权值为100。3、类，伪类和属性选择器，如.content，权值为10。4、元素选择器和伪元素选择器，如div p，权值为1。5、通用选择器（*），子选择器（>）和相邻同胞选择器（+），权值都为0。计算总权重使用加法，比较结果。

7. 未知大小图片水平垂直居中

　　详细参考：http://youryida.sohuapps.com/demo_css/imgThumbCenter.html

8.padding/margin

　　%值，基于自身的width，不论padding-left还是padding-top；margin-top和margin-left都是基于父元素的width

9.line-height

      有三种取值：

          1.数字+常规单位(如px)

          2.百分比——基准为font-size，子元素会继承父元素计算后的值

          3.数字系数——基准为font-size，子元素会继承父元素的系数

10.text-overflow

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

 11.文字溢出显示省略号

.ov-elp {
       word-break: break-all;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}.ov-elp2 {
       //最多显示两行 多余...    white-space: normal;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}

12.flex布局中文字溢出省略号

.box{
       display: flex;    span{        width: 0; /*必须设置宽度值才会触发ellipsis*/        flex-grow:1;/*grow1来实现自适应充满父元素 权重高于width*/        word-break: break-all;        overflow: hidden;        white-space: nowrap;        text-overflow: ellipsis;    }}

 13.不论页面内容多少，footer永远document底部的需求（注释里有遇到的bfc问题）

  
                
      
      
       
c
       
c
    
      
     
      
       footer - always at document bottom - use for some copyright®
      

https://jsbin.com/mugeper/2/edit?html,output