学习啦——学设计>网页设计>网站建设>网站后台技术>

CSS框架有哪些比较重要的理解_CSS框架如何理解

宇民分享

  互联网行业已经发展了多年,浏览器也从最早流行的NS到现在的FF3.IE7等等。。。下面由学习啦小编为大家整理的CSS框架的理解,希望大家喜欢!

  CSS框架的理解

  一、CSS框架之利:

  1、开发效率的提高。

  如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率,避免一些常见的错误。如果你的工作是按件计费的,你的报酬一定会比别人多。

  2、规范代码命名。

  在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架,很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。

  3、更好的团队合作

  有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷,要注意公用css,还有注意相互之间的代码配合。久而久之,废弃代码越来越多,互相之间也难以阅读。如果建立好合适的CSS框架,大家可以减少很多不必要的错误,提升产品质量和工作效率。

  4、解决浏览器的兼容性问题

  现在大部分项目都要求兼容IE6,7和FF。每个站点可能都会花上一部分时间去处理兼容问题。在框架层面上就将这个问题处理好。就可以为后面的兼容问题节省下大部分时间。

  5、一套完整的、结构清晰的结构代码。

  CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难,前面的基础工作做好了。后面的开发速度会提高很多。

  CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难,前面的基础工作做好了。后面的开发速度会提高很多。

  二、CSS框架之弊:

  1、你需要完全的理解整套框架

  每一个加入项目的人,都需要花一定的时间去完全的理解整套框架及编码规范;

  2、你会延续一些框架中的错误bug

  没人可以保证自己制定的框架是完美而没有bug的。你可能会需要时间去清理框架中的bug;

  3、限制开发思路

  框架给出大家基本的架构及开发的思路,这可能会限制你对产品开发的新思路;

  4、臃肿的源代码

  框架中可能有很大一部分代码不会经常用到,而且还会降低执行效率;

  5、框架的语义化

  我们已经注意到了HTML代码的语义化。但基于框架的每个站点都是独立唯一的,我们很难去保证CSS框架的语义化。

  常见CSS的错误解析

  1. 检查HTML元素是否有拼写错误、是否忘记结束标记

  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

  2. 检查CSS是否正确

  检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。

  3. 确定错误发生的位置

  如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。

  4. 利用border属性确定出错元素的布局特性

  使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

  5. float元素的父元素不能指定clear属性

  MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的着名的bug,倘若不知道就会走弯路。

  6. float元素务必指定width属性

  很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

  另外指定元素时尽量使用em而不是px做单位。

  7. float元素不能指定margin和padding等属性

  IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

  8. float元素的宽度之和要小于100%

  如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

  9. 是否重设了默认的样式?

  某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

  10. 是否忘记了写DTD?

  如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写DTD

  CSS中em和px区别是什么

  Font-size:1.5em;

  其实在国外CSS编写中,使用em作为单位是很多的,一是人性化考虑,二是受到美国劳工部Section508法案的强行限制。那么在网页设计中,常用到的度量单位一共有三种,分别是px/em/pt:

  *px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内的网站很多都是采用px作为单位的。

  *em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸。在国外使用的很多。众多先进浏览器【IE除外的基本都是】都支持字体调整。

  *pt单位名称为点(Point),绝对长度单位,这个很老了,老到胡子都一把了。。基本没有使用的了。

  第一、em与px之间怎么换算?

  *任意浏览器的默认字体高度16px(16像素)。

  *所有未经调整的浏览器都符合:1em=16px。

  *那么12px=0.75em,10px=0.625em。

  为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  第二、em单位有什么特点?

  *em的值并不是固定的。

  *em会继承父级元素的字体大小。

  我们在写CSS的时候如果要用em为单位,需要注意两点:

  *body选择器中声明Font-size=62.5%;

  *将你的原来的px数值除以10,然后换上em作为单位;

  *重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。