10个非常有用的CSS技巧
1. 将网页或元素居中
HTML：
<div class="wrap">
</div><!-- end wrap -->
CSS：
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
HTML：
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
CSS：
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End&nb
相关文档：
宽度自适应的div+css的BOX
参考:
http://space.cnblogs.com/group/topic/3617/
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/ 一、效果： 二、素材： 三、代码： <style type="text/css">
.box{}
.box .box_tit{position:rela ......
1.定位的定义
CSS中定位用position:static|relative|absolute|fixed来实现
static:1.正常流显示；2.不能通过z-index进行层叠分级；3.可设置width,height；4.设置top,right,bottom,left无效
relative:1.不脱离文档流，参考自身的静态位置，通过top,right,bottom,left进� ......
1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用() ......
<div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同
fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,
要解决这一个矛盾,可以利用!imp ......
1.id选择器
id选择器的命名应坚持体现文档的结构和位置。
如:#header、#footer、#left 等
2.class选择器
class选择器的命名应该体现名称的样式描述性。
如：.red、.underline 等
3.对于模块的外围结构元素最好用id属性，内部元素可以定义class属性，
因为外围的结构一般式唯一的。而内部的元素可能会出现重复。
另� ......
