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。