关闭

[置顶] CSS学习研究

标签: cssoperaclassoptimization浏览器input
290人阅读 评论(0) 收藏 举报
 
1px 的兼容《出自波波手笔》
 
写本书的出发点是:希望给大家一套比较容易接受的、好用的、能处理页面大部分内容的CSS全局样式,当然使用这套CSS是在本人提出的一套HTML架构之下的。说架构其实有点故弄玄虚,只是想和大家分享前端HTML编码的一点点思路,和一个个在此思路之下解决问题的方法。所有遇到的问题全部来源于日常工作,所有代码无拷贝他人,均属原创,仅供业内人事探讨,不提供教学。
思路要点之一:绝不考虑使用table,横向布局用带有float的div或li取代td。慎用ul li,当有重复单元时可使用ul li,没有重复的单元就别用ul,那样代码看上去很不整齐。
思路要点之二:最大限度利用ul li的优点。用ul li可以减少class=””的声明数量,当你把一套重复单元放进li之后,在ul里定义一个class=””就足够了。当然会付出代价,ul的兼容问题比div成倍的多。
思路要点之三:所有的空白使用margin填充,尽量不使用padding。要问原因,我只能这样说,padding能用margin替代,反之不行,只使用margin,当处理兼容问题时,你可以把焦点仅放在margin上而不用考虑padding。
思路要点之四:不给任何非图片背景类的容器定义height具体值,让容器自适应内容高度,好处一大筐,坏处一大箩,说说坏处吧,在调两个容器同高对齐时,要反复截图量高,而且要在不同浏览器下截图,量完高,还要计算出合适的margin-top来填充。
思路要点之五:能用一层解决的决不用两层,尽量减少嵌套,严厉禁止ul li 下再套 ul li,后果自负,目前为止我还没尝试过ul li嵌套ul li,对此法的实践属空白,理论上来说,此法会带来很多bug。
思路要点之六:css样式分类很细,需要使用多重class声明。例如:class=”left bd orange”,排名不分先后。
思路要点之七:熟悉各浏览器对样式解释的不同点,认真做好工作笔记,准备好4大浏览器,调试兼容,再开一个photoshop,随时截图做测量。制定完美的目标,那就是:精确到1px的兼容。
 
所提供样式可以分为以下几类:
a>     tag optimization 即标记优化。
包括对body,td,select,input,form,ul,li,img,h3,p的优化,有待扩充。主要优化margin,padding,font-size
强调几个比较重要的,也是较常出现引发问题的。
Form{margin:0px;}有时页面上莫名出现了空白,很多时候是因为忽略了form的margin
Img{border:0px}如果没有border:0px; 当给<img />套上<a/>时,图片会出现丑陋的边框色
Input{font-size:12px;}这可是很重要的哦,没有font-size限制的密码框会呈现超大的圆点并且撑大input框
Body{"">宋体}也许大家不会留意到,如果不加这个属性,在font-size:12px下,ie里文字的实际占高14px,而ff里实际占高是15px,当然即使加了,在opera下文字占高还是不一样的,这就需要在任何文字情况下不要忘了line-height或height。
b>     link 部分,可以修改或增加你喜欢的链接样式。
注意.lk_l a{text-decoration:underline !important} 和 .lk_n a{text-decoration:none !important}的使用
c>     for testing 故名思意,当你需要做测试时,可以用到的,例如,你想看到一个div的边框只需要往class里敲入两个字母 ‘bd’
.lb 使用范例:<ul class=”lb”><li></li></ul>这样就能看到ul下所有li的边框了。
d>     common 部分,重头戏来了,有必要一个个详细说明了。
.clr{clear:both}为了保留之前的习惯,做的一次向下兼容。需要说明,clear层样式在
.c{clear:both;overflow:hidden;+overflow:visible}里已经重新定义,请尽量使用新样式,并牢记新样式只能在单独的clear层使用
什么是单独的clear层?<div class=”c”></div>就是,除了.c样式没其它className,并且<div/>内为空。
为什么要重新定义?完全出于兼容opera考虑,最近才做opera下的兼容,还是源于同事对opera的推荐。
 
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15658次
    • 积分:449
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档