总结一些css技巧（个人习惯）

1、html,body{font-size:62.5%}

    px改为rem相对单位，利于不同屏幕的适配

2、css空心三角(方向自行调整)：

.sanjiao{
  position: relative;
  height: 0px;
  width: 0px;
  border-top: 90px solid transparent;
  border-right: 100px solid black;
  border-bottom: 100px solid 
  transparent;
}

.sanjiao:after{
  content: '';
  position: absolute;
  top: -89px;
  left: 2px;
  border-top: 89px solid transparent;
  border-right: 99px solid #FFFFFF;
  border-bottom: 99px solid transparent;
}

3、清除浮动:

.parent_node{zoom:1;}
.parent_node:after{
   clear:both;
   content:'.';
   display:block;
   width: 0;
   height: 0;
   visibility:hidden;
 }

4、修改input placeholder样式：

input:-moz-placeholder, textarea:-moz-placeholder {   
/* Mozilla Firefox 4 to 18 */   
color: #666;   
}   
input::-moz-placeholder, textarea::-moz-placeholder {   
 /* Mozilla Firefox 19+ */   
color: #666;   
}   
input:-ms-input-placeholder, textarea:-ms-input-placeholder {   
 /* Internet Explorer 10+ */   
color: #666;   
} 

5、禁止文字被选中：

moz-user-select: -moz-none; 
-moz-user-select: none; 
-o-user-select:none; 
-khtml-user-select:none; 
-webkit-user-select:none; 
-ms-user-select:none; 
user-select:none;

6、文本不换行加省略号：

.p{
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }

7、文本换行：

.p{
  word-break:break-all;
  word-wrap:break-word;
 }

8、box-sizing的使用:

     目的：还原盒子真实的大小（width，height）

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

9、图片与文字对齐：

img{margin:0,3px -3px,0}

10、复选框，单选框与文字对齐：

vertical-align:-2px;

11、水平居中：

       对于行内元素，行内块元素：text-align:center;

       对于块元素：margin:0 auto;

       对于所有（弹性布局）：justify-content：center；

12、垂直居中：

       文字垂直居中：line-height和height，

       多行文字居中：

.parent{
 display:table-cell;
 vertical-align:middle;
}
span{display:inline-block}//多行文字包含在span内，使用
换行

       对于行内元素，行内块元素：

.parent{
 display:table-cell;
 vertical-align:middle;
}
.child{
  vertical-align:middle;
}

       对于块元素：

.parent{
 position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:"height值一半的负值"
  margin-left:"width值一半的负值
}

    对于所有（弹性布局）:

.parent{
 display:flex;
 align-item:center;
}
.child{
  flex:none;
}

13、高布局（适合论坛页面：左边头像，右边高度不确定由盒子内容撑开，但两者高度最大者决定）：

.img-box{
 display:table-cell;
 vertical-align:middle;//垂直居中
 text-align:center;//水平居中
}
.text-box{
 display:table-cell;
}

14、header和footer布局（flex）

    
HEADER
    
MAIN
    
FOOTER

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 auto;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
}

更多方法： 点击打开链接

15、input图片背景：

       结合padding

16、css3特性：

       文字渲染（text-decoration）

div { 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
}

       多列布局

.multi_column_style{ 
-webkit-column-count: 3; //3列
-webkit-column-rule: 1px solid #bbb; //间隔条样式
-webkit-column-gap: 2em; //间隔距离
} 

     渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));//线性渐变0% 0%-100% 0%从左到右

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),

       color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));//复杂线性渐变从左到右33%是绿色，66%是橙色

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));//径向渐变模拟灯光幕下 50 50 50是圆心和半径，50 1 0 起始圆心漂移

   反射

.classReflect{ 
-webkit-box-reflect: below 10px //反射元素在下方10px地方
-webkit-gradient(linear, left top, left bottom, from(transparent), 
     to(rgba(255, 255, 255, 0.51))); //配合渐变做出水中倒影效果
}

  background

    设置背景覆盖范围

* background-clip: border-box; 背景从 border 开始显示 ;

* background-clip: padding-box; 背景从 padding 开始显示 ;

* background-clip: content-box; 背景显 content 区域开始显示 ;

* background-clip: no-clip; 默认属性，等同于 border-box;

   设置背景位置（与background-position配合使用）

* background-origin: border-box; 从 border. 开始计算 background-position;

* background-origin: padding-box; 从 padding. 开始计算 background-position;

* background-origin: content-box; 从 content. 开始计算 background-position;

    设置不同盒子内的背景

* background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）

* background-break: bounding-box; 把盒之间的距离计算在内；

* background-break: each-box; 为每个盒子单独重绘背景。

    多背景

div { 
background: url(src/zippy-plus.png) 10px center no-repeat,
 url(src/gray_lines_bg.png) 10px center repeat-x; 
}

css3盒模型

    水平排列

.boxcontainer { 
               width: 1000px; 
               display: -webkit-box; 
               display: -moz-box; 
               -webkit-box-orient: horizontal; 
               -moz-box-orient: horizontal; 
           } 
            
           .item { 
               background: #357c96; 
               font-weight: bold; 
               margin: 2px; 
               padding: 20px; 
               color: #fff; 
               font-family: Arial, sans-serif; 
           }

    弹性布局：

      点击打开链接

更多css3特性：

      点击打开链接