Div+CSS布局技巧

Div CSS技巧

IE分不清继承关系和⽗⼦关系的差别，全部都是继承关系。

在给你的标签疯狂加选择符的时候，别忘了在CSS⾥给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您，不要太疯狂了。

如果你给⼀个标签设置了⼀个深⾊调的背景图⽚和亮⾊调的⽂字效果。建议这个时候给你的标签再设置⼀个深⾊调的背景颜⾊。因为图⽚丢失了，也可以保持⽂字的可读性。

定义链接的四种状态要注意先后顺序： Link Visited Hover Active与内容⽆关的图⽚请使⽤background.时刻记住表现与内容分离。ul标签在Mozilla中默认是有padding值的，⽽在IE中只有margin有值。

同⼀个的class选择符可以在⼀个⽂档中重复出现，⽽id选择符却只能出现⼀次。对⼀个标签同时使⽤class和id进⾏CSS定义，如果定义有重复，id选择符做的定义有效，是因为id的权重要⽐class⼤。

⼀个兼容性调整（IE和Mozilla）的笨办法：初学可能会碰到这样⼀个情况：同样⼀个标签的属性在IE设置成A显⽰是正常的，⽽在Mozilla⾥必须要设成

B才能正常显⽰，或者两个倒过来。

临时解决⽅法：选择符{属性名：B ！important；属性名：A} 或许有时候并没有效果。你可以在搜索更多的BUG解决⽅法。如果⼀组要嵌套的标签之间需要些间距的话，那就留给位于⾥⾯的标签的margin属性吧，⽽不要去定义位于外⾯的标签的padding

li标签前⾯的图标推荐使⽤background-image，⽽不是list-style-image.绝对定位时使⽤margin值定位可以达到相对于本⾝所在位置的定，这与top，left等属性相对与窗⼝边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

如果⽂字过长，则将过长的部分变成省略号显⽰：IE5，FF⽆效，但可以隐

藏，IE6有效DIV STYLE=“width：120px；height：50px；border：1px solid blue； overflow：hidden；text-overflow：ellipsis”

table在某些⽅⾯还是有⽤武之地的，在遇到内容为数据表格时，不要对它产⽣憎恨的⼼理。

完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）table{ border-collapse：collapse； } td{border：#000 solid 1px； }

margin取负值可以在标签使⽤绝对定位的时候起到相对定位的作⽤，在页⾯居中显⽰时，使⽤绝对定位的层不适合使⽤left：XXpx这个属性。把这个层放到⼀个要相对定位的标签旁，然后使⽤margin的负值是个好⽅法。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 下再理解为 5px*/}

3.浮动 ie 产⽣的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下 IE 会产⽣ 200px 的距离display:inline; //使浮动

忽略} 这⾥细说⼀下 block 与 inline 两个元素：block 元素的特点是,总是在新⾏上开始,⾼度,宽度,⾏⾼,边距都可以控制(块元素 );Inline 元素的特点是 , 和其他元素在同⼀⾏上 , 不可控制 ( 内嵌元素 );

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同⼀⾏排列的效果diplay:table;

4 IE 与宽度和⾼度的问题 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 指定⼀个类 , 然后 CSS 这样设计： #container{ min-width: 600px; width:e-xpression(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; //这句是关键}id=\"left\">