组件通信问题

组件通信问题

父子组件通信:

props 和event、 v-model、.sync、 ref、 $parent和 $children

非父子组件通信:

$attr 和 $listeners provide 和 inject. eventbus 、通过跟实例$root vuex、dispatch和brodcast

父给子传值

1
2
3
4
// child:
props: {msg:String}
// parent
<helloworld msg="Welcome to vue.js"/>

子给父传值

1
2
3
4
5
// child
this.$emit('add', good)

// parent
<Cart @add="cardAdd($event)"></Cart>

事件总线
任意两个组件之间传值常用事件总线或 vuex的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 
class Bus {
constructor(){
this.callbacks = {}
}
$on(name, fn){
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
$emit(name,args){
this.callbacks[name].forEach(cb=>cb(args))
}
}

// main.js
Vue.prototype.$bus = new Bus()

// child1
this.$bus.$on('foo', handle)

// child2
this.$bus.$emit('foo')

兄弟组件之间通信可以通过共同祖辈$parent或者$root

// brother1
this.$parent.$on(‘event’, handleEvent)

//brother2
this.$parent.$emit(‘event’)

$children

父组件可以通过$children访问子组件实现父子通信

1
2
//parent
this.$children[0].xx = 'xxx'

$attr/$listeners

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外),并且可以通过 v- bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。

1
2
3
// child:并未在props中声明foo <p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

refs
获取子节点引用

1
2
3
4
5
// parent
<HelloWorld ref="hw"/>
mounted() {
this.$refs.hw.xx = 'xxx'
}

provide/inject

能够实现祖先和后代之间传值

1
2
3
4
5
6
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']

用GruntJS进行js代码压缩

为什么开发者要关心GruntJS?

主要的原因是开发者经常寻找自动化日常任务的方法,这有助于将出错的几率降到最低。手工从事重复无聊的任务的时候,我们很容易犯错。

GruntJS依赖

GruntJS要求 NodeJS 0.8.0以上版本。我们将使用 npm 包管理器来安装 GruntJS 和它的插件。新版的NodeJS默认包含 NPM 包管理器。可从官网下载最新版的 NodeJS。

GruntJS起步

在开始之前,我们需要理解Grunt的三大主要组成部分:

1. GruntJS CLI

GruntJS提供了GruntJS命令行工具。下面会提到安装 GruntJS CLI 的命令。如果你在安装时遇到错误信息,那么你可能需要 sudo 权限来运行这个命令。

1
npm install grunt-cli -g

上面的命令将全局安装 grunt-cli 包,这样在任何目录下都可以调用grunt命令。GruntJS CLI不包括grunt task runner。要使用 grunt task runner,我们需要将其作为应用的开发依赖安装。gruntgrunt-cli的分离确保每个团队的成员使用同一版本的grunt task runner。

2. GruntJS Task Runner

grunk命令会调用Grunt task runner。我们需要将其作为应用的开发依赖安装。让我们先开一个目录,放置我们的博客应用示例。

1
2
mkdir blog
cd blog

上面已经提到,Grunt要作为应用的开发依赖安装。所以我们需要创建一个定义应用元信息的package.json文件。运行npm init命令,回答一些问题即可创建package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ npm init
name: (blog)
version: (0.0.0)
description: My awesome blog
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to /Users/shekhargulati/blog/package.json:
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
Is this ok? (yes)
Shekhars-MacBook-Pro:blog shekhargulati$

完成这一步之后,init命令会为我们创建 package.json 文件。由于我们不需要 mainscriptsauthorlicense这些项目,我们可以删掉它们。现在我们有了一个最简单的 package.json 文件。

1
2
3
4
5
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog"
}

运行下面的命令将Grunt安装到本地:

1
npm install grunt --save-dev

上面的命令将安装所需的依赖,同时也会更新 package.json

1
2
3
4
5
6
7
8
{
"name": "blog",
"version": "0.0.0",
"description": "My awesome blog",
"devDependencies": {
"grunt": "~0.4.1"
}
}

3. Grunt Plugins

GruntJS有一个良好的插件体系,我们需要的大多数任务都有相应的插件加以处理。GruntJS的插件可以用npm安装。在这篇文章中,我们将使用两个插件——grunt-contrib-uglifygrunt-markdown。完整的插件列表在此

Gruntfile

现在我们该告诉 GruntJS 该做哪些任务了。如果我们在blog目录中运行grunt命令,我们会看到如下的错误信息:

1
2
3
4
$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

为了使用Grunt,我们需要创建一个名为Gruntfile.js的文件。Gruntfile指定grunt需要执行的任务。这个文件包含了构建脚本。

blog目录下创建一个新文件,起名为 Gruntfile.js,加入下列代码:

1
2
3
module.exports = function(grunt){

};

这是我们开始使用Gruntfile所需的样板。

接着我们需要配置grunt需要执行的任务。我们调用grunt的initConfig函数,将配置对象传递给它。目前,配置对象是空白的。

1
2
3
4
5
module.exports = function(grunt){
grunt.initConfig({

})
};

精简

我们要执行的第一项任务是精简应用中的javascript文件。在blog目录中创建一个js文件夹,然后创建一个名为app.js的新文件。

1
2
3
$ mkdir js
$ cd js
$ touch app.js

在文本编辑器中打开app.js,在其中加入如下内容。app.js文件有两个简单的方法hellobye

1
2
3
4
5
6
function hello(name){
return "Hello, " + name;
}
function bye(name){
return "Bye, " + name;
}

现在我们在grunt配置对象中添加uglify任务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = function(grunt) {

grunt.initConfig({
uglify: {
build: {
src: ['js/app.js'],
dest: 'js/app.min.js'
}
}

});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['uglify']);
};

上面的代码做了这些事:

  1. 我们配置了uglify任务,指定了源文件和目标文件。
  2. 接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前,确保插件已经安装。所有的grunt插件都可以通过npm安装。
  3. 最后,我们将这个uglify任务注册为我们的默认任务。当我们未指定任务名称而直接运行grunt命令的时候,Grunt将调用默认任务。

如果我们运行grunt命令,我们会碰到下面的信息:

1
2
3
4
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

运行下面的命令安装grunt-contrib-uglify插件。

1
npm install grunt-contrib-uglify --save-dev

然后再次运行grunt命令,这次我们将看到成功的信息。

1
2
3
4
5
$ grunt
Running "uglify:build" (uglify) task
File "js/app.min.js" created.

Done, without errors.

它成功地创建了app.min.js文件。app.min.js如下所示,所有的空格被删除了,函数的参数被重构为单一字母,整个文件被压缩成一行。

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}

css3属性-webkit-font-smoothing

CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

它有三个属性:

none //对低像素的文本比较好

subpixel-antialiased //默认值

antialiased //抗锯齿很好

例子:

body{

*-webkit-font-smoothing: antialiased; *

}

国外某网站例子

-moz-osx-font-smoothing: inherit | grayscale

web前端攻城狮的收藏夹

学习网站

W3school:http://www.w3school.com.cn/

一句话点评:初学者必上的网站,也可以做为工具来用,有中英文版

W3C:http://www.w3.org/

一句话点评:最权威的资料

MDN:https://developer.mozilla.org/zh-CN/

一句话点评:图文示例并茂,非常好的学习资料

汤姆大叔的博客:http://www.cnblogs.com/TomXu/

一句话点评:深入学习JS的绝佳博客

Ruby’s Louvre:http://www.cnblogs.com/rubylouvre/

一句话点评:国内JS牛人之一

纸头折飞机:http://www.cnblogs.com/xueduanyang/

一句话点评:本博客有很多前端开发者值得关注的内容

小坦克:http://www.cnblogs.com/TankXiao/

一句话点评:从底层理论到应用实践都有介绍,当然了,也有工具的介绍

Snandy:http://www.cnblogs.com/snandy/

一句话点评:对JS的分析,特别是对jQuery原理的分析值得一看

当耐特砖家–Iamzhanglei.com:http://www.cnblogs.com/iamzhanglei/

一句话点评:HTML5尝鲜者,当然还有其他前端技术

简单生活,踏实人生:http://www.cnblogs.com/yanyangtian/tag/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/

一句话点评:推荐性能优化这一块,虽然有涉及到asp.net,但原理相通

鑫生活鑫空间:http://www.zhangxinxu.com/wordpress/

一句话点评:国内不多见的比较好的前端个人技术博客(主要是我孤陋寡闻不知道其他人的)

淘宝UED:http://ued.taobao.com/

一句话点评:这个就不多说了,上一篇文章有介绍,值得关注

goddyzhao:http://blog.goddyzhao.me/

一句话点评:国内不多见的比较好的前端个人技术博客

JS库

jQuery:http://jquery.com/

一句话点评:jQuery官网

Sizzler:http://sizzlejs.com/

一句话点评:jQuery的御用选择器,可独立使用

JSDeferred:http://cho45.stfuawsc.com/jsdeferred/

一句话点评:强大的JS异步库,个人虽然不喜欢日本人,但对技术牛人还是很欣赏的

mass-Framework:https://github.com/RubyLouvre/mass-Framework

一句话点评:国内JS牛人司徒正美开发的JS框架

Jscex:https://github.com/JeffreyZhao/jscex/

一句话点评:国内.NET领域牛人老赵开发的异步JS库

(沈融兴 推荐)YUI:https://developer.yahoo.com/yui/

一句话点评:Yahoo的一个开放源代码的 JavaScript 函数库

常用工具

Git

一句话点评:非常好用的版本管理工具

EditPlus

一句话点评:我的编辑器,轻巧方便

IETest

一句话点评:IE浏览器兼容性调试工具

Fiddler

一句话点评:网络监测工具,对分析请求非常有用

JSFiddle:http://jsfiddle.net/

一句话点评:在线演示JS代码,只是速度很慢。有个朋友正在开发,准备弄个国内版的,以后再介绍。

JSLint:http://jslint.com/

一句话点评:JavaScript验证工具,想写出规范的JS代码就多用这个吧

Chinacxy:http://www.chinacxy.com

一句话点评:上面提到的那位朋友开发的一个前端工程师工具集,目前包括网页特效、在线正则测试、CSS/JS/HTML格式化、JSON格式在线验证、所见即所得代码在线编辑等

Codrops:http://tympanus.net/codrops/category/tutorials/

一句话点评:网页特效

Iconfinder:http://www.iconfinder.com/

一句话点评:非常强大的icon图标搜索引擎

yellowgreen:http://yellowgreen.de/image-to-base64-string-encoder

一句话点评:一个在线图片转为base64格式工具

常用浏览器插件

FireFox:

FireBug:这个不用介绍

YSlow:Yahoo开发的,基于Firebug的用于分析网页性能的工具,用于优化网页的速度和建立高性能的网页。

Cookies Manager+:cookie管理器

Linkchecker:检查页面是否有死链

Chrome:

jQuery API Browser:可查询jQuery API

Edit this cookie:cookie管理器

Resolution Test:快速调整浏览器尺寸工具

前端资讯

JavaScriptWeekly:http://javascriptweekly.com/

一句话点评:JS周刊

InfoQ:http://www.infoq.com/cn/javascript/

一句话点评:JS资讯及访谈

(heqichang 推荐)smashingmagazine:http://www.smashingmagazine.com/

一句话点评:专业的网页设计师和开发人员的在线杂志,主要介绍技术、实践和资源。

经典书籍

《JavaScript高级程序设计》——人民邮电出版社:

《高性能JavaScript》——电子工业出版社:

(Artwl 推荐)《精通正则表达式》——电子工业出版社:

小结

经典书籍部分比较少,因为我看过的JS开发的书虽然很多,但真正称得上好的还真不多。

本文仅仅抛砖引玉,再次强烈建议大家把收藏的好的资源分享出来,加以补充。

Ubuntu下Nginx/PHP/MYSQL开发环境的配置方法

1.安装PHP5

apt-get install php-pear php5-cli php5-common php5-xcache php5-cgi php5-mysql php5-gd php5-dev php5-memcache

默认安装就行
2.安装mysql5

apt-get install mysql-server mysql-client libipc-sharedcache-perl mysql-doc-5.0 tinyca

安装过程中提示输入mysql密码并确认,设置完要记住密码
3.安装nginx

apt-get install nginx

版本为0.7.62
4.安装php-fastcgi下载php-fastcgi,完成后执行解压并安装(这个在下载包中会提供)

tar -zxvf php-fastcgi.tar.gzcd /tmp/php-fastcgi/

cp init-fastcgi /etc/init.d/init-fastcgi

chmod 755 /etc/init.d/init-fastcgi

cp php-fastcgi /usr/bin/php-fastcgi

cp spawn-fcgi /usr/bin/spawn-fcgi

5.安装zend下载zend.tar.gz(下载包中提供)

tar zxvf zend.tar.gz

cp -R zend /usr/local/nano /etc/php5/cgi/php.ini

复制以下到PHP.INI文件底部

[Zend]

zend_extension_manager.optimizer=/usr/local/zend/lib/Optimizer-3.3.3/php-5.2.x/ZendOptimizer.so

zend_extension_manager.optimizer_ts=/usr/local/zend/lib/Optimizer_TS-3.3.3/php-5.2.x/ZendOptimizer.so

zend_optimizer.version=3.3.3zend_extension=/usr/local/zend/lib/ZendExtensionManager.so

zend_extension_ts=/usr/local/zend/lib/ZendExtensionManager_TS.so

6.测试PHP-CGI运行:

/etc/init.d/init-fastcgi startps -ef |grep php
结果如下:

7.修改nginx配置文件(复制以下代码在终端下执行)

nano /etc/nginx/sites-available/default
找到类似以下两端段改成之这段以index.php为最优先首页文件

location / {

root /var/www/nginx-default;

index index.php index.html index.htm;

}
这段开始 fastcgilocation

~ .php$

{

fastcgi_pass 127.0.0.1:9000;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME /var/www/nginx-default$fastcgi_script_name; include /etc/nginx/fastcgi_params;

}

重新启动nginx(复制以下代码在终端下执行)/etc/init.d/nginx restart

在/var/www/nginx-default/目录下建立个info.php内容为:

然后访问http://localhost/info.php 正常显示就成功了这里如果没有显示正确,可能是500内部错误,或者是400错误是应该FASTCGI没有设置对,注意上面的路径和配置文件

8.设置目录的访问权限

9.设置开机启动 :左上角的 系统-》首选项-》启动程序然后点添加:

名称:php-cgi

命令:/etc/init.d/init-fastcgi

高级 JavaScript 编程原理和一些总结

JavaScript 的特殊之处

JavaScript 用 prototype 和 constructor 实现了继承等 OOP 特性,但是他们的理解非常”绕”。

每个函数对象都有一个 prototype 对象
每个函数对象的 prototype 都有个 constructor 属性
函数构建的时候 prototype 指向父对象的 prototype,或者理解为复制一份
函数构建的时候 prototype 的 constructor 指向自己
调用函数的时候会执行 constructor 方法
函数可以调用自己 prototype 对象的属性和方法
函数可以覆盖自己 prototype 对象的属性和方法

你可能会在很多代码里看到类似 Array.prototype.slice 这样的调用方式。

JavaScript 函数的隐含特性

函数参数获取的第二种方式

不论你如何定义函数的参数,在调用函数的时候,所有参数都会以数组元素的形式赋值给函数的 arguments 这个变量
调用函数的对象被赋值为 caller ,被调用函数被赋值为 callee

作用域链和函数提升

普通 function 的定义可以做到前置调用,而变量式声明的函数则不能前置调用。

浏览器的顶级作用域是 window 。

其他

一切皆为对象和匿名函数的支持,让你可以这样定义和执行函数:

(function(){})()

JavaScript 的 call apply caller callee

call 和 apply 是将函数绑定到其他对象上执行。caller callee 的解释见前文。

ECMA 5 和 AMD, CommonJS

AMD (Asynchronous Module Definition) 提供了在浏览器端异步加载所需 js 文件的方式。

CommonJS 定义了服务器端模块化的支持方式,其中:

require() 来引用和调用文件中的对象

module.exports 和 exports 来为文件中的对象提供调用接口

引用:

http://ecma-international.org/ecma-262/5.1/

http://www.commonjs.org/

http://addyosmani.com/writing-modular-js/

http://requirejs.org/docs/whyamd.html

Git学习笔记

ProGit这本书讲的挺不错。循序渐进。有几个命令书中语焉不详,卡住了挺长时间。记录一下。

remote branch

每一个remote branch都会在本地表现为一个不可改变的静态branch。使用git branch -a可以看到。红色的就是remote branch。不能够对这些branch进行改动,但是可以创建一个这些remote branch的tracking branch:

`git checkout -b b1 origin``/b1`
`# or`
`git checkout --tracking origin``/b1`

这时候,创建出来的local branch就会被git看作是对应的remote branch的tracking branch。在执行git push的时候,local branch的内容就会自动被push到它的tracking branch。

缺省的master就是origin/master的tracking branch。

本地的branch只能够通过向remote branch推送(push)数据的方式来和remote branch交互。如果想创建一个remote branch,就需要创建一个branch,然后

`git branch b2`
`git push origin b2`

这两条命令创建一个本地branch b2,然后将它增加到remote branch。这时候运行 git branch -a,能看到有了一个新的remote branch。

git fetch

git fetch [remote_repo] :这个是将remote repo所有的数据:包括更新的文件,新增/减的分支,tag,等等,全部下载到本地的local repo。但是,不会做merge。也就是说,master分支数据可能是旧的,但是origin/master上的数据已经是新的了。可以进一步运行

>
`git checkout master`
`git merge origin``/master`
来将两个分支进行merge。或者更好使用git push来进行merge(前提是master确实是origin/master的tracking branch)

git pull

git pull [remote_repo branch_name]:这个命令直接从指定remote_repo的指定branch拉取相应的数据。并将远程branch的更新和本地的tracking branch做merge。

注意。这时候,并不会把这个branch之外的数据拉下来。比如,如果远程的另一个branch有更新,或者增加了一个新的branch,这个命令并不会把这些数据拉下来。

如果直接执行git pull [remote_repo],则会将所有数据拉下来,包括其它分支的更新,包括新增的分支。同时还会将当前branch与它tracking的branch做merge。

git push

git push [remote_repo local branch:remote branch]。缺省情况下,将当前branch的改动push到缺省repo中它track的branch。也可以加repo和branch,将当前分支的数据push到任何一个repo的任何一个branch

删除远程分支

如果需要删除一个远程分支,则需要git push origin :b1根据 git push的定义,就是把空push到远程的b1 branch。也就是删除了。

但是,如果别人已经在b1删除之前执行了fetch或者pull,在本地有了b1这个branch,再次执行fetch或者pull并不会删除这个branch。运行git branch -a也不能看出这个branch被删除了。这时候需要运行

>
`$ git remote show origin`
`* remote origin`
` ``Fetch URL: git@github.com:xxx``/xxx``.git`
` ``Push URL: git@github.com:xxx``/xxx``.git`
` ``HEAD branch: master`
` ``Remote branches:`
` ``master tracked`
` ``refs``/remotes/origin/b1` `stale (use ``'git remote prune'` `to remove)`
` ``Local branch configured ``for` `'git pull'``:`
` ``master merges with remote master`
` ``Local ref configured ``for` `'git push'``:`
` ``master pushes to master (up to ``date``)`
这时候能够看到b1是stale的,可以使用git remote prune origin将它从本地repo也去掉。

Rebase

rebase就是re-base。git每个commit都有一个parent指针指向当前提交的parent,即base。rebase则是改变commit的parent,这样的好处是可以减少版本树的分支和复杂度,坏处是用不好的话会给别人带来很多麻烦。

假设有一个master:7,branch f1是从master:7上cut出来的一个branch。f1是一个local的branch,用来开发一个feature。

在开发feature的时候,有人将一些修改commit到了master上。

在feature做了一个阶段之后,master已经有了版本10。f1有了版本5。这时候想把f1上的修改合并到master上。首先执行git pull把master上的更新都拉到本地来。然后可以使用rebase命令将f1上的改动都rebase(gitpro上翻译为衍合,我觉得拟合也挺好,至少是个现有的词)到master上,然后进行提交。

>
`git checkout f1`
`git rebase master`
`#or`
`git rebase master f1`
这时候,git会先找到f1和master的交点,也就是cut f1的时候的版本(master:7),从这个版本开始,git将f1每次的提交作为一个diff文件保存起来。然后checkout master,将这些diff一个个应用到master上。

看起来很像是merge,不过merge会产生一个新的提交,而rebase是re-base,也就是改变f1的每个提交:改变每个提交的parent,改变每个提交指向的文件快照。让整个过程看起来好像就没有f1一样,所有的改动都是直接在master上来的。Rebase过之后,如果feature已经做完,f1可以直接被删掉。

merge则会产生一个新的提交,不改变已有的提交。好处是比较安全,历史不会被改动。不好之处就是版本树会比较乱。

rebase很好很清爽。需要注意的一点是“永远不要rebase那些已经推送到远程repo的更新(commit)”

rebase会改变commits的内容,也就是改变历史,对于没有push到server上的commits无所谓,反正只有本地一个人在用。这时候使用rebase将commits rebase到公共branch(master),可以让本地的历史更清爽。

对于一个已经push到remote repo的commits。比如f1如果已经在remote repo上了,而且,f1:1到f1:3已经push到repo上了。这时候如果再将f1:1到f1:5 rebase到master上,然后强制push到repo上,结果就是f1这个branch的历史被改动。当然,如果这个remote branch只有一个人用,也还无所谓。如果有人在f1:3的时候cut出来一个branch,这时候那个人就悲剧了。再次pull的时候,将会收到rebase后改动的commits,以及原来就有的commits,情况会变的异常糟糕。

如果是push到master上,影响将更大。

总之,remote repo上的commit永远不要改动。也就是说,永远不要将已经push出去的commit再rebase一下。rebase也无所谓,切不要push出去也不会对别人造成影响。如果push出去了,这样改变了history,改变了server上的版本树,情况就糟糕了。

具体图和例子请参照Git Pro

http://progit.org/book/zh/ch3-6.html

IE6/7下的几个BUG

这几天在折腾一个宣传网站的英文版,需要兼容到IE7,IE6已经被我们无视了,估计以后我们还可以无视IE9以下了呢,窃喜下,

好久不调IE,都差点忘记怎么调了,好在我们可以用IE9下的开发工具,还可以看下到底是哪里出了问题了。

1.IE6/IE7 position:relative/absolute z-index失效问题css bug

这个问题表现为,我们做下拉菜单的时候,被下面的焦点图给挡住了,有木有同感啊,无论我们怎么加大下拉列表的z-index,总是被焦点图给挡住,主要问题是IE6/7下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性,那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。

解决方式也很简单,给父元素加上z-index使他们具有可比性。

2.display:inline-block问题

有两种方法 :

1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):

div {display:inline-block;…}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div {display:inline; zoom:1;…}

css3 Transform

什么是Transform?

****用Transforms我们可以实现移动,缩放,翻转,旋转,和拉伸。

在IE9中添加前缀 -ms-;

火狐中添加前缀 -moz-;

chrome和safari中添加前缀 -webkit;

opera 中添加前缀 -o- ;

*Transform 2D有以下属性: *

  • translate() 移动,translate(100px,50px) 第一个是x轴,第二个是y轴,如果向右或者向下移动加“-”;

-rotate() 旋转,rotate(30deg)表示顺时针旋转30度,其中“deg”是“度”;

-scale() 缩放,例如:“1.5”表示放大1.5倍,如果放大2倍,即写成“2.0”,缩小则加上“-”。 scale(2,-4)第一个是x轴,第二个是y轴,表示宽度放大2倍,高度缩小4倍;

-skew() 倾斜。skew(40deg,50deg)第一个是x轴,第二个是y轴,表示向右倾斜40度,向上倾斜50度;

-matrix() 做了6个参数,可以实现rotate,scale,move(translate),skew;

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 /
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /
Firefox /
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /
Safari and Chrome /
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /
Opera */
}

*Transform 3D有以下属性: *

**** -rotatex()

-rotatey()

里面的参数单位都是deg;

3D Transform Methods

FunctionDescription
matrix3d (*n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n*)Defines a 3D transformation, using a 4×4 matrix of 16 values
translate3d(*x,y,z*)Defines a 3D translation
translateX(*x*)Defines a 3D translation, using only the value for the X-axis
translateY(*y*)Defines a 3D translation, using only the value for the Y-axis
translateZ(*z*)Defines a 3D translation, using only the value for the Z-axis
scale3d(*x,y,z*)Defines a 3D scale transformation
scaleX(*x*)Defines a 3D scale transformation by giving a value for the X-axis
scaleY(*y*)Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(*z*)Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(*x,y,z,angle*)Defines a 3D rotation
rotateX(*angle*)Defines a 3D rotation along the X-axis
rotateY(*angle*)Defines a 3D rotation along the Y-axis
rotateZ(*angle*)Defines a 3D rotation along the Z-axis
perspective(*n*)Defines a perspective view for a 3D transformed element

参考:http://www.w3schools.com/css3/css3_2dtransforms.asp transform 2D 资料 里面含demo效果图

http://www.w3schools.com/css3/css3_3dtransforms.asp transform 3D资料 里面含demo效果图

http://www.w3schools.com/cssref/css3_pr_transform.asp 综合各种demo效果展示

http://www.daqianduan.com/css3-transform/