摘要：
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作，而点击页面其它地方隐藏该div。比如很多导航菜单，当菜单展开的时候，就会要求点击页面其它非菜单地方，隐藏该菜单。
先从最简单的开始，假如页面有一个id为test的div，我们要实现点击页面其它地方隐藏该div:
对于这个问题一般有两种思路，这两种思路都会利用事件冒泡这一原理，想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点，所以这里只是简单介绍一下事件冒泡，
事件冒泡
IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体 阅读全文
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作，而点击页面其它地方隐藏该div。比如很多导航菜单，当菜单展开的时候，就会要求点击页面其它非菜单地方，隐藏该菜单。
先从最简单的开始，假如页面有一个id为test的div，我们要实现点击页面其它地方隐藏该div:
对于这个问题一般有两种思路，这两种思路都会利用事件冒泡这一原理，想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点，所以这里只是简单介绍一下事件冒泡，
事件冒泡
IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体 阅读全文
引入下方的jquery.rotate.js文件，然后通过$("选择器").rotate(角度);可以旋转任意角度，
例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中
就是将id为rotate-image的图片旋转45度。
不过，貌似在Chrome中总是不显示。
唉，找了两个小时，才发现Chrome太坑爹了，没法获取图片的长宽。
解决办法是，把$("#rotate-image").rotate(45);放在
$(window).load(function(){ });中，因为在Chrome中图片在执行$(document).ready(function(){ });中的语句时并没有加载完图片，坑爹啊。
另外可以更方便的通过调用$("选择器").rotateRight()和 
现在移动端 web app 的自适应布局的方案有 5种。
零. Flexbox
使用css3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。
一. 弹性布局
使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广。
二. 流式布局（Fluid）
使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）
三. 响应式布局（Responsive） 
这两天在写一个用object上传照片的网页，在上传时，需要弹出一个进度条的div，我就按照正常的思维模式，将进度条div设为绝对定位，将其z-index设置的很大，结果，进度条div被object给遮挡住了，然后，我就将object也设为绝对定位，再将其z-index设为比进度条的z-index小的一个值，结果还是被object遮挡了。后来，不管我将进度条div的z-index设置多么大，将object的z-index设置的多么小，都无济于事，于是我就郁闷了。上网一查资料，大家都遇到过这样的问题，不过还是有大神给出了解决方案，即在进度条div和object之间加一个iframe就可以了，于是乎，赶忙实验了一哈儿，结果，真的阔以哇。 
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同。
下面我们通过对主要CSS属性的支持，打造全兼容select。
对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况：height.100.padding.0、height.no.padding.100、no.height.no.padding 