CSS技巧汇总
一直在学习着关于网页标准化的一些知识和概念，实践的虽然不是很多，在日常的工作中也总结出了不少需要注意的技巧和细节。今天抽空把 css 经常用到的一些技巧汇总一下与大家一起分享，希望可以起到抛砖引玉的作用。本篇文章会随时保持更新，如果大家有什么好的CSS技巧欢迎留言给我。
1.css布局的居中问题
主要的样式定义如下：
1 2 | body {TEXT-ALIGN: center;} #center { MARGIN: 0 auto; } |
说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，个人建议不要套在一个DIV里，可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
2.兼容多种浏览器
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
1 2 3 | #example { color: #333; } * html #example { color: #666; } *+html #example { color: #999; } |
那么显示效果在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。
3. 盒模型不同解释
1 | #main {width: 768px !important;width : 770px;} |
IE不支持声明(!important),
FIREFOX等浏览器识别出声明(!important),接受WIDTH:768PX;
IE5.X不认识声明(!important)，则接受第二次定义的WIDTH:770PX ;
IE6首先接受第一次定义的WIDTH:768PX，而接下来无法解释这个空的注释语句，因此忽略其后的定义，最终接受WIDTH:768PX。
4. CSS边界压缩问题
块级元素，未浮动的垂直相邻元素上下边界会被压缩，取其中较大的值。
浮动元素的垂直边界不压缩，且浮动元素不声明宽度，则其宽度趋向于0。
5. 清除浮动
方法一：
1 | .hackbox{display:table;//将对象作为块元素级的表格显示} |
方法2：
1 | .hackbox{clear:both;} |
方法三：
1 2 3 4 5 6 7 8 | .f_clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .f_clear {display: inline-table;} * html .f_clear { height: 1%; } .f_clear { display: block; } |
ps：最后一种是CSS2.0中的伪元素：after，和content属性一起使用，设置在元素后发生的内容，在此用作清除浮动。
6. 浮动在IE中产生的双倍距离
1 | #box{ float:left; width:100px; margin:0 0 0 100px; } |
在上面这种情况之下IE5.x和IE6会产生200px的距离。
解决办法：用display:inline; 可使浮动忽略。
这里细说一下block和inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上, 高度,宽度,行高,边距不可控制(内嵌元素);
1 | #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果。 |
7. 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。例：
HTML代码:
1 | <div id=”box”><p>p对象中的内容</p></div> |
CSS代码：
1 2 | #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } |
解决方法：在P对象上下各加2个空的div对象CSS代码：
1 | #box {height:0px;overflow:hidden;} |
或者为DIV加上border属性。
8.浮动时边界的双倍问题
IE中在CSS中将元素的FLOAT和TEXT-ALIGN的方向设为一致，则在IE中边界会被显示为声明值的2倍，解决方法：在声明里加上display:inline;
CSS代码：
1 | #box {text-align: left; float: left; margin-left: 100px;} |
HTML代码：
1 | <div id=”box”>p对象中的内容</div> |
9. 常用文档字体集定义
我一般是这样定义的：
1 | body {font:12px/18px Arial, "宋体",Tahoma, Geneva,Verdana, sans-serif;} |
请注意定义中文字体要加上引号。
英文操作系统常用字体：Verdana, Arial, Helvetica, sans-serif
10.图片不换行
可定义如下：
1 | .img{white-space: nowrap;} |
空格：不换行，可以保持图片不换行。
11.使表格边框重叠
1 | table{caption-side:bottom;border-collapse:collapse;} |
12.不同浏览器的盒模型宽度解释问题
IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：
IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；
设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而Mozilla会在宽度基础上加上这个值。
13. 表单实现较好的亲和力
fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。
label标签用于表单元素（input,textarea or select）配于for将值传递给相应的表单元素。
tabindex属性用于input,textarea等标签，给其一个编号，使用键盘上的TAB键就很容易地进入文本框中。
14.释义列表的使用
释义列表的开始标签是<dl>，每个被解释的内容开始标签为<dt>，每个解释的内容开始标签是<dd>。在<dd>标签中的内容可以是段落，回车符，图像，连接或者是其他的列表等。
15.透明FLASH的插入
1 2 3 | <object data=”media/logo.swf” type=”application/x-shockwave-flash”width=”766″ height=”148″><param name=”movie” value=”media/logo.swf” /><param name=”SCALE” value=”exactfit” /> <param name=”quality” value=”high” /> <param name=”wmode” value=”transparent” /></object> |
16.span标签的用法
SPAN标签没有特殊的意义，可以用作排版的辅助，例如：
1 | <li><span>(4.23)</span>园子的博客在上海安新家啦！</li> |
然后在css中定义span为右浮动，就实现了日期和标题分两侧显示的效果。
17.解决在xhtml 1.1中language属性非法的方法
可将language改为type或者在<head>区内加入如下代码：
1 | <meta http-equiv=”content-script-type” content=”text/javascript” /> |
18.符合标准的外部链接写法
javascript代码：
1 2 3 4 5 | <script type=”text/jscript”>function externallinks() {if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName(”a”); for (var i=0; i<anchors.length; i++) {var anchor = anchors[i]; if (anchor.getAttribute(”href”) &&anchor.getAttribute(”rel”) == “external”)anchor.target = “_blank”; } } window.onload = externallinks; </script> |
HTML代码：
1 | <a href=”http://www.yzznl.cn/” rel=”external”>园子的博客</a> |
19.一般小型企业网站样式表结构
base.css（基本共用样式）module.css（模块样式）forms.css （表单样式）mend.css（补丁样式）print.css（打印样式）
20. 首字下沉样式代码
1 | #article:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em;float:left;padding:5px 2px 0 0; color:#c00;} |
21. 一些少用的文本标签
表示已经删除的文档或段落：
1 | <del>这是已删除的文档</del> |
删除的部分作出一些添加与修改。那么时候这个标签就非常有作用了那就是插入标签<ins></ins>。例：
1 | <ins>这是插入的修改部分</ins> |
千万别忘记了给这两个标签加上两个重要的属性：cite与datetime。解释与时间。解释不用说了，只要用文字注明为什么要删除或是为什么要插入就可以了。但是这个时间需要明确一下格式。严格的格式是：YYYY-MM-DDThh:mm:ssTZD。与我们平时用的差不多但是有区别，其中T是表示时间段开始的必需字符，而TZD则是表示时区，Z是表是格林威治标准时间。一般的写法是：2008-03-25T14:26:22Z。
上下标的写法，例：
1 | <sup>我是上标</sup>,<sub>你是下标</sub> |
22. 改变有序列表的开始值
有时候我们不想让有序列表值从1开始，这个时候就会用到：
1 | <ol start=”6″> |
23. display:inline-block的用法
语义：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。支持的浏览器有：Firefox3 beta、IE8 beta、Opera、Safari。
24. min-width最小宽度的设置
min-width概述：min-width是设置对象最小宽度的样式(Style)。IE并不支持此属性。例：
1 | <div style=”border: 1px solid black; width: 10px; min-width: 150px; “> |
25.图文混排的垂直居中
很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign=”absmiddle”别无他法。记住，默认下图片就是属于inline-block，你只需简单的
1 | img {vertical-align:middle;} |
即可。
26.左右列高度自适应代码
1 | #main_l,#main_r{margin-bottom:-32767px;padding-bottom:32767px;} |
上面代码是应用负边界法来解决左右列高度自适应的方法。谢谢sypxue的提醒，已经修正。
27. 万能清除浮动
万能 float 闭合(非常实用!) 可以用这个解决多个div对齐时的间距不对，将以下代码加入CSS 中,给需要闭合的div加上 class=”clearfix” 即可。代码如下:
1 2 3 4 5 6 7 8 9 | /* Clear Fix */ .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;} .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ |
28.样式居中的写法
垂直居中：将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
水平居中： margin: 0 auto;(当然不是万能)
29.一些小总结
- 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)。
- ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)。
- 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应。
- 关于手形光标. cursor: pointer. 而hand 只适用于 IE。
30. 兼容代码:hack推荐样式
1 2 3 4 5 6 7 8 9 10 11 12 | /* FF */ .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px;} /* IE6 */ *html .submitbutton { margin-top: 21px; } /* IE7 */ *+html .submitbutton { margin-top: 21px; } |
