DIV+CSS小结

虽然现在HTML5开始发展，但是真的能支持和实现的，除了一些大的门户网站，基本上都没有，HTML5的普及度和它的宣传度远远不成正比。

所以现阶段网页的布局啊什么的还是老样子。

     这里严正声明，本文部分或者全部转自他处，有违版权，请联系本人！

1、ul:  默认的ul的margin和pading不是0，如果在导航中用到了左浮动的li，往往会把外层Div撑到，导致页面变形，应改成  ul｛margin:0px;pading:0px;｝

2、img:

①不通的浏览器的height值不同，例如IE6的height就要比实际的大------------------------------------------img｛display:block｝

②页面中最好不要用大块的背景，能平铺的要平铺，否则就加载起来会很慢，也不利于以后的优化和扩展当然也有些大的网站，现在都把背景同意放到一张图片上，然后通过

background-postion来取得背景

③最好的格式就是gif格式，即确保了背景的透明，在IE6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter。matter 的值用背景颜色的值，越相近越好，如果拿不准的话，可以使用工具，比如吸管。

3、overflow： 文本内容过多过长，比如公司的注册协议，这就要用到overflow，这时就可以在div 的style里加上-------------overflow:auto

4 、float：元素脱离文档流，会把一些div挤到页面的上下方，可以在style里加上------------clear:both

5、 DIV： 一般height属性在不同的浏览器中，会出现不同，可以在style中加上 font-size:1px;

6、id和class：当一个样式在页面中多次使用时，不要用id，要用class，id是用来给js用的，所以在页面中id只能出现一次，过多的使用，会失去样式的可重用性，对以后的页面维护也极易造成不必要的麻烦。

7、CSS：层叠样式表，用来精确定位和设置元素外观，这CSS对初学者来说，的确很繁琐，但是只要你一但会，你就会深深的爱上他。

8、DTD：如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD<DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose>

9、float：

① 元素务必指定width属性：很多浏览器在显示未指定width的float元素时会有一定bug。不管float元素的内容如何，一定要为其设置width属性。指定元素单位时尽量使用em而不是px。

 ②float元素不能指定margin和padding等属性。IE中在显示时会有一些小bug，因此不要对float元素设置margin和padding，一定要设置的话，可以在内部添加一个div来包裹，在设置这个div的margin和padding。

③float元素的宽度之和不能大于或者等于100%。

10、使用清除浮动元素：停止书写诸如<div style=”clear:both”></div>,以及element:after {content:”.”;clear:both;visibility:hidden;height:0;display:block}这些都是hacks，不是最好的做法。应该如下：
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}

为什么要用overflow:hidden，因为它具有神奇的魔力，具体解释看W3C的文档解释。

 

 11、适当使用单位：不要使用px定义字体大小，使用px定义字体大小应该是table布局时代的一种旧习惯，与之对应的是像素字体在1024*768分辨率下看起来OK，但是时代是不断变化，现在1024分辨率的占有率不断下降，这也就意味着在1920的显示器上会觉得字很小。如何解决？用em单位定义，比如font-size:1.2em，意思就是该字体是默认字体的1.2倍,在火狐和IE下相当于16px，使用em的好处是，你可以通过改变body标签或者其他任意外部标签的字体大小来控制整站的字体大小，让字体具有弹性，而用px是无法做到的，除非你使用的浏览器的缩放功能。另外字体也不应该用诸如pt、cm等单位定义，避免使用百分比，1em和100%是等效的，但是后者占用了更多的空间而且有自己的怪癖。

 

 12、Position：Float为主，Position为辅！！！如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。但是定位(position)有一个缺点，不会自适应内部元素的高度，KwooJan建议大家布局页面的时候，还是要以Float为主，Position为辅！这样你才能做出高质量的页面。