整理的一些常用的CSS知识点笔记。
1、去除button点击出现蓝框：outline:none;去除chrome浏览器下input ,textarea,button的焦点蓝色边框:input,button,select,textarea{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、去掉热区点击的边框线：οnfοcus="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">13.常用移动端meta标签<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">14.喜欢的字体font-family: Lato, "Microsoft Jhenghei", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;网站:http://colachan.com/,,,,,,http://www.wuxiaodi.com/15 background-color 渐变处理 position: relative; background-color: #0a1855; background-image: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#0a1855),color-stop(100%,#da0024)); background-image: -webkit-linear-gradient(45deg,#0a1855 0,#da0024 100%); background-image: -moz-linear-gradient(45deg,#0a1855 0,#da0024 100%); background-image: -ms-linear-gradient(45deg,#0a1855 0,#da0024 100%); background-image: -o-linear-gradient(45deg,#0a1855 0,#da0024 100%); background-image: linear-gradient(45deg,#0030FF 0,#FF5A75 100%);