学习WEB标准总结的一些CSS/XHTML知识小结第1/3页
编程学习 2021-07-05 11:30www.dzhlxh.cn编程入门
制作网页过程中，总会遇到一些CSS/XHTML的各种问题，狼蚁网站SEO优化大体的总结了下
1、很多兼容性问题，是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义
* { padding：0; margin:0;}
或者
ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;}
2、关于布局，可以看dreamweaver cs3里的模板怎么写的，它的写法是最好的写法。大的布局，可以直接使用 dreamweaver cs3 里默认的那些模板。 然后去掉注释，就能用了。
3、适当的使用margin/padding，在调整box（盒子）中，元素位置的时候，使用box（盒子）的padding比较好。而不要使用，box内元素的margin。
原因是，box内元素使用margin的时候，会对box的margin产生影响，产生错位。
但在使用padding的时候注意一点： 比如本来 width:100px 的box,如果设置了padding-left:20px的话，那就要把width减去20px。
4、一个box，设置了border后，要把width减去border的粗。 比如width:100px 的box，左右有1px的边，那应该设置box width为98px。
5、在添加box的时候，能不给width和height的，尽量不给。
height可以靠内部的元素去撑开。
width不设置的话，一般默认就是100%宽。
6、同时给一个box设置背景图片和背景颜色的方法是，先设置背景图片，再设置背景颜色，代码如下：
.bg {background:url(/images/blbian.gif) no-repeat}
.style1 {width:100px;height:100px;background-color:#ebf1e5;}
<div class="style1 bg"></div>
7、当float:left之类的东西写的太多，影响到周围，或者狼蚁网站SEO优化的元素的时候，尝试使用clear:both去清除。
<br class="clearfloat" />
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
8、在进行如下设置的时候<div style="height:3px"></div>，会产生兼容性问题。 ie6会出问题，你会发现，box不是3px高。
需要如下设置： font-size:1px; 才不会有问题。参考 dw cs3模板中 clearfloat中的写法，还会加上line-height:0px。不过我发现不加也是可以的。但加会更正规。
9、在给单行文字设置height的时候，要同时设置line-height。不然会有兼容性问题，文字会有小的错位。
10、使用ul li列表的时候，一定要给ul设置 list-style-type: none; 不然会产生兼容性问题。 ff下会出现原点，而ie下经常看不到。
代码如下:
* { padding：0; margin:0;}
或者
代码如下:
ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;}
2、关于布局，可以看dreamweaver cs3里的模板怎么写的，它的写法是最好的写法。大的布局，可以直接使用 dreamweaver cs3 里默认的那些模板。 然后去掉注释，就能用了。
3、适当的使用margin/padding，在调整box（盒子）中，元素位置的时候，使用box（盒子）的padding比较好。而不要使用，box内元素的margin。
原因是，box内元素使用margin的时候，会对box的margin产生影响，产生错位。
但在使用padding的时候注意一点： 比如本来 width:100px 的box,如果设置了padding-left:20px的话，那就要把width减去20px。
4、一个box，设置了border后，要把width减去border的粗。 比如width:100px 的box，左右有1px的边，那应该设置box width为98px。
5、在添加box的时候，能不给width和height的，尽量不给。
height可以靠内部的元素去撑开。
width不设置的话，一般默认就是100%宽。
6、同时给一个box设置背景图片和背景颜色的方法是，先设置背景图片，再设置背景颜色，代码如下：
代码如下:
.bg {background:url(/images/blbian.gif) no-repeat}
.style1 {width:100px;height:100px;background-color:#ebf1e5;}
<div class="style1 bg"></div>
7、当float:left之类的东西写的太多，影响到周围，或者狼蚁网站SEO优化的元素的时候，尝试使用clear:both去清除。
代码如下:
<br class="clearfloat" />
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
8、在进行如下设置的时候<div style="height:3px"></div>，会产生兼容性问题。 ie6会出问题，你会发现，box不是3px高。
需要如下设置： font-size:1px; 才不会有问题。参考 dw cs3模板中 clearfloat中的写法，还会加上line-height:0px。不过我发现不加也是可以的。但加会更正规。
9、在给单行文字设置height的时候，要同时设置line-height。不然会有兼容性问题，文字会有小的错位。
10、使用ul li列表的时候，一定要给ul设置 list-style-type: none; 不然会产生兼容性问题。 ff下会出现原点，而ie下经常看不到。
1