css杂类收集

1. css 2.x

• 文字换行

/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;

• 两端对齐

text-align:justify;
text-justify:inter-ideogra

• 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

input,button,select,textarea{ outline:none;}textarea{ font-size:13px; resize:none;}

• 去掉chrome记住密码后自动填充表单的黄色背景

• ie6: position:fixed

.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; }* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}*html{background-image:url(about:blank);background-attachment:fixed;}

• clearfix

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix{display:inline-block;}html[xmlns] .clearfix{display:block;}* html .clearfix{height:1%;}.clearfix{*zoom: 1;}.clearfix:after{clear:both;display:table;content:"”;}.clearfix{overflow:hidden;_zoom:1;}

http://www.daqianduan.com/3606.html

• seperate-table

.tab{border-collapse:separate;border:1px solid #e0e0e0;}.tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;}.tab th{background:#edf4f0;}.tab tr.even td{background:#fff;}

<table class="tab" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <th>111</th>
        <td>222</td>
    </tr>
    <tr>
        <th>111</th>
        <td>222</td>
    </tr>
</table>

• min-height: 最小高度兼容代码

.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}

• 鼠标不允许点击

cursor:not-allowed;

• mac font: osx平台字体优化

font-family:"Hiragino Sans GB","Hiragino Sans GB W3",'微软雅黑';

• 文字过多后显示省略号

.ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

2. css 3

• title 换行




• 关闭 x 符号

×

• 投影

.b{box-shadow:inset 1px -1px 0 #f1f1f1;text-shadow:1px 1px 0px #630;}
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');background:rgba(0,0,0,.6);

background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9;

• search占位

::-webkit-input-placeholder {}
::-moz-input-placeholder {}input:focus::-webkit-input-placeholder { color: transparent; }
-webkit-appearance:none;  google边框去除input[type="search"]{-webkit-appearance:textfield;} // 去除chrome默认样式
http://i.wanz.im/2011/02/04/remove_border_from_input_type_search/
http://blog.csdn.net/do_it__/article/details/6789699
line-height: normal; /* for non-ie */line-height: 22px\9; /* for ie */

• 全部浏览器的兼容代码生成 CSS 实现 textArea 的 placeholder 换行

• 阻止默认事件

pointer-events:none;

• 去掉输入框聚焦时候的白色背景

-webkit-user-modify: read-write-plaintext-only;

• input:focus时input不随软键盘升起而抬高的情况

 :focus{-webkit-tap-highlight-color:rgba(255, 255, 255, 0); -webkit-user-modify:read-write-plaintext-only;}

• 变灰 gray

html{    filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);    -webkit-filter: grayscale(1);
}

• firefox 阻止选中

-moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;

• 箭头

display:block;border:solid transparent;line-height: 0;width:0; height:0;border-top:solid #0288ce;border-width:8px 6px 0 6px;

border-style:solid; border-width:7px; border-color:transparent transparent transparent #ff7020;
position:absolute;top: 0;left: 0;border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde;

ie6 bug测试，把border-style设为dashed.

• 取消textarea右下角可拖动手柄

resize:none

• 取消chrome form表单的聚焦边框

input,button,select,textarea{outline:none}textarea{resize:none}

• 取消a链接的黄色边框

a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

• webkit 水平居中

display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center;
position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);

• 取消chrome 搜索x提示

input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration {    display: none;
}

• chrome取消默认黄色背景

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill {    -webkit-box-shadow: 0 0 0 1000px white inset;
}
autocomplete="off"

• 手机版本网页a标记虚线框问题

a:focus {outline:none;-moz-outline:none;}

• 焦点去除背景

-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
-webkit-tap-highlight-color:transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

• placeholder占位符颜色自定义

input:-moz-placeholder {color: #369;}
::-webkit-input-placeholder {color:#369;}

• IOS 禁用高亮

-webkit-tap-highlight-color:rgba(255,0,0,0.5);-webkit-tap-highlight-color:transparent; /* For some Androids */

• IOS iframe 滚动 滚动回弹特效

-webkit-overflow-scrolling:touch;overflow-y:scroll;

• 禁止选中文本

-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;

• 模糊(毛玻璃)效果1

• 模糊(毛玻璃)效果2

• 模糊(毛玻璃)逼真效果

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />

• 显示旋转加载图片，下拉加载数据

#pullDown .pullDownIcon{display:inline-block;vertical-align:middle;width:40px;height:40px;background:url(https://github.com/chalecao/chale/blob/master/pull-icon%402x.png) 0 0 no-repeat;-webkit-background-size:40px 80px;background-size:40px 80px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms}#pullDown .pullDownIcon{-webkit-transform:rotate(0deg) translateZ(0)}#pullDown .pullDownLabel{display:inline-block;vertical-align:middle;margin-left:5px;}#pullDown.flip .pullDownIcon{-webkit-transform:rotate(-180deg) translateZ(0)}#pullDown.loading .pullDownIcon{background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@-webkit-keyframes loading{    from{-webkit-transform:rotate(0deg) translateZ(0)}
    to{-webkit-transform:rotate(360deg) translateZ(0)}
}

<div id="pullDown" class="none loading">
    <span class="pullDownIcon"></span><span class="pullDownLabel">正在载入中...</span>
</div>

• 手机多终端适配 media queryweb app iphone4 iphone5 iphone6 响应式布局 适配代码

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
    .class{}
}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
    .class{}
}@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
    .class{}
}@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
    .class{}
}

• 屏蔽苹果浏览器对数字的识别Meta标签中的format-detection属性及含义

<meta content="telephone=no" name="format-detection">

• 移除HTML5 input在type="number"时的上下小箭头

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{      -webkit-appearance: none !important;      margin: 0; 
    }

    input[type="number"]{-moz-appearance:textfield;}

• 将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。

• 第二种方案：

• Firefox下：

• 在chrome下：

• HTML5手机浏览直接给一个号码打电话，发短信

<a href="tel:15222222222">移动WEB页面JS一键拨打号码咨询功能</a>
<a href="sms:15222222222">移动WEB页面JS一键发送短信咨询功能</a><!--移动web页面自动探测电话号码--><meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

• CSS判断横屏竖屏

@media screen and (orientation: portrait) {  /*竖屏 css*/} 
@media screen and (orientation: landscape) {  /*横屏 css*/}

//判断手机横竖屏状态：window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {        if (window.orientation === 180 || window.orientation === 0) { 
            alert('竖屏状态！');
        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            alert('横屏状态！');
        }  
    }, false); 
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

• rem 适配，内容太多，只贴网址

• rem自适应方案

• html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

• 移动端高清、多屏适配方案

• 通过rem布局+media-query:aspect-ratio实现移动端全机型适配覆盖

• web app变革之rem

• 手机淘宝的flexible设计与实现

• 移动端自适应方案

• 【原创】移动端高清、多屏适配方案

• 6个html5页面适配iphone6的技巧

• 关于移动端 rem 布局的一些总结

1.常用代码整理

1.1 水平居中

div {margin-left: auto; margin-right: auto; }
另外，如果你的 div还没有指定宽度（可以是相对的大小），这种 CSS居中写法也起不到应有的效果，解决办法是为这个 div指定一个width 宽度，例如： width:auto; 或者 width:50% 之类的。 
同时，你的页面类型即 document type必须声明为xhtml 。至于松散还是严格都不影响。 
这个写法也适用于图片 img和一些其他的盒状标签的 CSS居中。
最后，假如你在 IE和FireFox 两个浏览器中看起来不一样，你最好采用 text-align:center; 和 margin 两个 CSS居中一起设置的方法。例如： 
#layout  {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：首先在父级元素定义 TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于 IE这样设定就已经可以了。但在 mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV里，你可以依次拆出多个 div，只要在每个拆出的div里定义 MARGIN -RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

1.2垂直居中

一、单行内容的居中 
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置  line-height和 height ，并使两值相等，再加上  over-flow: hidden 就可以了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

优点： 
1. 同时支持块级和内联极元素 
2. 支持所有浏览器 
缺点： 
1. 只能显示一行 
2. IE中不支持 <img>等的居中
要注意的是： 
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话， overflow: hidden 一定要

方法二 ：

使用绝对定位的 div，把它的 top 设置为 50％， margin-top设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto ，这样如果 content 太多的话，就会出现滚动条，以免 content 溢出。

<div class="content">
 Content goes here</div>

#content {
 position:absolute;
 top:50%;
 height:240px;
 margin-top:-120px; /* negative half of the height */
}

优点 ：

适用于所有浏览器 
不需要嵌套标签

缺点 ：

没有足够空间时， content 会消失( 类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况 )

2兼容性整理

2.1  chrome下font-size小于 12px无效

当样式表里 font-size小于12px 时，chrome浏览器里字体显示仍为 12px

第一种（推荐）： 
Css代码 
html{-webkit-text-size-adjust:none;}

第二种： 
在chrome浏览器工具栏 选项 > 高级选项 > 更改字体和语言设置 > 语言 > 谷歌浏览器语言 设置改为 English

2.2  IE6、7下 POSITION:RELATIVE不滚动

父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。

解决办法：

给设置了overflow:auto属性的父容器也加上position:relative。

2.3  IE6下float元素换行

当非 float的元素和float 的元素在一起的时候，如果非 float元素在先，那么float的元素将被排斥  

<div>我不float
<span class="right">我 float：right</span>
</div>
也就是说，你的 span是float:right ，但是你文本还是 float:none

如果要让两者占据同一行，一般有两个解决方法 :

第一种：把 span先于文本显示；第二：把文本也设成 float。

2.4  z-index问题

当定位元素的 'z-index' 未设置时（默认为 auto），在  IE6 IE7 IE8(Q) 下将会创建一个新的局部层叠上下文。而在其它浏览器下，则严格按照规范，不产生新的局部层叠上下文。

<style type="text/css">

  body { margin:0; }

  .p1{ top:20px; height:50px; width:150px; background-color:blue;}

  .p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}

  .p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}

</style>

<div style="position:relative;" class="p1">1

    <div style="position:absolute; z-index:1;" class="p2">2</div>

</div>

<div style="position:absolute;" class="p3">3</div>

而在 IE6 IE7 E8(Q) 下，定位元素【 p1】和【p3 】都创建了新的局部层叠上下文，在同一根层叠上下文中，它们的层叠级别相同，但【 p3】在【p1 】之后，所以在 Z 轴上【p3 】比【p1】靠前显示。此时，由于【 p2】处于【p1 】的层叠上下文中，所以【 p2】在 Z 轴上要比【 p3】靠后。

在IE6 下的层级高低不仅要看本身，还要看自己的父元素是否给力：父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在 IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。

http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html

解决方法有三，1、 position:relative改为position:absolute ；2、去除浮动； 3、浮动元素添加position属性（如 relative，absolute 等）。

2.5  float问题

1. IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉；

　　 2. 3像素间距是指挨着浮动元素的文本会神奇的被踢出去 3像素，好像浮动元素的周围有一个奇怪的力场一样；

　　 3. 双倍边距bug 处理 IE6 时，另一个需要记住的事情是，如果在和浮动方向相同的方向上设置外边距 (margin)，会引发双倍边距。

2.6  haslayout引起的IE6 :hover失效

<style type="text/css">

a:hover { }

a:hover span{color:#F00;}

</style>

 <body>

<a href="#"> 鼠标经过时改变我的 <span>颜色</span></a>

</body>

在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发 a:hover的layout ，例如a:hover { display:inline-block}或者 a:hover { zoom:1}等等。

2.7  inline-block元素间间距

使用 inline-block会使除IE6/7 外的浏览器的元素之间有 3或4px 的间隔。

解决办法：

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉 HTML中的空格，自然间距就木有了。

2.8  IE6下百分比高度无效

解决：设置具体高度值

3 异步加载css执行优先级

IE8、9 下按照加载时间顺序执行，其他浏览器则按 dom节点顺序执行。

单行不换行显示

需要设置宽度/或者最大宽度

width:fdsafda
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

如果想要设计input 输入框的边框格式

需要手动添加边框 
border:1px solid #ccc
然后设置 边框的样式
border-radius:1px solid #fff