css笔记一

在编写样式中经常遇见, 尺寸的计算.
css3中提供了一个计算函数calc(),它支持(+ - * /).
如:top: calc(50% - 30%);
注意的是在运算符前后都得添加一个空格,否则无效.(支持IE9及以上)

去掉input[type="number"]的默认样式

input[type=number] {  
    -moz-appearance:textfield;  
}  
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
}  

利用媒体查询分辨横竖屏

@media screen and (orientation:portrait) {
    /*  css[竖向定义样式]  */
    ......
}

@media screen and (orientation:landscape) {
    /*   css[横向定义样式]  */
    ......

}

去手机端点击出现的高亮框

-webkit-tap-highlight-color: rgba(0,0,0,0);  
-webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */   

css居中的方式

1. 利用伪类使元素居中

div:after{
  content:"";
  display:inline-block;
  height:100%;
  vertical-align: middle;
}

2. 利用定位

//这里要使用到css的子绝父相
div{
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}