div+css是网页排版技巧

最新推荐文章于 2022-09-13 09:39:31 发布

转载最新推荐文章于 2022-09-13 09:39:31 发布 · 178 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CherryGhost/archive/2011/05/27/2059605.html

本文分享了前端开发中常见的布局与样式调整技巧，包括解决ul元素默认margin和padding问题、img元素显示差异、overflow属性的应用场景、清除浮动、高度为1px的div在不同浏览器中的表现差异、id和class的合理使用以及css链接状态样式设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是工作中总结的一些技巧，留下备用，希望对看到的人有用~~

1，ul：默认的ul的margin和padding不是0，如果在导航中用到了左浮动的li，往往会把外部的div撑大，导致页面变形，改成： ul{margin:0px; padding:0px;}

2、img：1、这里牵涉的不同浏览器的问题，ie6里显示的图片height总是要大于准确值，这里就需要我们记住下面这一点 img{ display：block}；2、页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的
优化和扩展，当然也有些大的网站，现在都尽量把背景统一放到一张图片上，用background-postion来取得背景。3、最好的格式就是gif格式，即确保了背景透明，在ie6中又不会有阴影，有时gif图片会有锯齿，这就需要我们保存成web格式，设置一下matter，matter的值用背景颜色的值越相近越好。

3，overflow：有时一些公司的注册协议都是很长，这就用到了overflow，可以把div的style里加上这个：overflow：auto

4，float：有时候一些div会挤到页面的上方，这里可能就是浮动引起的，可以加上clear：both。

5，div：height等于1px的div，在ie6中可能并不是1px，在这个div的style里加上font-size：1px;这样就ok了。

6，id和class：当一个样式在页面中多次使用时，不要用id，要用class，要使用js的时候，样式最好不要用id，因为id要留给js使用。

7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。有一点，visited与hover的顺序一定不能倒换，否则ie6中会大大的问题。

8，css编码问题：@charset "utf-8";注意这行代码，utf-8与g把gb2312是比较常用的两种编码方式。

转载于:https://www.cnblogs.com/CherryGhost/archive/2011/05/27/2059605.html