tips之css

CSS3 :not()选择器

  :not(p)    //设置非 <p> 元素的所有元素的背景色：
  {  background-color: #ff0000; }
  
  :not(:last-child){.....}

自定义超出N行用...代替
.ellipsis-row(n){
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:n;
-webkit-box-orient:vertical;
}

img 水平 垂直居中

#music > img{
       width: 80%; 
       left: 0; top: 0; bottom: 0; right: 0; 
       position: absolute; margin: auto;
}

还有就是，position:absolute; top:50%; margin-top:-XXXpx; (XXX表示图片高度的一半)

禁止用户选中网页上的内容

• IE及Chrome下的方法一样，在标签（body）上，使用 onselectstart="return false"

• Firefox 下，控制 css: body {-moz-user-select: none;}

** 解决中英文两端对齐**

ox.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");

出处：http://www.zhangxinxu.com/wordpress/2015/08/chinese-english-same-padding-text-justify/

修改input placeholder颜色

 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } 
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } 
 ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
  :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } 

Safari下 菜单条 自动fix属性

 position: -webkit-sticky; 
 z-index: 100; 
 top: 0px; 
 left: 0px;

媒体查询

  @media screen and (width:800px){.....}
  @import url(example.css) screen and (width:800px);
  <link media="screen and (width:800px)" rel="stylesheet" href="example.css">

如何让contenteditable元素只能输入纯文本

原文地址：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/

利用全浏览器都支持的contenteditable
模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果，但是呢，有个很大的问题就是HTML内容可以直接被粘贴进去

一个div元素，要让其可编辑，也就是可读写，contenteditable属性是最常用方法，做前端的基本上都知道。但是，知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。

主角亮相：user-modify.
支持属性值如下：
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;
user-modify: read-write-plaintext-only;

其中，write-only不用在意，当下这个年代，基本上没有浏览器支持，以后估计也不会有。read-only表示只读，就是普通元素的默认状态啦。然后，read-write
和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容。

** contenteditable的属性：**
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"
别问我，我也不知道"events"和"caret"是干什么用的，嘿，但是"plaintext-only"我是知道的，可以让编辑区域只能键入纯文本。这里就不需要demo了，直接下面的框框，大家可以试试，看看能不能搞富文本。
<div contenteditable="plaintext-only"></div>

contenteditable="plaintext-only" 和CSS只的-webkit-user-modify: read-write-plaintext-only一样，目前仅仅是Chrome浏览器支持比较好的。

3D

• perspective （ perspective的中文意思是：透视，视角！）

perspective
属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

CSS3 3D transform的透视点是在浏览器的前方！

  -webkit-perspective:800px; 
  //子元素获得3D元素支持，这里是设置子元素距离 视图的位置

• backface-visibility 属性

     div{
      backface-visibility:hidden; /* 表示不面向屏幕时隐藏 */
      -webkit-backface-visibility:hidden; /* Chrome 和 Safari */
      -moz-backface-visibility:hidden; /* Firefox */
      -ms-backface-visibility:hidden; /* Internet Explorer */
      
      /* 加上旋转180° 背向用户。hidden表示背向用户*/
      transform:rotateY(180deg);
      -webkit-transform:rotateY(180deg); /* Chrome and Safari */
      -moz-transform:rotateY(180deg); /* Firefox */
    }
  

• transform-style:perserve-3d 支持子元素3D效果

• transform: translate(0px,0px) rotateY(0deg) 定义位移以及沿着Y轴旋转

• transition : property duration timing-function delay;
  • property 规定设置过渡效果的css属性的名称。
  • duration 规定完成过渡效果需要的多少秒或毫秒
  • timing-function 规定速度效果的速度曲线 默认ease
  • delay 定义延迟多久执行 默认0

使移动端滑动不出滚动条及安卓回弹效果(less)

  .list{   
          overflow:hidden;
          overflow-x: scroll; 
          white-space: nowrap;
          -webkit-overflow-scrolling: touch;
          -moz-overflow-scrolling: touch;
          -o-overflow-scrolling: touch;
          -ms-overflow-scrolling: touch;
          overflow-scrolling: touch;
          &::-webkit-scrollbar {
            display:none;
          }
  }