最新整理div+css标准.docx

内容页面不能出现元素的样式内容和样式要完全分离

图片如果能用属性种背景颜色代替就不要出现图片

Div的float问题（margin和padding）

Float的清除问题

最终的!

important方法

float元素的宽度之和要小于100%

float元素务必指定width属性

ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:

0;padding:

0;}

3像素文本偏移bug

常用的CSS命名规则:

头：

header　　内容：

content　　尾：

footer　　导航：

nav　　侧栏：

sidebar

栏目：

column　　页面外围控制整体布局宽度：

wrapper　　左右中：

leftrightcenter

登录条：

loginbar　　标志：

logo　　广告：

banner　　页面主体：

main　　热点：

hot

新闻：

news　　下载：

download　　子导航：

Subnav　　菜单：

menu

子菜单：

submenu　　搜索：

search　　友情链接：

friendlink　　页脚：

footer

版权：

copyright　　滚动：

scroll　　内容：

content　　标签页：

tab

文章列表：

list　　提示信息：

msg　　小技巧：

tips　　栏目标题：

title

加入：

joinus　　指南：

guild　　服务：

service　　注册：

regsiter

状态：

status　　投票：

vote　　合作伙伴：

partner

（二）注释的写法:

　　/*Footer*/

　　内容区

　　/*EndFooter*/

（三）id的命名:

（1）页面结构

　　容器:

container　　页头：

header　　内容：

content/container

　　页面主体：

main　　页尾：

footer　　导航：

nav

　　侧栏：

sidebar　　栏目：

column　　页面外围控制整体布局宽度：

wrapper

　　左右中：

leftrightcenter

（2）导航

　　导航：

nav　　主导航：

mainbav　　子导航：

subnav

　　顶导航：

topnav　　边导航：

sidebar　　左导航：

leftsidebar

　　右导航：

rightsidebar　　菜单：

menu　　子菜单：

submenu

　　标题:

title　　摘要:

summary

（3）功能

　　标志：

logo　　广告：

banner　　登陆：

login　　登录条：

loginbar

　　注册：

register　　搜索：

search　　功能区：

shop

　　标题：

title　　加入：

joinus　状态：

status　　按钮：

btn

　　滚动：

scroll　　标签页：

tab　　文章列表：

list　　提示信息：

msg

　　当前的:

current　　小技巧：

tips　　图标:

icon　　注释：

note

　　指南：

guild　服务：

service　　热点：

hot　　新闻：

news

　　下载：

download　　投票：

vote　　合作伙伴：

partner

　　友情链接：

link　　版权：

copyright

（四）class的命名:

标题栏样式,使用’类别+功能’的方式命名,如

　　.barnews{}

　　.barproduct{}

注意事项:

:

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

下面来说说IE6，IE7及FF火狐浏览器的区别和兼容方法：

1.IE7与IE6相比,有多达200多处改进,但它们都是在StrictMode下实现的,即在页首声明DocType为XHTMLTransitional,XHTMLStrict等.而在QuirksMode下,IE7和IE6别无二致。

所以为了更好的兼容，尽量声明DocType，采用StrictMode进行制作。

2.IE7支持Alpha通道的PNG图片，但是这些Alpha通道图片在IE6下还是不能正常显示的，所以还是尽量使用透明GIF图片。

3.IE7盒子模型改变了：

盒子对于"overflow"使用了"visible"默认值,所以对于子元素尺寸大于父元素尺寸时,IE7会和Firefox一样将子元素露出于父元素之外显示,而不是像IE6那样把父元素撑大了包含子元素.把页面设置成"overflow:

visible"即可。

4.设置为float的div在IE下设置的margin会加倍。

这是一个IE6存在的bug。

解决方案是在这个div里面加上"display:

inline"。

5.IE和火狐对'width'定义的不同：

Firefox中：

容器占的宽度=内容宽度+padding宽度+border宽度；

IE中：

内容宽度=您定义的容器宽度（InternetExplorer'width'）-padding宽度-border宽度

（InternetExplorer'width'则是指整个容器的宽度，包括内容，padding，border）

6.css布局的居中问题：

FF火狐里设置margin-left,margin-right为auto时已经居中,IE则设置body{TEXT-ALIGN:

center;}才行

7.FF火狐设置padding后,div会增加height和width,但IE不会,故需要用!

important多设一个height和width

8.在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:

30px!

important;margin:

28px;}

9.ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:

0;padding:

0;}

10.终结解决方法：

（1）!

important：

FF火狐和IE7对于"!

important"会自动优先解析，IE6则忽略,可用!

important为FF火狐和IE7单独设置样式，不影响IE6的显示，值得注意的是，一定要将xxxx!

important这句放置在另一句之上。

示例：

1.div{margin:

30px!

important;margin:

15px;} 

2.//在FF火狐和IE7中margin:

30px，在IE6中margin:

15px; 

3. 

（2）由于FF火狐和IE7都支持"!

important"，而二者之间也存在差异，所以有时也会出现一些小问题，针对IE7可以使用使用"*+html"，

示例：

4.#example{color:

#333;}/*FF火狐下字体颜色显示为#333*/ 

5.*html#example{color:

#666;}/*IE6下字体颜色显示为#666*/ 

6.*+html#example{color:

#999;}/*IE7下字体颜色显示为#999*/ 

7. 

CSS兼容IE和Firefox的技巧大全

1.div的垂直居中问题

vertical-align:

middle;将行距增加到和整个DIV一样高line-height:

200px;然后插入文字，就垂直居中了。

缺点是要控制内容不要换行

2.margin加倍的问题

设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:

inline;

例如：

＜#divid=”imfloat”>

相应的css为

#imfloat{

float:

left;

margin:

5px;/*IE下理解为10px*/

display:

inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离

#box{float:

left;width:

100px;margin:

000100px;//这种情况之下IE会产生200px的距离display:

inline;//使浮动忽略}

这里细说一下block与inline两个元素：

block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制（块元素）;Inline元素的特点是,和其他元素在同一行上,不可控制（内嵌元素）;

#box{display:

block;//可以为内嵌元素模拟为块元素display:

inline;//实现同一行排列的效果diplay:

table;

4IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：

#box{width:

80px;height:

35px;}html>body#box{width:

auto;height:

auto;min-width:

80px;min-height:

35px;}

5.页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把width当做最小宽度来使。

为了让这一命令在IE上也能用，可以把一个＜div>放到＜body>标签下，然后为div指定一个类,然后CSS这样设计：

#container{min-width:

600px;width:

expression（document.body.clientWidth＜600?

"600px":

"auto"）;}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。

它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{float:

left;width:

800px;}

#left{float:

left;width:

50%;}

#right{width:

50%;}

*html#left{margin-right:

-3px;//这句是关键}

＜divid="box">

＜divid="left">＜/div>

＜divid="right">＜/div>

＜/div>

7.IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：

对#layout使用line-height属性或者给#layout使用固定高和宽。

页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度;

①例如：

＜#divid=”floatA”>＜#divid=”floatB”>＜#divid=”NOTfloatC”>这里的NOTfloatC并不希望继续平移，而是希望往下排。

（其中floatA、floatB的属性已经设置为float:

left;）

这段代码在IE中毫无问题，问题出在FF。

原因是NOTfloatC并非float标签，必须将float标签闭合。

在＜#divclass=”floatB”>＜#divclass=”NOTfloatC”>之间加上＜#divclass=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可：

.clear{clear:

both;}

②作为外部wrapper的div不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:

hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性（万恶的IE啊！

）用zoom:

1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{overflow:

hidden;zoom:

1;margin:

5pxauto;}

③对于排版,我们用得最多的css描述可能就是float:

left.有的时候我们需要在n栏的floatdiv后面做一个统一的背景,譬如:

＜divid=”page”>

＜divid=”left”>＜/div>

＜divid=”center”>＜/div>

＜divid=”right”>＜/div>

＜/div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着leftcenterright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决

＜divid=”page”>

＜divid=”bg”style=”float:

left;width:

100%”>

＜divid=”left”>＜/div>

＜divid=”center”>＜/div>

＜divid=”right”>＜/div>

＜/div>

＜/div>

再嵌入一个floatleft而宽度是100%的DIV解决之

④万能float闭合（非常重要!

）

关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup],将以下代码加入GlobalCSS中,给需要闭合的div加上class="clearfix"即可,屡试不爽.

/*ClearFix*/

.clearfix:

after{content:

".";display:

block;height:

0;clear:

both;visibility:

hidden;}

.clearfix{display:

inline-block;}

/*HidefromIEMac*/

.clearfix{display:

block;}

/*EndhidefromIEMac*/

/*endofclearfix*/

或者这样设置：

.hackbox{display:

table;//将对象作为块元素级的表格显示}

９．高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin或paddign时。

例：

#box{background-color:

#eee;}

#boxp{margin-top:

20px;margin-bottom:

20px;text-align:

center;}

＜divid="box">

＜p>p对象中的内容＜/p>

＜/div>

解决技巧：

在P对象上下各加2个空的div对象CSS代码：

.1{height:

0px;overflow:

hidden;}或者为DIV加上border属性。

10.IE6下为什么图片下有空隙产生

解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img为display:

block或者设置vertical-align属性为vertical-align:

top　bottom　middle　text-bottom都可以解决.

11.如何对齐文本与文本输入框

加上vertical-align:

middle;

＜styletype="text/css">

＜!

--

input{

width:

200px;

height:

30px;

border:

1pxsolidred;

vertical-align:

middle;

}

-->

＜/style>

12.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如divid="aa"不容许重复2次,而class定义的是类,理论上可以无限重复,这样需要多次引用的定义便可以使用他.

二.属性的优先级问题

ID的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

13.LI中内容超过长度后以省略号显示的技巧

此技巧适用与IE与OP浏览器

＜styletype="text/css">

＜!

--

li{

width:

200px;

white-space:

nowrap;

text-overflow:

ellipsis;

-o-text-overflow:

ellipsis;

overflow:

hidden;

}

-->

＜/style>

14.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html

＜!

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

＜metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

＜styletype="text/css">

＜!

--

html{

scrollbar-face-color:

#f6f6f6;

scrollbar-highlight-color:

#fff;

scrollbar-shadow-color:

#eeeeee;

scrollbar-3dlight-color:

#eeeeee;

scrollbar-arrow-color:

#000;

scrollbar-track-color:

#fff;

scrollbar-darkshadow-color:

#fff;

}

-->

＜/style>

15.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:

overflow:

hidden　zoom:

0.08　line-height:

1px

16.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

＜paramname="wmode"value="transparent"/>

17.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

＜styletype="text/css">

＜!

--

div{

position:

absolute;

top:

50%;

lef:

50%;

margin:

-100px00-100px;

width:

200px;

height:

200px;

border:

1pxsolidred;

}

银杏树

苏州美肤

苏州祛斑

苏州除皱

苏州脱毛

苏州人才网

南京调查公司

南京调查公司

-->

＜/style>

CSS兼容IE和Firefox的技巧大全

（2）

2009-09-1517:

30

18.Div居中问题

div设置margin-left,margin-right为auto时已经居中，IE不行，IE需要设定body居中，首先在父级元素定义text-algin:

center;这个的意思就是在父级元素内的内容居中。

19.链接（a标签）的边框与背景

a链接加边框和背景色，需设置display:

block,同时设置float:

left保证不换行。

参照menubar,给a和menubar设置高度是为了避免底边显示错位,若不设height,可以在menubar中插入一个空格。

20.超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:

L-V-H-A

Code:

＜styletype="text/css">

＜!

--

a:

link{}

a:

visited{}

a:

hover{}

a:

active{}

-->

＜/style>

21.游标手指cursor

cursor:

pointer可以同时在IEFF中显示游标手指状，hand仅IE可以

22.UL的padding与marg