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;
}
}
