【解疑答惑】css中经常被忽略的代码陷阱

css大家都认为是很简单东西,但是是代码就有让人头疼的时候,只是多少的问题,伴着小编走过的路,在前端多少也滚了一些坑,今天为了方便后来者,把收集到的东西跟大家分享一下,有需要的朋友可以当作参考,希望对各位盟友有帮助:

一. css 2.x code

1. 文字换行

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

2. 两端对齐

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

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

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

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

4. 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-1image:url(about:blank);

background-attachment:fixed;}

5. 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;}

6. 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;}

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

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

8. 鼠标不允许点击:

cursor:not-allowed;

9. mac font: osx平台字体优化

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

10. 省略号:

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

二. css 3 code

1. 渐变:

.a{background:-webkit-gradient(linear,left top,left bottom,from(#69bdf9),to(#4aa7e8));background:-moz-linear-gradient(top,#67bcf8,#3b96d6);background:-o-linear-gradient(top,#67bcf8,#3b96d6);background:linear-gradient(top,#67bcf8,#3b96d6);}

2.投影:

.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;

看哪个startColorstr和endColorstr,一共8位,后6位是RGB的颜色代码,前两位是16进制的

比如60%透明,就是256x0.6=154,再换算成16进制=9A background-image:-ms-linear-gradient(top, #fff, #ddd); ie10渐变 http://www.iefans.net/ie10-yulanban-css3-jianbian/

alpha透明兼容代码生成:

http://leegorous.net/tools/bg-alpha.html

透明兼容

3. 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 */   

4. 渐变

background: #bde25e;
 /* Old browsers */
background: -moz-linear-gradient(top, #bde25e 2%, #8bb31d 100%); 
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#bde25e), color-stop(100%,#8bb31d)); 
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bde25e 2%,#8bb31d 100%); 
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bde25e 2%,#8bb31d 100%); 
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #bde25e 2%,#8bb31d 100%); 
/* IE10+ */
background: linear-gradient(to bottom, #bde25e 2%,#8bb31d 100%); 
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bde25e', endColorstr='#8bb31d',GradientType=0 ); 
/* IE6-9 */
 @media screen and (max-width:1220px) and (min-width:1151px) {
    #wrapper {font-size:15px;}}

5.阻止默认事件

pointer-events:none; 

以上是小编整理的部分常用的css代码,篇幅所限,后续会陆续更新感谢盟友的阅读;

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-07-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

Android图片加载开源库深度推荐,安利Fresco1、Universal-Image-Loader 2、Picasso 3、Glide 4、Fresco

</p> 这里没有广告,这里没有跑分,数据对比Google一下比比皆是,额···那我说什么好(ノಠ益ಠ)ノ彡┻━┻。 对啊,女朋友···呸呸呸,那么就来讲一...

502
来自专栏申龙斌的程序人生

零基础学编程014:小海龟做画

在《零基础学编程012:画出复利曲线图》这篇文章中,我们使用了强大的matplotlib和numpy模块,可以用几行代码画出复杂的图形来。但对于初学者来说,里面...

3097
来自专栏小灰灰

Java 实现图片合成

图片合成 利用Java的绘图方法,实现图片合成 在开始之前,先定一个小目标,我们希望通过图片合成的方式,创建一个类似下面样式的图片 ? I. 设计思路 首先...

58710
来自专栏developerHaoz 的安卓之旅

Android Volley 源码解析(三),图片加载的实现

在上一篇文章中,我们一起深入探究了 Volley 的缓存机制,通过源码分析对缓存的工作原理进行了了解,这篇文章将带大家一起探究「Volley 图片加载的实现」,...

622
来自专栏青蛙要fly的专栏

项目需求讨论-WebView进度加载条

又到了每次的实际项目开发中的需求讨论了。这次是因为做的项目是原生内嵌WebView,所以当我们的WebView在加载网页的时候,需要有个加载进度条,当然这时候有...

963
来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

20410
来自专栏青蛙要fly的专栏

图片操作系列 —(1)手势缩放图片功能

项目开发中,大家APP开发一般都会用到上传图片,比如是上传了自己的生活照,然后在某个界面处查看上传的图片,这时候一般在这个查看详情的界面,会有手势放大缩小功能,...

841
来自专栏Android点滴积累

Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)

Android GradientDrawable使用优势:   1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环)   2. 快速实现一些圆角,渐变,阴影等...

3749
来自专栏我就是马云飞

直播间气泡效果

这个效果是之前看过的,正好是很典型的跟动画相关的例子,我这里就拿来跟大家分享一下,如果你以前看过又很熟悉动画那就可以略过,如果不是很熟悉或者没看过那...

1955
来自专栏GIS讲堂

Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示

分省市雨量站的数目通过统计表的形式在页面端展示,位置根据XY坐标信息将雨量站标绘在图上。

672

扫码关注云+社区