两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。
1、设置 placeholder属性：
// firefox input::-moz-placeholder { color: red; font-size: 18px; } // IE input:-ms-input-placeholder { color: red; font-size: 18px; } // chrome input::-webkit-input-placeholder { color: red; font-size: 18px; }
-webkit- )；placeholder 的前面没有 input- ；:: 两个冒号，而IE则是一个 : ;
2、select 标签去掉小三角的css (IE中待发掘)：
// chorme
-webkit-appearance: none;
// firefox
-moz-appearance: none;
3、去除input[type=number]右边的spinners（移动端）
input[type=number] 通常用在移动端设备上，浏览器会识别number输入类型，然后改变数字键盘来适应它。但是它会出现spinners，一般不需要它。去掉spinners的css如下：
// firefox input[type=‘number‘] { -moz-appearance:textfield; } // chrome input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
4、去除点击 a链接或者通过Javascript定义的可点击元素的蓝色边框（移动端）， 将其设置为透明
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
5、webkit中去掉滚动条的宽度
webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式
::-webkit-scrollbar { width: 0; }
同样的，还可以改变滚动条的样式，参考：http://www.xuanfengge.com/css3-webkit-scrollbar.html
6、使用 :not() 比如去掉一排div中最右边div的右边框
.nav li:not(:last-child) { border-right: 1px solid #666; }
而不用通过两次来控制
.nav li { border-right: 1px solid #666; } .nav li:last-child { border-right: none; }
7、 继承 box-sizing，让 box-sizing 继承 html：
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
8、禁用鼠标事件，设置了以后就不能用鼠标点击了
pointer-events: none;
9、用calc()和百分比 给元素设置动态的值：
/* 案例1 */ .simpleBlock { width: calc(100% - 100px); } /* 案例2 */ .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px); }
10、用flex的时候，想要保证间隔相同，又要使两边贴边，那么试试 justify-content: space-between
.list { display: flex; justify-content: space-between; }
11、当a标签无内部文本，却又想显示其超链接 href 属性
a[href^="http"]:empty::before { content: attr(href); }
12、隐藏元素的5中方法：
Opacity：设置一个元素透明度为0。它不改变元素的边界框，意味着将 opacity为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
.hide { opacity: 0; }
Visibility：将它的值设为 hidden 。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。
.hide { visibility: hidden; }
如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素，只要将那个元素的 visibility 显式设置为 visible 即可，同时也可以设置平滑的过渡动画。
Display：将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。被隐藏的元素不占据任何空间，该元素直接打用户交互操作都不可能生效。
.hide { display: none; }
请注意，1、通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM 来操作它，就像操作其他的元素
2、任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效
Position：设置很大的值，position不影响布局且可以直接交互（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互）。
.hide { position: absolute; top: -9999px; left: -9999px; }
Clip-path：隐藏元素的另一种方法是通过剪裁它们来实现，元素自身不再显示，它也依然占据本该占据的大小 参考：http://codepen.io/SitePoint/pen/YWXgdW/
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
13、清除浮动：（由于浮动带来了高度塌陷，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象））
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:"XXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; } .clearfix {*zoom:1;}
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; } .clearfix { *zoom:1; }.
新版清除浮动
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix:after { *zoom:1; } /* For IE 6/7 (trigger hasLayout) */
14、在可点击的项目上 手型
a[href], input[type=‘submit‘], input[type=‘image‘], label[for], select, button, .pointer { cursor: pointer; }
15、位置宽高的水平和竖直居中
/*display:table-cell配合text-align:center和vertical-align:middle*/ .container{ width: 600px; height: 600px; background: #eee; display: table-cell; text-align: center; vertical-align: middle; } .center{ background: blue; }
/*transform*/ .container{ width: 100%; height: 400px; background: #eee; position: relative; } .center{ background: blue; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/*flex+justify-content: center;+ align-items: center;*/ .container{ width: 100%; height: 400px; background: #eee; /* flex 布局解决水平居中 */ display: flex; justify-content: center; align-items: center; }
原文：http://www.cnblogs.com/faith3/p/6257595.html