CSS学习研究

原创 2007年09月18日 10:17:00
 
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的推荐。
 

相关文章推荐

STM32时钟安全机制(CSS)研究及实现

时钟对于MCU而言就像脉搏一样,在恶劣情况下如果出现外部晶振短路的情况会导致MCU无法正常运行。如果MCU应用于安全生产时,有可能造成安全事故。为了应对这一突发状况,ST公司生产的STM32采用双时钟...

移动端H5 css3模拟边框最新研究(超实用) by FungLeo

移动端H5 css3模拟边框最新研究(超实用) by FungLeo前言在之前写的一篇博文《移动端H5的一些基本知识点总结 第五节 边框的处理》中,我提到,可以使用 box-shadow:0 0 0 ...
  • FungLeo
  • FungLeo
  • 2016年05月13日 16:25
  • 9003

值得深入研究的css框架-讲稿

今天整理电脑将居然将2009年的一次视频直播课程的讲稿翻了出来,本想一删了事,觉得对不起当年听课的学生(特意整理后发给我的),索性贴出来 看到了也是个念想。 --------------------...

详细研究CSS列表

先看图图; 码码: ul { margin:50px; background: green; width:500px...

【网站制作视频教程】-HTML CSS列表元素ul,ol,dl的研究与应用!-传智播客

一些实例与应用 1、导航条 迄今为止,无序列表最常见的用途就是导航条,无论是水平的还是垂直的,自从基于表的布局已经过时,无序列表已经被当作导航元素的基础被广泛的应用,原因如下列表所示: 2、...

CSS设计彻底研究

选择器CSS选择器主要包括id、class和标记选择器。复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器。 交集选择器由连个选择器直接连接构成,其中第一个必须是标记选择器,第二个必须...

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章...

CSS float浮动的深入研究、详解及拓展

CSS float浮动的深入研究、详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxi...

从QQ登录的js sdk中,研究html、css以及js的解耦

研究过腾讯提供的QQ登录js sdk版本(飞机票)的读者,可能会注意到,只要引入一个js,然后再设置一个span标签,就可以使用js实例化出一个QQ登录按钮来。如果你查看页面源码,会发现页面自动引入了...

DIV+CSS技术的研究

第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS学习研究
举报原因:
原因补充:

(最多只允许输入30个字)