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) {50px;} td:nth-child(2) {300px;} /*css2*/ tr>td:first-child{50px;} tr>td:first-child + td {300px;}
/* 参考：http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html */
这样的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可以用在居中显示上，如
<div style="position:fixed;top:50%;left:50%;500px;height:300px;border:1px solid #333;margin-left:-250px;margin-top:-150px;">相对窗口居中显示</div>
4. ie5-11 hack
color:red ---8 9 10 11 no 5 6 7
color:red9---5 6 7 8 9 10 no 11
color:red9 ---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 > *
<html> <head> <meta charset="utf-8"> <style> body{color:red;} *{color:blue;} </style> </head> <body> 文字是红色 </body> </html>
更详细的权重规则：
1、内联样式，如: style=””，权值为1000。
2、ID选择器，如：#content，权值为100。
3、类，伪类和属性选择器，如.content，权值为10。
4、元素选择器和伪元素选择器，如div p，权值为1。
5、通用选择器（*），子选择器（>）和相邻同胞选择器（+），权值都为0。
计算总权重使用加法，比较结果。
7. 未知大小图片水平垂直居中
<div style=" 150px;height: 150px;border:1px solid #ccc; text-align: center;"> <img style="max- 100%;max-height: 100%;position:relative;top:50%;transform:translateY(-50%);" src="http://n1.itc.cn/img7/adapt/wb/smccloud/2015/03/29/142761677771928636_620_1000.JPEG"> </div>
详细参考：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问题）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>always at document bottom by create bfc</title> <style> *{ padding:0;margin:0; } html{ height:100%; background:yellow; overflow:auto; } body{ background:blue; min-height:100%; overflow:auto; position:relative; } .content{ background:green; position:relative; border:1px solid red; margin-bottom:50px; } p{ margin:10px 10px 0 10px; font-size:120px;/*change this size to watch effect*/ background:#ccc; } .footer{ background:#000; height:50px; color:#fff; position:absolute; width:100%; bottom:0px; } </style> </head> <body> <div class="content"> <p>c</p><p>c</p> </div> <div class="footer">footer - always at document bottom - use for some copyright®</div> </body> </html>
https://jsbin.com/mugeper/2/edit?html,output