登录  /  注册
首页 > web前端 > css教程 > 正文

学习WEB标准总结的一些CSS/XHTML知识小结第1/3页_经验交流

PHP中文网
发布: 2016-05-16 12:04:47
原创
1600人浏览过

1、很多兼容性问题,是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义

复制代码 代码如下:


* { padding:0; margin:0;}


或者

复制代码 代码如下:


ul,li,h1,h2,h3,h4,h5,h6,p,table,td,p,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;}





7、当float:left之类的东西写的太多,影响到周围,或者下面的元素的时候,尝试使用clear:both去清除。

复制代码 代码如下:




.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}



8、在进行如下设置的时候


,会产生兼容性问题。 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下经常看不到。


智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号