css笔记重点

1、去除button点击出现蓝框：outline:none;

2、chrome表单自动填充去掉input黄色背景解决方案：input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}

3，图片满屏居中：外层样式：width：1920px；left：50%；margin-left:-960px;text-align:center;position:relative;font-size:0;(去掉图片的间隙)
图片上的样式：.wrapper img{width:1920px;}

4、去掉热区点击的边框线：onfocus="this.blur()"

5、网站色调变灰
<style>
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>

* 有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
<param name="menu" value="false" />
<param name="wmode" value="opaque" />

6、body { overflow-x: hidden; overflow-y: auto; }去掉横向滚动条

7、清除浮动

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


8、bootstrap中模态框禁用空白处点击关闭：

data-backdrop="static";

9，设置input placeholder的字体颜色


                input::-webkit-input-placeholder { 
                    color:#999;
                }
                input:-moz-placeholder { 
                    color:#999;
                }
                input::-moz-placeholder { 
                    color:#999;
                }
                input:-ms-input-placeholder { 
                    color:#999;
                }

10，清除select的下拉箭头



select {

  
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  
  padding-right: 14px;
}


select::-ms-expand { display: none; }
.selectArrow{
        background: url("../img/arrowDown.png") no-repeat scroll 97% center transparent;
}



11.小屏幕时隐藏横向滚动条

        html{
                overflow-x:hidden;
        }


12.meta标签

    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>

    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>

    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>

    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>

    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">

    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">

    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->

    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->

    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
   

    <!-- 添加 RSS 订阅 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 添加 favicon icon -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>


    <!-- sns 社交标签 begin -->
        <!-- 参考微博API -->
        <meta property="og:type" content="类型" />
        <meta property="og:url" content="URL地址" />
        <meta property="og:title" content="标题" />
        <meta property="og:image" content="图片" />
        <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->


    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴图标 -->
    <meta name="msapplication-TileImage" content="icon.png"/>

     <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">