css杂类收集
2015-10-21 00:00
429 查看
单行不换行显示
需要设置宽度/或者最大宽度 width:xxxpx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
如果想要设计input 输入框的边框格式
需要手动添加边框 border:1px solid #ccc 然后设置 边框的样式 border-radius:1px solid #fff
clearfix的实现
.clearfix{ *zoom:1; // 开启ie6,ie7的 layout效果 } .clearfix:before, .clearfix:after{ display:table; // 副作用,自定清理浮动的元素 line-height:0; content:''; } .clearfix:after{ clear:both; // 清理 both } ps: 实现原理 由于ie8+ 才兼容 :after 和:before 伪类,所以对象ie8+ 可以利用 这两个伪类,
隐藏 text 的显示
.hide-text{ font: 0/0 a; color:transparent; text-shadow:none; background-color:transparent; border:0; } // 使用方式 <div class="hide-text">fdasfdasfda</div>
将input块状显示
.input-block-level{ display:block; width:100% min-height:30px -webikt-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
关闭浏览器字体自动调整功能
html{ -webkit-text-size-adjust:100% -ms-text-size-adjust:100% } // ps: text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能. 另外在移动端 可以通过<meta name="viewport" content="width=device-width,initial-scale=1"/> 来解决方法问题。
对于line-height 的设置的建议
对于各个浏览器,对于line-height是存在区别的,对于偶数基本一致的,但是对于设置奇数之后,就会存在差异性了。 所以建议:在设置line-height的时候,尽可能设置偶数。 而对于line-height 只是对于文字有作用,对于图片是没有作用的。
对于font-size:100%的理解
对于 html{ font-size:100% } // 这样设置可以让原本存在默认字体大小的元素能够修改,并继承父级别的
文字换行
/*强制不换行*/ 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; // 通过设置outline 就可以了 } textarea{ font-size:13px; resize:none; // 通过设置 textarea 的 resize 属性就可阻止拖动 }
去掉chrome记住密码后自动填充表单的黄色背景
ie6: position:fixed 实现
.fixed-top{position:fixed;bottom:auto;top:0;}.fixed-top // ie6的实现{// 利用 position:absolute 在加上css 的 expression 实现 eval()position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
min-height: 最小高度兼容代码
.minheight500{min-height:500px; //height:auto !important; //height:500px; //overflow:visible; //}
文字过多后显示省略号
.ellipsis,.ell{white-space:nowrap; // 不换行显示overflow:hidden; // 隐藏掉 滚动轴text-overflow:ellipsis // 超过之后 使用...替换}
取消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;}
手机版本网页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;
对于 -webkit-filter 的理解
-webkit-filter:blur(5px); //模糊,此处为5像素-webkit-filter:sepia(0.5); //叠加褐色,取值范围0-1,此处表示50%的褐色-webkit-filter:brightness(0.5); //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片)-webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜-webkit-filter:invert(1); //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色-webkit-filter:saturate(4); //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大-webkit-filter:contrast(2); //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大-webkit-filter:opacity(0.8); //透明度,取值范围0~1,0为全透明,1为原图-webkit-filter:drop-shadow(17px 17px 20px black); //阴影
手机多终端适配 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;}
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*/}
水平居中
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; 就可以了。
垂直居中
一、单行内容的居中只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 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-height2. 不想毁了你的布局的话, 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 内,当用户缩小浏览器窗口,滚动条不出现的情况 )
hrome下font-size小于 12px无效
当样式表里 font-size小于12px 时,chrome浏览器里字体显示仍为 12px第一种(推荐):Css代码html{-webkit-text-size-adjust:none;}第二种:在chrome浏览器工具栏 选项 > 高级选项 > 更改字体和语言设置 > 语言 > 谷歌浏览器语言 设置改为 English
IE6、7下 POSITION:RELATIVE不滚动
父容器设置overflow:auto;子元素设置属性position:relative;在ie6、ie7中该子元素不随滚动条滚动。解决办法:给设置了overflow:auto属性的父容器也加上position:relative。
IE6下float元素换行
当非 float的元素和float 的元素在一起的时候,如果非 float元素在先,那么float的元素将被排斥<div>我不float<span class="right">我 float:right</span></div>也就是说,你的 span是float:right ,但是你文本还是 float:none如果要让两者占据同一行,一般有两个解决方法 :第一种:把 span先于文本显示;第二:把文本也设成 float。
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 等)。
float问题
1. IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉;2. 3像素间距是指挨着浮动元素的文本会神奇的被踢出去 3像素,好像浮动元素的周围有一个奇怪的力场一样;3. 双倍边距bug 处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距 (margin),会引发双倍边距。
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}等等。
inline-block元素间间距
使用 inline-block会使除IE6/7 外的浏览器的元素之间有 3或4px 的间隔。解决办法:元素间留白间距出现的原因就是标签段之间的空格,因此,去掉 HTML中的空格,自然间距就木有了。
IE6下百分比高度无效
解决:设置具体高度值
异步加载css执行优先级
IE8、9 下按照加载时间顺序执行,其他浏览器则按 dom节点顺序执行。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题