简单css

1.省略号    
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
多行：
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 3; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
2.对齐：
   text-align: justify;
   text-justify:inter-ideograph;/*ie*/
3.清除浮动
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
4.首行缩进
text-indent:2em;
5.解决高度自适应问题
http://jsfiddle.net/luin/25BbH/7/
6.placeholder
.my-error::-webkit-input-placeholder { color: #e1e1e1; }
/* 火狐浏览器 */
.my-error::-moz-placeholder { color:#e1e1e1; }
7.渐变
圆角盒子：.box{    -moz-border-radius: 5px 5px 5px 5px;    -webkit-border-radius: 5px 5px 5px 5px;    -o-border-radius:5px 5px 5px 5px;    border-radius: 5px 5px 5px 5px;}
2
阴影盒子：.box{     -moz-box-shadow:5px 5px 10px gray;     -webkit-box-shadow:5px 5px 10px gray;     -o-box-shadow:5px 5px 10px gray;     box-shadow:5px 5px 10px gray;}
3
线性渐变:.box{    background-color: #f3f3f3;    background: -webkit-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);//代表从上到下，从白到蓝的渐变    background: -moz-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);    background: -o-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);    background: linear-gradient(to bottom,#F8F8F8 0,#eeeeee 100%);}
4
放射性渐变:.box{    background-color: #f3f3f3;    background: -webkit-radial-gradient(circle,white,blue);//代表圆心是白色，然后逐渐的过渡到圆周的蓝色    background: -moz-radial-gradient(circle,white,blue);    background: -o-radial-gradient(circle,white,blue);    background: radial-gradient(circle,white,blue);}
5
透明盒子：1)使用rgba()函数：接受4个参数，分别代表red、green、blue中的三个值，取值范围是0-255，最后一个值是alpha不透明度      #div{        background:rgb(170,240,0);         background:rgba(170,240,0,0.5);       }2)使用opacity      #div{           background:rgb(170,240,0);            opacity:0.5;           filter:alpha(opacity=50);      }
6
文字阴影：.demo1 {   text-shadow: red 0 1px 0;}text-shadow: X-Offset Y-Offset Blur ColorX-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。

7.mouseout触发内部元素事件
在onmouseover时先进行如下判断，结果为true时再执行方法体：
 $("#popFormDiv").mouseover(function () {
 var s = event.fromElement || event.relatedTarget;
 if (!this.contains(s)) { $(this).show("slow"); } 
 });

在onmouseout时先进行如下判断，结果为true时再执行方法体：
$("#popFormDiv").mouseout(function () {
var s = event.toElement || event.relatedTarget;
if (!this.contains(s)) { $(this).hide("slow"); }
});
8.加快网络加载速度
　　加快网页的打开速度，有三个途径：一是提高网络带宽，二是用户在本机做优化，三是网站设计者对网页做一定的优化。
　　以下是一些处理方法：
优化图片，使用恰当的图像格式；
优化CSS；
减少http请求（去除一些不必要的对象、将临近的两张图片合成一张、合并CSS）
去除不必要加载项
有些内容可以静态化就将其静态化，以减少服务器的负担
统计代码放在页尾
9.placeholder
https://segmentfault.com/q/1010000000397925
10.calc

-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2); 
width: calc(100% - (10px + 


11.css精灵

    background: url(/Assets/CBG/img/hw1_sprite.png) no-repeat 0 -70px;
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    content: "";
    top: 8px;
    left: 8px;


12.
一：CSS判断横屏竖屏
写在同一个CSS中




@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}
分开写在2个CSS中


竖屏

横屏

二：JS判断横屏竖屏

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态！');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态！');
}
}）


如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。