随笔分类 -  CSS

关于字体 line-height
摘要：最近讨论到了line-height的问题，做了一个实验，分别测试占主流的Firefox、IE6、IE7、IE8下的line-height的算法。1.第一种情况，字体为宋体，在不设置line-height时，font-size:12px。Firefox—-字体实际高度为11px，上留白1px，下留白2px，上下所占空间为14px。IE6—–字体实际高度为11px，上留白0，下留白3px，上下所占空间为14px。IE7—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。IE8—–字体实际高度为11px，上留白0，下留白1px，上下所占空间为12px。2.第二种情况，，字体为 阅读全文
posted @ 2013-03-12 13:23 wcp_spring 阅读(754) 评论(0) 推荐(0)
三列布局设置同等高度
摘要：<div class="wrap"> <div class="aa">aa</div> <div class="bb">bb</div> </div>其中css是：.wrap{overflow:hidden;} .aa,.bb{margin-bottom:-100000px;padding-bottom:100000px;}经典的三列布局，如果两列本来的宽度不同，但是可以使用CSS设置叫他们等高 阅读全文
posted @ 2013-03-04 11:20 wcp_spring 阅读(171) 评论(0) 推荐(0)
关于vertical-align：middle使用详解
摘要：如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。就以一个404页面为例，看如何让一张图片相对于整个页面居中，如下图：这是一个404页面，里面就只有一张图片，点击图片可以回到首页，而且这个图片是相对于整个页面居中的，无论是水平还是垂直（PS：这可算是我做404页面最为习惯的一种懒人做法了，越简单越好，要想好看的话，直接用photoshop做一张好看一点的图片就好了～）。接下来看一下它的html代码:123456789101112<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Tr 阅读全文
posted @ 2013-03-04 11:16 wcp_spring 阅读(6930) 评论(0) 推荐(0)
CSS clip:rect矩形剪裁
摘要：CSS中有一个属性叫做clip，为修剪，剪裁之意。利用clip属性达到隐藏页面元素效果：View Code.hidden{ position:absolute; clip: rect(1px 1px 1px 1px); }clip：rect(top right bottom left).clipCss{clip:rect(30px 200px 200px 20px)}如果left >= right或者bottom <= top，则元素会被完全裁掉而不可见，即“隐藏”.clip:rect矩形剪裁只能作用于position:absolute的元素上。应用:img标签下的CSS S... 阅读全文
posted @ 2013-01-05 21:33 wcp_spring 阅读(220) 评论(0) 推荐(0)
CSS技巧
摘要：1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为 阅读全文
posted @ 2012-12-19 10:58 wcp_spring 阅读(143) 评论(0) 推荐(0)
转载——web前端相关资源总结
摘要：前端牛人博客：张克军、阮一峰、拔赤（李晶）、拔赤（李晶）2、张鑫旭、梦想天空、阿当、泽飞、刘杰（嗷嗷）、为之漫笔（李松峰）、goddyzhao、hax的技术部落、周爱民、随网之舞、子鼠、司徒正美、justin、西瓜地、冰山一角、beforweb、justjavac、牛魔王、玉伯、玉伯2。PS：这些牛人大部分都是国内前端开发领域顶尖的人物，而且这些人的博客中有很多友情链接，可以让你找到更多的牛人。国外博客：john Resig、Douglas Crockford、Nicholas C. Zakas、steve Souders、Eric Meyer、Dmitry Baranovskiy、dmitr 阅读全文
posted @ 2012-12-15 22:41 wcp_spring 阅读(187) 评论(0) 推荐(0)
CSS sprite真相
摘要：CSS sprite真相是background-position,其实就是只是请求一张设计好的图片，然后通过位置来调控它该显示的位置。另外，并必须设置显示该图的盒子，否则会出现多余的图片。并且使background-repeat:no-repeat;详细请阅读： http://www.cnblogs.com/tiwlin/archive/2009/09/15/1567053.html 阅读全文
posted @ 2012-12-15 22:23 wcp_spring 阅读(134) 评论(0) 推荐(0)
IE6下select总是在最上层的解决办法！
摘要：IE6下select总是在最上层的解决办法！在ie6下，我们使用select的时候，会发现不管对上层的div的z-index给多大的值，select总是要从下面冒出来，在网上找了一下，主要解决方法有两种：1，通过iframe遮盖select。2，通过js控制select的显示和隐藏，不过当div只是遮住select的一半时，整个都会隐藏，不适合一些情况。我们今天要解决的是通过iframe遮盖select。1，iframe可以遮盖select2，div不能遮盖select3，如果让iframe遮盖select，那么div还没有遮盖iframe的时候，iframe已经把select遮盖住了，这时s 阅读全文
posted @ 2012-12-10 21:15 wcp_spring 阅读(391) 评论(0) 推荐(0)
实现div在整个页面中居中
摘要：<div id="bg"></div><style type="text/css"> #bg{width:200px;height:200px;top:50%;left:50%;position:absolute;margin-left:-100px;margin-top:-100px;}</style>解释：首先设置div的左上角在整个页面的50%处，然后再向上移动他宽度和高度的一半即可实现。 阅读全文
posted @ 2012-10-04 21:30 wcp_spring 阅读(554) 评论(2) 推荐(2)
CSS 清除浮动的方法
摘要：1、在元素内添加一个元素，一般添加div，并且设置属性为clear:both;弊端在于增加了无意义的结构元素2、设置元素的overflow属性为auto，即可以清除浮动，又不用增加无意义的结构元素。（另外为了兼容IE6，添加上了zoom:1;）附录①3、使用after伪对象清除浮动，使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空。.clearfix:after {visibility:hidden;display:block;font-size:0;content:" 阅读全文
posted @ 2012-09-26 22:39 wcp_spring 阅读(171) 评论(0) 推荐(0)
CSS hack
摘要：针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!1、!important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) （另外必须在html开头加上doctype）2、*+html和*html *html只有IE6能认出来 *+html只有IE7能认出来 例如：#inn{ background-color:silver; } *+html #inn{ background-color:green; } *html #inn{ background... 阅读全文
posted @ 2012-09-20 16:42 wcp_spring 阅读(196) 评论(0) 推荐(0)