div+css 学习

1、DIV+CSS初学者需重视的10个简单问题与技巧

一、检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

二、检查 CSS是否正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。 CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

三、确定错误发生的位置

假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

四、 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性 确定元素边界，错误原因即水落石出。

五、float元素的父元素不能指定clear属性

MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不知道就会走 弯路。

六、float元素务必指定width属性

很多浏览器在显示未指定 width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

七、 float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float 元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和 padding）。也可以使用hack方法为IE指定非凡的值。

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

假如float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

九、 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将 全体的margin、padding设置为0、列表样式设置为none等。

十、是否忘记了写DTD？

假如无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写DTD

2、几个经典的css技巧

使用 line-height 垂直居中

清除容器浮动 不让链接折行（white-space:nowrap;）

始终让 Firefox 显示滚动条（html {overflow:-moz-scrollbars-vertical;}）

使块元素水平居中（margin:0 auto;）

删除链接上的虚线框（a:active, a:focus {outline:none;}）

3、DIV+CSS浏览器的兼容性

1. 文字本身的大小不兼容。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。 width也是一样。在ie下面如果子容器里面的高度超过了父容器的高度，内容也是会被撑大的，会导致整个页面布局乱掉。

3.使用了float：left/right；但是由于很多html代码没有规范，可能会忘记写清楚浮动，导致IE下的布局错乱。

4.HTML元素是否有拼写错误、是否忘记结束标记也会导致错乱这个主要体现在谷歌上面。

5..ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决案： 给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持