css一些小技巧收集(未完待续)

1、去除谷歌浏览器默认的自动完成的淡黄色背景
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


2、在火狐浏览器下禁止用户选择文字

-moz-user-select:none;

3、outline: none;去除边框边缘外围突出的线

4、background-origin: border|paddding|content

   border: 从border区域开始显示背景

   padding: 从padding区域开始显示背景

   content: 从content区域开始显示背景

5、关于上下边距叠加

  5.1、对于块级元素，未浮动的垂直相邻元素的上边界和下边界会被压缩

  5.2、对于浮动元素，边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0

6、css简化，颜色缩写

  类似于 ： #000000 可缩写为 #000

            #00ff00 可缩写为 #0f0
7、文字超出宽度显示省略号
  .overtext {
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
  }
8、解决ie下点击a链接出现虚框
 a:focus {
   outline: none;
  }
9、有时候，在同一行的文字，由于采用字体种类不一样，或修饰样式不一样，而导致其字体尺寸，即显示大小不一样
   整行文字看起来就显得杂乱。此时需要使用css3的属性标签font-size-adjust.
  font-size-adjust: number//为字体序列中的所有字体强迫指定同一尺寸
10、关于margin的设置
 10.1、行内元素的margin设置
    行内元素的margin是两个元素margin之和
 10.2、块级元素之间的margin设置
     设置块级元素之间的上下margin会出现叠加，左右margin不会。
     两个换行块级元素之间的距离不再是margin-bottom和margin-top的和，而是两者中的较大者。
 10.3、父子块之间的margin设置
    当一个div块包含在另一个div块中间时，二者便会形成一个典型的父子关系。其中子块的margin设置
    将会以父块的content为参考。
 10.4、图片垂直居中
      
  
  

          
   
   
      
  
  
      父元素样式：
        .container {
            display:table-cell;
            vertical-align:middle;
            width:400px; 
            height:500px;
            text-align:center;
            border:#CCC 1px solid;
        }
      注意：
         当container的position值不是默认的static时，这个垂直居中就没有效果了。
       可以采用以下样式:
       img {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
       }
       或者：
       img {
         width: 100px;
         height: 100px;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-top: -50px;
         margin-left: -50px;
      }
11、设置网页灰度

-webkit-filter: grayscale(75%) contrast(1.3);
filter: grayscale(75%) contrast(1.3);
12、设置背景模糊
filter: blur(5px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
12、去除iphone手机上input的边框
 outline: none;
    -webkit-appearance: none; /*去除系统默认的样式*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/