- Web前端开发必备工具 更新为2009.11.8
- 各种html+CSS实例效果 更新为2009.10.16
- Web前端开发电子书 更新为2009.12.6
- 各种浏览器css hack 更新为2009.8.7
- 各种CSS bug与技巧 更新为2009.12.3
- 各种CSS+JS实例效果 更新为2009.10.24
- Web前端开发必备手册 更新中…
CSS查找匹配原理和简洁高效
用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？
先来看一个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
Show more »
CSS清除浮动
使用div+css（姑且这样叫，虽然我也不喜欢，但是叫什么呢？）布局的好处不用多说，经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
常用的清除浮动的方法有以下三种。
此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。
提示：你可以先修改部分代码再运行。
关于一个布局的写法
关于一个布局的写法,看见蓝色里面讨论个火热.我就凑合的写下。
前端工程师面试
一些前端工程师面试内容
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
3.CSS引入的方式有哪些? link和@import的区别是?
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
5:前端页面有哪三层构成，分别是什么？作用是什么？
6:css的基本语句构成是？
Show more »
腾讯Q组内部考核题
这个题目是一个网友树人发给我的，听说他是问鬼哥要的，我打开看了看，原来是以前看见过的，只是没有做，本来打算计划这周不加班，周五晚上开始做这个试题，结果突然来了项目要做，没都办法周六得去加班啊，周五晚上也加了的。昨天晚上我就用了几个小时，今天中午起来吃了个面包就继续，搞了一下午终于搞出来了。话说这道题是以前我做过的面试题的综合而已，不过里面有很多值得学习的地方，绝对值得大家一做。
详细题目：
http://www.hemin.cn/demo/tengxunMS10-01-17/考核题关注.doc
http://www.hemin.cn/demo/tengxunMS10-01-17/q_group.psd
答案：
提示：你可以先修改部分代码再运行。
测试：IE6,7.8,FF3.6.op10,chrome
百度2010校园招聘前端开发笔试题
1、JS主要数据类型？5分
答：主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。
2、img的alt和title的异同？10分
答：title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。
为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。
3、CSS的JS调用？如font-family, -moz-border-radius 10分
答：fontFamily、MozBorderRadius
Show more »
CSS框架
CSS框架好处：
1、开发效率的提高。
如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。
2、规范代码命名。
在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。
3、更好的团队合作
有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。
Show more »
关于DOCTYPE
DOCTYPE不可怕，但把它拿走，会让你怕了又怕。
最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调 整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创 作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最 终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。
在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的 HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自 己决定，但是，请认识DOCTYPE：
Show more »
CSS Sprites图片合并
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。
比如：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
Show more »
CSS Reset
知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。
正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：
- * { padding: 0; margin: 0; border: 0; }
这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：
Show more »
css长度单位
今天看见部分国外网站里面代码的单位用的都是em，感觉里面的很多单位初学者都不认识吧，pt啊，ex啊什么的，我感觉有必要发篇这样关于css的长度单位的文章。
在写css的时候最常用的长度单位是px(像素)，经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。
1、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
譬如，Windows的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
2、em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3、pt：点(Point)，绝对长度单位。
Show more »
