本系列文章主要介绍了关于Flex与.NET结合开发中的一些互操作性，包括网络通信、数据加载、数据传输、文件传输、以及应用于Flex与.NET协作开发的通信网关开源项目FluorineFx的相关知识点。       开源项目FluorineFx就是专门针对.NET平台与Flex通信提供的AMF协议通信网关，我们可以通过FluorineFx很方便的完成与.NET的通信。 另外还可以轻松的实现及时文字沟通、视频语音通信等及时交互系统的开发。      FluorineFx官方提供了安装包的下载和在线文档，可以帮助我们有效的利用FluorineFx来开发。       FluroineFx官方网站：http://www.fluorinefx.com/          FluroineFx下载地址：http://www.fluorinefx.com/download.html      FluroineFx在线文档：http://www.fluorinefx.com/docs/fluorine/index.html            本系列文章的程序开发环境选择如下：      .NET:Microsoft Visual Studio 2008 + .NET Framework 3.5      Flex:Adobe Flex Builder CS3 + Flex SDK 3.2      FluroineFx:FluorineFx v1.0.0.15 (点击可下载)      文章目录如下：      1、Flex与.NET互操作(一)：基于Socket的网络连接      2、Flex与.NET互操作(二)：基于WebService的数据访问(上)      3、Flex与.NET互操作(三)：基于WebService的数据访问(下)      4、Flex与.NET互操作(四)：使用HttpService、URLReqeust和URLLoader加载/传输数据       5、Flex与.NET互操作(五)：使用FileReference+HttpHandler实现文件上传/下载      6、Flex与.NET互操作(六)：Flex和.NET协同开发利器FluorineFx      7、Flex与.NET互操作(七)：了解FluorineFx的环境配置（远程对象、网关、通道、目的地）      8、Flex与.NET互操作(八)：使用FluorineFx网关实现远程访问      9、Flex与.NET互操作(九)：FluorineFx.NET的认证(Authentication )与授权(Authorization)     10、Flex与.NET互操作(十)：FluorineFx.Net的及时通信应用（ApplicationAdapter）(一)      11、Flex与.NET互操作(十一)：FluorineFx.Net的及时通信应用（Remote Procedure Call）(二)    12、Flex与.NET互操作(十二)：FluorineFx.Net的及时通信应用(Remote Shared Objects)(三)    13、Flex与.NET互操作(十三)：FluorineFx.Net实现视频录制与视频回放 （回复中有视频聊天的实现）    14、Flex与.NET互操作(十四)：FluorineFx的AMF(Action Message Format)协议通信    15、Flex与.NET互操作(十五)：使用FluorineFx中的字节数组（ByteArray）实现图片上传    16、Flex与.NET互操作（十六）：FluorineFx + Flex视频聊天室案例开发           本系列文章暂时就写到这里，希望对学习基于.NET后台的Flex开发的朋友起到一定的帮助作用。另外在此谢谢长期以来支持我这一系列文章的朋友。 本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/archive/2013/05/13/3076080.html，如需转载请自行联系原作者

http://wmcai.blog.163.com/blog/http://www.asflex.cn/?cat=6&paged=6http://www.javaeye.com/topic/249135?page=2#1007566 3种减少Flex文件大小的方法(续)–再加两点 目录 (Flex/ActionScript) 作者 达达 时间 12-12-2008 标签 : Flex 前几天写了一篇博文《3种减少Flex文件大小的方法》。 在Adobe上又看到了另外两个可以减少文件体积的方法。How do we reduce SWF size so that the download times are lesser? 1、动态载入CSS。通常都是直接嵌入的。但是不要忘记 了还有StyleManager。通过它可以动态地载入css，字体，图片。因为在编译的时候会将资源都包含进去，因而也增加了Flex生成文件的体积。 如果使用StyleManager的话就从外部另外载入了，不过有个缺点就是增加了网络的连接数。有利 有弊吧。 2、动态载入素材（图片，声音等）。 这种比较常用，呵呵。基本上木有人会把很多图片/声音用@Embed标签嵌入到flex中了。呵呵。 3种减少Flex文件大小的方法目录 (Flex/ActionScript) 作者 达达 时间 17-11-2008 标签 : Flex 这是Adobe TV的一段视频，介绍了三种减小Flex生成文件大小的方法。非常简单，却非常实用 1、使用Release模式（这个通常会被忽视，呵呵） 2、使用MXML Module 3、使用RSL（Runtime Shared Library) 原文：http://www.webkitchen.be/2008/11/16/3-ways-to-make-your-flex-application- smaller/ 视频请点击查看： Adobe TV本文转自jiahuafu博客园博客，原文链接http://www.cnblogs.com/jiahuafu/archive/2009/11/21/1607729.html如需转载请自行联系原作者 jiahuafu

http://wmcai.blog.163.com/blog/http://www.asflex.cn/?cat=6&paged=6http://www.javaeye.com/topic/249135?page=2#1007566 3种减少Flex文件大小的方法(续)–再加两点 目录 (Flex/ActionScript) 作者 达达 时间 12-12-2008 标签 : Flex 前几天写了一篇博文《3种减少Flex文件大小的方法》。 在Adobe上又看到了另外两个可以减少文件体积的方法。How do we reduce SWF size so that the download times are lesser? 1、动态载入CSS。通常都是<style source=”style.css”></style>直接嵌入的。但是不要忘记 了还有StyleManager。通过它可以动态地载入css，字体，图片。因为<style source=” style.css”></style>在编译的时候会将资源都包含进去，因而也增加了Flex生成文件的体积。 如果使用StyleManager的话就从外部另外载入了，不过有个缺点就是增加了网络的连接数。有利 有弊吧。 2、动态载入素材（图片，声音等）。 这种比较常用，呵呵。基本上木有人会把很多图片/声音用@Embed标签嵌入到flex中了。呵呵。   3种减少Flex文件大小的方法目录 (Flex/ActionScript) 作者 达达 时间 17-11-2008 标签 : Flex 这是Adobe TV的一段视频，介绍了三种减小Flex生成文件大小的方法。非常简单，却非常实用 1、使用Release模式（这个通常会被忽视，呵呵） 2、使用MXML Module 3、使用RSL（Runtime Shared Library) 原文：http://www.webkitchen.be/2008/11/16/3-ways-to-make-your-flex-application- smaller/ 视频请点击查看： Adobe TV  

别人博客上看见的，一文下去，引起口水大战，其实仁者见仁，智者见智，每种语言都不可能是完善的，扬长避短才是王道。 基于个人的使用经验，我从语言、框架、开发环境和运行环境四个方面对Flex和Silverlight这两门技术做一个比较，自己认为这个比较还是比较全面的。（这样的比较有意义吗？个人意见，只要别把自己当成宗教教徒，将语言看作工具而不是信仰，那么比较就是有意义的。）   语言（Silverlight以C#为准） 特性 比较 胜出 Flex Silverlight 语法 Flex的编程语言ActionScript在变量与属性声明的方面语法有一点罗嗦（有些类似VB）： public var varName : int; 相比之下C#就要简洁一些： public int varName; 不过，ActionScript支持以字面量的方式声明字典，这方面又比C#的Dictionary来得简明： public var dict = { x: 1, y: 2 };   √ 语言特性 ActionScript支持动态类属性，这是C#目前所不支持的，因此在动态编程方面，Flex要简洁得多，也减少了很多代码生成的工作。 √   OO特性 ActionScript不支持抽象类和抽象方法。虽然对一般性的编程来说没有太大问题，但是对框架设计来说这是一个严重的缺点。   √ 反射 反射对于元编程是相当重要的。Flex的反射机制比较原始，只支持有限的反射方法，并且代码中没有明确引用的类在编译阶段会被排除，这使得动态创建类更为麻烦。 不过得益于语言的动态特性，Flex反射代码比同等的C#代码要更加简明。 Silverlight也排除了一些高级反射特性（比如TypeDescriptor相关的一些方法），不过总体来说反射机制还是比较完整的，但同时反射的语法比较罗嗦。   √ 基本类库 Flex的基本类库相当精简，精简的代价就是有些基本功能（如字符串的trim、日期的格式化）都欠奉，不得不求助于工具类库。Flex的集合类库功能也有一些薄弱。 Silverlight类库也比完整的.Net类库精简了许多，有些时候如操作Xml的时候不大顺手。不过大体上来说还是够用的。   √ 扩充特性 E4X是Flex的独有特性，在Flex中使用XML简单到了让Linq to XML也相形见绌的地步。 Silverlight胜于Flex之处包括：Linq to object、lambda表达式和显式多线程，这些都是Flex所不支持的。   √ 语言支持 Flex只支持ActionScript，Silverlight则支持C#、VB、IronPython、IronRuby、JScript等多种语言。但不论Visual Studio还是Expression Blend都没有为脚本语言创建项目提供任何支持，这使得Silverlight的多语言优势打了一个很大的折扣   √ 总的来说，语言方面是Silverlight大胜Flex。   框架 特性 比较 胜出 Flex Silverlight 界面组件 经过几年发展，Flex的界面组件已经比较完整。基本框架中包括超过50个界面组件，远远超过Silverlight的组件数量。但是Flex里也缺少如AutoComplete等少数重要组件。 Silverlight本身就组件数量和功能方面远逊于Flex，不过添加Silverlight Toolkit以后可以在一定程度上弥补其不足。 √   布局 Flex的布局机制简单且灵活。Canvas支持多种对齐和摆放方式，灵活性远远超过Silverlight Canvas，是布局中最常使用的组件。Canvas、HBox和VBox三个组件基本上可以包揽90%上界面布局的工作。 此外，Flex中还有一些布局组件如Panel、Form和ViewStack是Silverlight所缺乏的。Flex还支持基于辅助线的布局，Silverlight里面没有这样的功能。 Silverlight的布局组件不仅数量少，基于附加属性的语法也比较冗长拖沓。 √   样式 Flex的样式语法基于CSS，非常简洁，且对于熟悉HTML的用户来说马上可以上手。 Silverlight的样式声明语法相当繁琐。比较一下Flex/Silverlight的样式设置： Flex: Button { margin: 10; } <mx:Button />   Silverlight: <Style x:Key=”component” TargetType=”Button”>     <Setter Property=”Margin” Value=”10” /> </Style> <Button Style=”{StaticResource component}” /> 可以看到，相比Flex所用的CSS语法来说，Silverlight中超过一半以上的代码是纯粹的语法噪音，只是为了方便解析器而设计的，对设计者来说完全是不必要的额外负担。此外，Silverlight并不直接支持类似Flex的全局样式。虽然StyleManager可以达到类似的效果，但语法更加罗嗦，会使得XAML更加冗长。 √   动画 Flex有多达10多种动画。Silverlight基于依赖属性的动画只相当于Flex的AnimationProperty，数量和功能都比较受限，并且只对于Dependency Property有效。 √   数据绑定 Flex的数据绑定语法直观且简洁，可以使用几乎任意的表达式。声明绑定属性的语法也相当简单，任何属性只要加上一个[Bindable]标签即可。 Silverlight的数据绑定语法相当累赘，至少造成了两个严重后果：1、大量数据绑定属性是造成XAML冗长难读的罪魁祸首；2、依赖属性编写很麻烦，需要大量样本代码，而许多框架特性又严重依赖于依赖属性，使得编写Silverlight组件成为相当累人的工作。 √   通信机制 Flex和Silverlight都支持大量标准化的通信机制，包括XML、Web Service和二进制数据等，支持程度也大致在同一水平上。 Flex略微胜过Silverlight的地方在于Flex有一个标准化的二进制通讯标准：AMF，基于AMF的服务框架不论开源或商业的目前都有广泛的应用。Silverlight在这方面还是一片空白。 √   异常处理 Flex的一个问题是不支持全局异常处理，对框架设计而言这是明显的缺憾。 Silverlight支持应用程序级别的全局异常处理。不过这个异常处理似乎也不是非常完整，有个别异常还是会漏网，造成Silverlight插件出错。   √ 国际化 Flex对国际化的支持比较完整，使用上也很方便。唯一的小问题是支持额外的语言需要要执行一次copylocale命令行。 Silverlight对国际化的支持是有问题的，虽然可以使用，但要做很多手工工作，并且需要一些work around才能成功执行。     其他特性 Flex包括一个非常方便的界面特性：State，在界面有少量变化的时候使用非常方便，可以避免很多不必要的编码。这是Silverlight所欠缺的。 Silverlight的DeepZoom是Flex所没有的功能。 √   外观 外观是否好看应该说是个见仁见智的问题。不过Flex似乎在细节方面做得更好，请看Flex/Silverlight默认按钮外观的比较： Flex组件默认情况下就有一个相当合适的边距，看起来很舒服，基本上不用再作什么调整。Silverlight就差多了，密密麻麻的挤在一起，显得非常局促，必须在样式上作很多调整才会比较好看。在这些细节上Silverlight明显不如Flex。     框架方面Flex可以说是大优势战胜Silverlight。   IDE 特性 比较 胜出 Flex Silverlight 可视化设计器 具有讽刺意味的是，号称Visual的微软开发环境在WPF时代就再也难以自称Visual了。Visual Studio中的Silverlight可视化设计器目前只能说是一个废品，拖拉不能用，属性设置不能用，预览也不能用，并且常常假死，微软自己都似乎不好意思把它显示出来了。Expression Blend说实话也并不好用，不过它编辑XAML时的性能倒是比Visual Studio好多了，至少不会出现经常假死的情况。 Flex Builder编辑器经过几年发展，在可视化设计上已经达到不错的水准，使用也相当方便。不足之处在于不能同时打开太多页面，不然内存的耗用会相当惊人。 √   代码编辑 在代码编辑的方面则是Visual Studio要比Flex Builder表现更好。对于代码辅助和编辑提示方面，Visual Studio比Flex Builder表现更加成熟。 不过Flex Builder也有Visual Studio所不及之处：1、类导航的功能更加丰富，使用快捷键比Visual Studio中更迅捷；2、无论设计还是代码视图都支持文档大纲，浏览和跳转更加方便；3、指定文件编码也要比Visual Studio要容易。   √ 代码隐藏 由于Flex Builder并不直接支持Code Behind模型，因此在界面和对应代码的管理上要比Visual Studio麻烦一些。   √ 编辑器性能 对于可视化编辑器而言，Flex Builder的性能要比Visual Studio好得多。对代码编辑器而言Visual Studio和Flex Builder表现差不多，但Flex Builder占用内存比较厉害。 √   编译器性能 Flex编译性能一直都是一个饱受诟病的重大问题。在项目大到一定程度，编译效率就开始急剧下降，编译一次需要三四十秒是常有的事。（据说有人编译一次甚至需要20分钟以上，不过我还没有遇到） Flex编译慢是有原因的，因为编译器替程序员完成了相当多的工作。如果你打开-keep=true编译开关，检查一下生成的代码，就知道编译器的工作有多繁重了。如果愿意放弃一些可视化特性，手工编写ActionScript组件而避免使用MXML组件，就可以在很大程度上提高编译效率。 从长远角度来说，我认同Flex这种设计思路，用机器效率来换取程序员效率是值得的（Unix格言：宁用计算机一分，不花程序员一秒。）但对于眼下的机器性能来说，Flex编译性能还是一个无法忽略的问题，编译速度太慢会拖慢迭代开发的节奏，对程序员的心理也不能不说是一种折磨。 Silverlight编译效率还是不错的，代价就是冗长的程序代码需要程序员自求多福了，编译器的工作实际上是很轻松的。   √ 调试 在开发环境的支持下，Flex和Silverlight的调试都比较方便。Flex的一个小问题是开发人员需要单独安装一个Debug版本的Flash Player，Silverlight则不用，所以Silverlight更加方便一些。 Silverlight缺少Flex Builder内置的Profiler，没有简单的方法进行性能测试。传统的.Net性能测试工具基本上都不支持Silverlight √   开放性 基于Eclipse的Flex Builder开放性明显要优于封闭的Visual Studio，有大量免费的Eclipse插件可以直接拿来使用。不过有少量插件会与Flex Builder产生冲突。如果没有大量的Java开发工作，那么安装Flex Builder完整版要比插件版更加稳妥并且简单。 Visual Studio的插件数量不多，配合Silverlight Tools使用的目前基本上还没有看到。 √   IDE方面Flex和Silverlight各擅胜场。   环境 特性 比较 胜出 Flex Silverlight 插件大小 目前Flash插件安装包大小为1.8M左右，这么小的体积包含了完整的插件功能可以说是一个了不起的成就。但Air的安装包就有点大到离谱了（约15M），这是因为Air还附带了一个内嵌的HTML解析引擎WebKit。 Silverlight插件安装包大小为4M出头，比Flash大了一倍还多。我比较不理解的一点是既然体积已经这么大了，为什么不干脆把DockPanel、TreeView和DatePicker这些重要的组件加进去，反倒是MultiScaleImage这样未必有多常用的东西成了核心组件？让大量插件用户去另外下载System.Windows.Controls.dll实在是个不小的负担。 √   安装 Flash的插件基本上可以做到全自动安装升级，不必用户手工参与。这也很容易理解为什么Flash Player能够成为占据全球95%以上电脑的装机量最大的软件。 Silverlight插件要麻烦一些，必须用户手工执行安装步骤，这势必影响Silverlight插件的普及。当然微软也可以使用诸如捆绑安装之类的市场手段，这就不再属于技术讨论的范畴了。 √   运行性能 我没有作过这方面的测试，就使用感觉来说还没有发现明显差别。不过我看到外国已经有这方面的测试，结果认为Flex在画面渲染效率上优于Silverlight，而Silverlight则在数学计算上效率高过Flex。考虑到Adobe/Macromedia就是以图形起家的，而微软在编译器上已经深耕多年，这个结果应该不会让人感到惊讶。由于浏览器插件的主要功能还是提供显示，用于大量数学计算的场景并不多见，看起来Flex还是占有一定优势。 √   环境方面Flex仍然占有优势。     最后再说一些比较琐碎的话题，因为不太好分类，并且主观意味比较浓厚，就不再详细比较，当作姑妄言之好了。     Flex和Silverlight目前来看都是存在一些问题的。有些属于语言设计的范畴，比如ActionScript的声明语法比较罗嗦，而Silverlight则是绑定属性的语法特别累赘，但这些问题受系统设计限制，基本上已经没有修改的余地了（除非整个框架推倒重来）。另外一些问题是比较严重但是有望解决的，Flex方面是大项目中的编译速度让人抓狂，不过在Flex Builder 4 beta中似乎已经看到了改善的迹象。Silverlight则是框架还不够完整，界面组件有限。Silverlight 3已经比Silverlight 2有所提高，加上Silverlight Toolkit一类扩展可以得到很大改进。Silverlight的另一严重问题是IDE工具完全没有达到应有的水平，Visual Stuido插件可用性非常差，此问题从Silveright 2到3以后反而有恶化的趋势，VS2010似乎又是个极其吃机器的怪兽，这个问题短期内能否解决，实在让人无法乐观。     如果从程序员的观点来看，Silverlight的语言特性要比Flex更佳：.Net框架结构上更加完备、多种开发语言支持、Linq和客户端多线程，这些都是Flex所欠缺的特性，应该为Silverlight额外加分。可惜受到开发工具和应用范围的限制，这些优势目前并没有充分发挥出来。此外，从从业人员的现状来看，Flex语法更加简单、容易上手，对非程序员颇具吸引力，而C#对这些人来说门槛实在有点过高。所以这些特性是好是坏，眼下也不太好作出结论。     从社区来说，Flex目前已经拥有相当数量的用户和开发社群，其独有的特点是来自设计者和程序员两个背景完全不同的群体，因此意见和风格常常参差不齐，好处是能够看到不同观点的碰撞，比较有活力。Silverlight社区规模还比较小，基本上全部来自微软开发者阵营，背景相当一致，对程序设计通常能够有很好的观点，缺点是对UI设计师的团体和理念缺乏了解，解决思路大多是以程序员为本位的。另外一个似乎不利于Silverlight的现状是：Java/开源阵营基本上不会考虑使用Silverlight，反或来说，以微软技术为平台的开发者倒是还有相当一部分会采用Flex（从博客园的话题分类也可以看得出来）。     Flex和Silverlight未来的趋势如何？看一看这两个技术近几年的发展趋势，Flex仍然具有领先优势，但该优势目前已经有所缩小： Flex 2和Silverlight 1没有什么好比较的，Sliverlight 1功能实在太过贫弱，这时Flex遥遥领先； Flex3和Silveright 2相比，Silverlight在框架结构上比版本1已经有改天换地的提高，拉近了和Flex的距离，但可用组件仍然严重不足； Silveright 3在结构上没有什么重大改变，主要在于功能的完善。如果说Flex 2比Silverlight 1领先整整一步的话，那么到Siliverght 3，这个差距已经缩小到半步，Silverlight在部分特性上甚至超越了Flex。     目前，Silveright 3刚刚出现，各方面的支持仍然有待跟进，Silverlight 4眼下还看不到什么消息。而Adobe已经开始准备Flex 4，目前释出了第一个beta版本，从已经知道的情况分析，这个版本在框架上将会有相当重大的修改，明显意图再度拉大与Silverlight的差距，在许多方面都设计得更加灵活。但兼容性究竟如何、能否允许从前的用户平稳过渡，将会是Flex 4面临的主要问题。     我以前曾经说过，现在仍然这样认为：鉴于微软自身的市场定位，它绝不希望基于Web的技术强大到足以让用户忽略浏览器和操作系统的地步。因此Silverlight将来究竟能发展到什么程度，长远来看还是不得不打上一个很大的问号，即使目前来看微软仍然在力推这门技术。不过已经使用了Silverlight的同学也无须太过顾虑，只要是微软推出的技术，不论好或不好，就算是被放弃以后也还能够生存相当一段时间（看看眼下的IE6）。眼下，Flash在诸如在线视频等市场的领导地位是不争的事实，Silverlight暂时还没有直接与其对抗的力量，并且它们还都面临着一个共同的对手——Ajax，未来还会有HTML5来搅局。所以今后一段时间，我们大概只能看到它们之间发生一些小规模的局部战争。Flash Player在浏览器中的覆盖率现在超过95%，地位已经极其稳固，有如今日之Windows，但同时也意味着基本上再没有上升的空间，只能依势固守。而Silverlight则有望以后起之秀的姿态从Flash中抢走一部分市场份额，然而考虑到其他厂商对微软的警惕心理和Web标准领导话语权的力量，Silverlight恐怕也难以取得非常理想的战绩。作为用户的我们，其实也没有多大必要去在意谁会是最后的赢家（历史为鉴，最终的赢家最初通常都在人们的视野之外。Google勃兴而引导网络时代，当初没有任何人预见到），只要领会时代和技术交锋进步的精彩之处就好了。

基于个人的使用经验，我从语言、框架、开发环境和运行环境四个方面对Flex和Silverlight这两门技术做一个比较，自己认为这个比较还是比较全面的。（这样的比较有意义吗？个人意见，只要别把自己当成宗教教徒，将语言看作工具而不是信仰，那么比较就是有意义的。）   语言（Silverlight以C#为准） 特性 比较 胜出 Flex Silverlight 语法 Flex的编程语言ActionScript在变量与属性声明的方面语法有一点罗嗦（有些类似VB）： public var varName : int; 相比之下C#就要简洁一些： public int varName; 不过，ActionScript支持以字面量的方式声明字典，这方面又比C#的Dictionary来得简明： public var dict = { x: 1, y: 2 };   √ 语言特性 ActionScript支持动态类属性，这是C#目前所不支持的，因此在动态编程方面，Flex要简洁得多，也减少了很多代码生成的工作。 √   OO特性 ActionScript不支持抽象类和抽象方法。虽然对一般性的编程来说没有太大问题，但是对框架设计来说这是一个严重的缺点。   √ 反射 反射对于元编程是相当重要的。Flex的反射机制比较原始，只支持有限的反射方法，并且代码中没有明确引用的类在编译阶段会被排除，这使得动态创建类更为麻烦。 不过得益于语言的动态特性，Flex反射代码比同等的C#代码要更加简明。 Silverlight也排除了一些高级反射特性（比如TypeDescriptor相关的一些方法），不过总体来说反射机制还是比较完整的，但同时反射的语法比较罗嗦。   √ 基本类库 Flex的基本类库相当精简，精简的代价就是有些基本功能（如字符串的trim、日期的格式化）都欠奉，不得不求助于工具类库。Flex的集合类库功能也有一些薄弱。 Silverlight类库也比完整的.Net类库精简了许多，有些时候如操作Xml的时候不大顺手。不过大体上来说还是够用的。   √ 扩充特性 E4X是Flex的独有特性，在Flex中使用XML简单到了让Linq to XML也相形见绌的地步。 Silverlight胜于Flex之处包括：Linq to object、lambda表达式和显式多线程，这些都是Flex所不支持的。   √ 语言支持 Flex只支持ActionScript，Silverlight则支持C#、VB、IronPython、IronRuby、JScript等多种语言。但不论Visual Studio还是Expression Blend都没有为脚本语言创建项目提供任何支持，这使得Silverlight的多语言优势打了一个很大的折扣   √ 总的来说，语言方面是Silverlight大胜Flex。   框架 特性 比较 胜出 Flex Silverlight 界面组件 经过几年发展，Flex的界面组件已经比较完整。基本框架中包括超过50个界面组件，远远超过Silverlight的组件数量。但是Flex里也缺少如AutoComplete等少数重要组件。 Silverlight本身就组件数量和功能方面远逊于Flex，不过添加Silverlight Toolkit以后可以在一定程度上弥补其不足。 √   布局 Flex的布局机制简单且灵活。Canvas支持多种对齐和摆放方式，灵活性远远超过Silverlight Canvas，是布局中最常使用的组件。Canvas、HBox和VBox三个组件基本上可以包揽90%上界面布局的工作。 此外，Flex中还有一些布局组件如Panel、Form和ViewStack是Silverlight所缺乏的。Flex还支持基于辅助线的布局，Silverlight里面没有这样的功能。 Silverlight的布局组件不仅数量少，基于附加属性的语法也比较冗长拖沓。 √   样式 Flex的样式语法基于CSS，非常简洁，且对于熟悉HTML的用户来说马上可以上手。 Silverlight的样式声明语法相当繁琐。比较一下Flex/Silverlight的样式设置： Flex: Button { margin: 10; } <mx:Button />   Silverlight: <Style x:Key=”component” TargetType=”Button”>     <Setter Property=”Margin” Value=”10” /> </Style> <Button Style=”{StaticResource component}” /> 可以看到，相比Flex所用的CSS语法来说，Silverlight中超过一半以上的代码是纯粹的语法噪音，只是为了方便解析器而设计的，对设计者来说完全是不必要的额外负担。此外，Silverlight并不直接支持类似Flex的全局样式。虽然StyleManager可以达到类似的效果，但语法更加罗嗦，会使得XAML更加冗长。 √   动画 Flex有多达10多种动画。Silverlight基于依赖属性的动画只相当于Flex的AnimationProperty，数量和功能都比较受限，并且只对于Dependency Property有效。 √   数据绑定 Flex的数据绑定语法直观且简洁，可以使用几乎任意的表达式。声明绑定属性的语法也相当简单，任何属性只要加上一个[Bindable]标签即可。 Silverlight的数据绑定语法相当累赘，至少造成了两个严重后果：1、大量数据绑定属性是造成XAML冗长难读的罪魁祸首；2、依赖属性编写很麻烦，需要大量样本代码，而许多框架特性又严重依赖于依赖属性，使得编写Silverlight组件成为相当累人的工作。 √   通信机制 Flex和Silverlight都支持大量标准化的通信机制，包括XML、Web Service和二进制数据等，支持程度也大致在同一水平上。 Flex略微胜过Silverlight的地方在于Flex有一个标准化的二进制通讯标准：AMF，基于AMF的服务框架不论开源或商业的目前都有广泛的应用。Silverlight在这方面还是一片空白。 √   异常处理 Flex的一个问题是不支持全局异常处理，对框架设计而言这是明显的缺憾。 Silverlight支持应用程序级别的全局异常处理。不过这个异常处理似乎也不是非常完整，有个别异常还是会漏网，造成Silverlight插件出错。   √ 国际化 Flex对国际化的支持比较完整，使用上也很方便。唯一的小问题是支持额外的语言需要要执行一次copylocale命令行。 Silverlight对国际化的支持是有问题的，虽然可以使用，但要做很多手工工作，并且需要一些work around才能成功执行。     其他特性 Flex包括一个非常方便的界面特性：State，在界面有少量变化的时候使用非常方便，可以避免很多不必要的编码。这是Silverlight所欠缺的。 Silverlight的DeepZoom是Flex所没有的功能。 √   外观 外观是否好看应该说是个见仁见智的问题。不过Flex似乎在细节方面做得更好，请看Flex/Silverlight默认按钮外观的比较： <!--[if !vml]--> <!--[endif]--> Flex组件默认情况下就有一个相当合适的边距，看起来很舒服，基本上不用再作什么调整。Silverlight就差多了，密密麻麻的挤在一起，显得非常局促，必须在样式上作很多调整才会比较好看。在这些细节上Silverlight明显不如Flex。     框架方面Flex可以说是大优势战胜Silverlight。   IDE 特性 比较 胜出 Flex Silverlight 可视化设计器 具有讽刺意味的是，号称Visual的微软开发环境在WPF时代就再也难以自称Visual了。Visual Studio中的Silverlight可视化设计器目前只能说是一个废品，拖拉不能用，属性设置不能用，预览也不能用，并且常常假死，微软自己都似乎不好意思把它显示出来了。Expression Blend说实话也并不好用，不过它编辑XAML时的性能倒是比Visual Studio好多了，至少不会出现经常假死的情况。 Flex Builder编辑器经过几年发展，在可视化设计上已经达到不错的水准，使用也相当方便。不足之处在于不能同时打开太多页面，不然内存的耗用会相当惊人。 √   代码编辑 在代码编辑的方面则是Visual Studio要比Flex Builder表现更好。对于代码辅助和编辑提示方面，Visual Studio比Flex Builder表现更加成熟。 不过Flex Builder也有Visual Studio所不及之处：1、类导航的功能更加丰富，使用快捷键比Visual Studio中更迅捷；2、无论设计还是代码视图都支持文档大纲，浏览和跳转更加方便；3、指定文件编码也要比Visual Studio要容易。   √ 代码隐藏 由于Flex Builder并不直接支持Code Behind模型，因此在界面和对应代码的管理上要比Visual Studio麻烦一些。   √ 编辑器性能 对于可视化编辑器而言，Flex Builder的性能要比Visual Studio好得多。对代码编辑器而言Visual Studio和Flex Builder表现差不多，但Flex Builder占用内存比较厉害。 √   编译器性能 Flex编译性能一直都是一个饱受诟病的重大问题。在项目大到一定程度，编译效率就开始急剧下降，编译一次需要三四十秒是常有的事。（据说有人编译一次甚至需要20分钟以上，不过我还没有遇到） Flex编译慢是有原因的，因为编译器替程序员完成了相当多的工作。如果你打开-keep=true编译开关，检查一下生成的代码，就知道编译器的工作有多繁重了。如果愿意放弃一些可视化特性，手工编写ActionScript组件而避免使用MXML组件，就可以在很大程度上提高编译效率。 从长远角度来说，我认同Flex这种设计思路，用机器效率来换取程序员效率是值得的（Unix格言：宁用计算机一分，不花程序员一秒。）但对于眼下的机器性能来说，Flex编译性能还是一个无法忽略的问题，编译速度太慢会拖慢迭代开发的节奏，对程序员的心理也不能不说是一种折磨。 Silverlight编译效率还是不错的，代价就是冗长的程序代码需要程序员自求多福了，编译器的工作实际上是很轻松的。   √ 调试 在开发环境的支持下，Flex和Silverlight的调试都比较方便。Flex的一个小问题是开发人员需要单独安装一个Debug版本的Flash Player，Silverlight则不用，所以Silverlight更加方便一些。 Silverlight缺少Flex Builder内置的Profiler，没有简单的方法进行性能测试。传统的.Net性能测试工具基本上都不支持Silverlight √   开放性 基于Eclipse的Flex Builder开放性明显要优于封闭的Visual Studio，有大量免费的Eclipse插件可以直接拿来使用。不过有少量插件会与Flex Builder产生冲突。如果没有大量的Java开发工作，那么安装Flex Builder完整版要比插件版更加稳妥并且简单。 Visual Studio的插件数量不多，配合Silverlight Tools使用的目前基本上还没有看到。 √   IDE方面Flex和Silverlight各擅胜场。   环境 特性 比较 胜出 Flex Silverlight 插件大小 目前Flash插件安装包大小为1.8M左右，这么小的体积包含了完整的插件功能可以说是一个了不起的成就。但Air的安装包就有点大到离谱了（约15M），这是因为Air还附带了一个内嵌的HTML解析引擎WebKit。 Silverlight插件安装包大小为4M出头，比Flash大了一倍还多。我比较不理解的一点是既然体积已经这么大了，为什么不干脆把DockPanel、TreeView和DatePicker这些重要的组件加进去，反倒是MultiScaleImage这样未必有多常用的东西成了核心组件？让大量插件用户去另外下载System.Windows.Controls.dll实在是个不小的负担。 √   安装 Flash的插件基本上可以做到全自动安装升级，不必用户手工参与。这也很容易理解为什么Flash Player能够成为占据全球95%以上电脑的装机量最大的软件。 Silverlight插件要麻烦一些，必须用户手工执行安装步骤，这势必影响Silverlight插件的普及。当然微软也可以使用诸如捆绑安装之类的市场手段，这就不再属于技术讨论的范畴了。 √   运行性能 我没有作过这方面的测试，就使用感觉来说还没有发现明显差别。不过我看到外国已经有这方面的测试，结果认为Flex在画面渲染效率上优于Silverlight，而Silverlight则在数学计算上效率高过Flex。考虑到Adobe/Macromedia就是以图形起家的，而微软在编译器上已经深耕多年，这个结果应该不会让人感到惊讶。由于浏览器插件的主要功能还是提供显示，用于大量数学计算的场景并不多见，看起来Flex还是占有一定优势。 √   环境方面Flex仍然占有优势。     最后再说一些比较琐碎的话题，因为不太好分类，并且主观意味比较浓厚，就不再详细比较，当作姑妄言之好了。   Flex和Silverlight目前来看都是存在一些问题的。有些属于语言设计的范畴，比如ActionScript的声明语法比较罗嗦，而Silverlight则是绑定属性的语法特别累赘，但这些问题受系统设计限制，基本上已经没有修改的余地了（除非整个框架推倒重来）。另外一些问题是比较严重但是有望解决的，Flex方面是大项目中的编译速度让人抓狂，不过在Flex Builder 4 beta中似乎已经看到了改善的迹象。Silverlight则是框架还不够完整，界面组件有限。Silverlight 3已经比Silverlight 2有所提高，加上Silverlight Toolkit一类扩展可以得到很大改进。Silverlight的另一严重问题是IDE工具完全没有达到应有的水平，Visual Stuido插件可用性非常差，此问题从Silveright 2到3以后反而有恶化的趋势，VS2010似乎又是个极其吃机器的怪兽，这个问题短期内能否解决，实在让人无法乐观。   如果从程序员的观点来看，Silverlight的语言特性要比Flex更佳：.Net框架结构上更加完备、多种开发语言支持、Linq和客户端多线程，这些都是Flex所欠缺的特性，应该为Silverlight额外加分。可惜受到开发工具和应用范围的限制，这些优势目前并没有充分发挥出来。此外，从从业人员的现状来看，Flex语法更加简单、容易上手，对非程序员颇具吸引力，而C#对这些人来说门槛实在有点过高。所以这些特性是好是坏，眼下也不太好作出结论。   从社区来说，Flex目前已经拥有相当数量的用户和开发社群，其独有的特点是来自设计者和程序员两个背景完全不同的群体，因此意见和风格常常参差不齐，好处是能够看到不同观点的碰撞，比较有活力。Silverlight社区规模还比较小，基本上全部来自微软开发者阵营，背景相当一致，对程序设计通常能够有很好的观点，缺点是对UI设计师的团体和理念缺乏了解，解决思路大多是以程序员为本位的。另外一个似乎不利于Silverlight的现状是：Java/开源阵营基本上不会考虑使用Silverlight，反或来说，以微软技术为平台的开发者倒是还有相当一部分会采用Flex（从博客园的话题分类也可以看得出来）。   Flex和Silverlight未来的趋势如何？看一看这两个技术近几年的发展趋势，Flex仍然具有领先优势，但该优势目前已经有所缩小： <!--[if !supportLists]--> <!--[endif]-->Flex 2和Silverlight 1没有什么好比较的，Sliverlight 1功能实在太过贫弱，这时Flex遥遥领先； <!--[if !supportLists]--> <!--[endif]-->Flex3和Silveright 2相比，Silverlight在框架结构上比版本1已经有改天换地的提高，拉近了和Flex的距离，但可用组件仍然严重不足； <!--[if !supportLists]--> <!--[endif]-->Silveright 3在结构上没有什么重大改变，主要在于功能的完善。如果说Flex 2比Silverlight 1领先整整一步的话，那么到Siliverght 3，这个差距已经缩小到半步，Silverlight在部分特性上甚至超越了Flex。 目前，Silveright 3刚刚出现，各方面的支持仍然有待跟进，Silverlight 4眼下还看不到什么消息。而Adobe已经开始准备Flex 4，目前释出了第一个beta版本，从已经知道的情况分析，这个版本在框架上将会有相当重大的修改，明显意图再度拉大与Silverlight的差距，在许多方面都设计得更加灵活。但兼容性究竟如何、能否允许从前的用户平稳过渡，将会是Flex 4面临的主要问题。 我以前曾经说过，现在仍然这样认为：鉴于微软自身的市场定位，它绝不希望基于Web的技术强大到足以让用户忽略浏览器和操作系统的地步。因此Silverlight将来究竟能发展到什么程度，长远来看还是不得不打上一个很大的问号，即使目前来看微软仍然在力推这门技术。不过已经使用了Silverlight的同学也无须太过顾虑，只要是微软推出的技术，不论好或不好，就算是被放弃以后也还能够生存相当一段时间（看看眼下的IE6）。眼下，Flash在诸如在线视频等市场的领导地位是不争的事实，Silverlight暂时还没有直接与其对抗的力量，并且它们还都面临着一个共同的对手——Ajax，未来还会有HTML5来搅局。所以今后一段时间，我们大概只能看到它们之间发生一些小规模的局部战争。Flash Player在浏览器中的覆盖率现在超过95%，地位已经极其稳固，有如今日之Windows，但同时也意味着基本上再没有上升的空间，只能依势固守。而Silverlight则有望以后起之秀的姿态从Flash中抢走一部分市场份额，然而考虑到其他厂商对微软的警惕心理和Web标准领导话语权的力量，Silverlight恐怕也难以取得非常理想的战绩。作为用户的我们，其实也没有多大必要去在意谁会是最后的赢家（历史为鉴，最终的赢家最初通常都在人们的视野之外。Google勃兴而引导网络时代，当初没有任何人预见到），只要领会时代和技术交锋进步的精彩之处就好了。 原文地址:http://www.cnblogs.com/shuhari/archive/2009/08/21/flex_silverlight_compare     本文转自温景良(Jason)博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2009/08/21/1551397.html，如需转载请自行联系原作者  

阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开发基本知识点 一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html { font-size: 100px; } } @media(min-width: 360px) { html { font-size: 112.5px; } } @media(min-width: 400px) { html { font-size: 125px; } } @media(min-width: 640px) { html { font-size: 200px; } } 给手机设置100px的字体大小; 对于320px的手机匹配是100px， 其他手机都是等比例匹配; 因此设计稿上是多少像素的话，那么转换为rem的时候，rem = 设计稿的像素/100 即可; 二.  禁用a,button,input,optgroup,select,textarea 等标签背景变暗 在移动端使用a标签做按钮的时候或者文字连接的时候，点击按钮会出现一个 "暗色的"背景，比如如下代码：   <a href="">button1</a>   <input type="button" value="提交"/> 在移动端点击后 会出现"暗色"的背景，这时候我们需要在css加入如下代码即可： a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); } 三. meta基础知识点：    1.页面窗口自动调整到设备宽度，并禁止用户及缩放页面。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" /> 属性基本含义：   content="width=device-width：   控制 viewport 的大小,device-width 为设备的宽度   initial-scale - 初始的缩放比例   minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例   user-scalable - 用户是否可以手动缩放 2.忽略将页面中的数字识别为电话号码   <meta name="format-detection" content="telephone=no" /> 3. 忽略Android平台中对邮箱地址的识别    <meta name="format-detection" content="email=no" /> 4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> 5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> 6. 需要在网站的根目录下存放favicon图标，防止404请求(使用fiddler可以监听到)，在页面上需加link如下： <link rel="shortcut icon" href="/favicon.ico"> 因此页面上通用的模板如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> 这里开始内容 </body> </html> 四：移动端如何定义字体font-family body{font-family: "Helvetica Neue", Helvetica, sans-serif;} 五：在android或者IOS下 拨打电话代码如下： <a href="tel:15602512356">打电话给:15602512356</a> 六：发短信(winphone系统无效) <a href="sms:10010">发短信给: 10010</a> 七：调用手机系统自带的邮件功能 1. 当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面 <p><a href="mailto:tugenhua@126.com">发电子邮件</a></p> 2、填写抄送地址; 在IOS手机下：在收件人地址后用?cc=开头; 如下代码： <p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p> 在android手机下，如下代码： <p><a href="mailto:tugenhua@126.com?879083421@qq.com">填写抄送地址</a></p> 3. 填上密件抄送地址，如下代码： 在IOS手机下：紧跟着抄送地址之后，写上&bcc=，填上密件抄送地址 <a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a> 在安卓下;如下代码： <p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p> 4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码： <p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p> 5、包含主题，用?subject=可以填上主题。如下代码： <p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p> 6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下： <p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p> 7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码： <p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p> 八：webkit表单输入框placeholder的颜色值改变： 如果想要默认的颜色显示红色，代码如下： input::-webkit-input-placeholder{color:red;} 如果想要用户点击变为蓝色，代码如下： input:focus::-webkit-input-placeholder{color:blue;} 九：移动端IOS手机下清除输入框内阴影，代码如下 input,textarea {    -webkit-appearance: none; } 十：在IOS中 禁止长按链接与图片弹出菜单 a, img {    -webkit-touch-callout: none;  } 回到顶部 calc基本用法 calc基本语法： .class {width: calc(expression);} 它可以支持加，减，乘，除; 在我们做手机端的时候非常有用的一个知识点; 优点如下： 1. 支持使用 "+","-","*" 和 "/" 四则运算。 2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。 浏览器的兼容性有如下： IE9+，FF4.0+，Chrome19+，Safari6+ 如下测试代码： <div class="calc">我是测试calc</div> .calc{ margin-left:50px; padding-left:2rem; width:calc(100%-50px-2rem); height:10rem; } 回到顶部 box-sizing的理解及使用 该属性是解决盒模型在不同的浏览器中表现不一致的问题。它有三个属性值分别是： content-box: 默认值(标准盒模型); width和height只包括内容的宽和高，不包括边框，内边距; 比如如下div元素：<div class="box">box</div> css如下：.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;} 那么在浏览器下渲染的实际宽度和高度分别是：222px,222px; 因为在标准的盒模型下，在浏览器中渲染的实际宽度和高度包括 内边距(padding)和边框的(border);如下图所示： border-box: width与height是包括内边距和边框的，不包括外边距，这是IE的怪异模式使用的盒模型，比如还是上面的代码： <div class="box">box</div>; css代码如下： .box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;} 那么此时浏览器渲染的width会是178px，height也是178px; 因为此时定义的width和height会包含padding和border在内; 使用这个属性对于在使用百分比的情况下布局页面非常有用，比如有两列布局宽度都是50%;但是呢还有padding和border，那么这个 时候如果我们不使用该属性的话(当然我们也可以使用calc方法来计算); 那么总宽度会大于页面中的100%;因此这时候可以使用这 个属性来使页面达到100%的布局.如下图所示： 浏览器支持的程度如下： 回到顶部 理解display:box的布局 display: box; box-flex 是css3新添加的盒子模型属性，它可以为我们解决按比列划分，水平均分，及垂直等高等。 一：按比例划分： 目前box-flex 属性还没有得到firefox, Opera, chrome浏览器的完全支持，但我们可以使用它们的私有属性定义firefox(-moz-)，opera(-o-)，chrome/safari（-webkit-）。box-flex属性主要让子容器针对父容器的宽度按一定的规则进行划分。 代码如下： <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下图所示： 注意： 1. 必须给父容器定义 display: box, 其子元素才可以进行划分。如上给id为p1设置box-flex设置为1，给id为p2设置box-flex为2， 说明分别给其设置1等分和2等分，也就是说给id为p1元素设置宽度为 300 * 1/3 = 100px; 给id为p2元素设置宽度为 300 * 2/3 = 200px; 2. 如果进行父容器划分的同时，他的子元素有的设置了宽度，有的要进行划分的话，那么划分的宽度 = 父容器的宽度 – 已经设置的宽度 。 再进行对应的划分。 如下图所示： 二：box具体的属性如下： box-orient | box-direction | box-align | box-pack | box-lines 1. box-orient; box-orient 用来确定父容器里的子容器的排列方式，是水平还是垂直，可选属性如下所示：    horizontal | vertical | inline-axis | block-axis | inherit一：horizontal | inline-axis 给box设置 horizontal 或 inline-axis 属性效果表现一致。都可以将子元素进行水平排列. 如下html代码： <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> css代码如下： <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下图所示： 二：vertical 可以让子元素进行垂直排列;  css代码如下： <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下图所示： 三：inherit。 Inherit属性让子元素继承父元素的相关属性。 效果和第一种效果一样，都是水平对齐; 2. box-direction 还是如下html代码： <div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> box-direction 用来确定父容器里的子容器的排列顺序，具体的属性如下代码所示：    normal | reverse | inherit normal是默认值，按照HTML文档里的结构的先后顺序依次展示， 如果box-direction 设置为 normal，则结构顺序还是 id为p1元素，id为p2元素。 reverse: 表示反转。如果设置reverse反转，则结构排列顺序为 id为p2元素，id为p1元素。如下代码： css代码如下： <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style> 如下图所示： 3. box-align: box-align 表示容器里面字容器的垂直对齐方式，可选参数如下表示： start | end | center | baseline | stretch 1. 对齐方式 start：表示居顶对齐 代码如下： <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-align:start; -webkit-box-align:start; box-align:start; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; height:160px; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; height:100px; border:1px solid blue; } </style> 如上 P1 高度为160px p2 为100px; 对齐方式如下图所示： 如果改为end的话，那么就是 居低对齐了，如下： center表示居中对齐，如下： stretch 在box-align表示拉伸，拉伸与其父容器等高。如下代码： 在firefox下 和父容器下等高，满足条件，如下： 在chrome下不满足条件；如下： 4. box-pack box-pack表示父容器里面子容器的水平对齐方式，可选参数如下表示：   start | end | center | justify box-pack:start; 表示水平居左对齐，对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间） 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）代码如下所示： <style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:400px; height:120px; border:1px solid #333; -moz-box-pack:start; -webkit-box-pack:start; box-pack:start; } #p1{ width:100px; height:108px; border:1px solid red; } #p2{ width:100px; height:108px; border:1px solid blue; } </style> 如下图所示： box-pack:center;  表示水平居中对齐,均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后; 如下图所示： box-pack:end; 表示水平居右对齐;对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。如下图所示： box-pack:Justify： 在box-pack表示水平等分父容器宽度（在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）） 如下： 回到顶部 理解flex布局     我们传统的布局方式是基于在盒子模型下的，依赖于display属性的，position属性的或者是float属性的，但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话，我们常见的会让其元素表现为表格形式，比如display:table-cell属性什么的，我们现在来学习下使用flex布局是非常方便的;目前的浏览器支持程度： IE10+，chrome21+，opera12.1+，Firefox22+，safari6.1+等; 如上浏览器的支持程度，我们可以把此元素使用在移动端很方便; flex是什么呢？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。flex的弹性布局有如下优势：   1.独立的高度控制与对齐。   2.独立的元素顺序。   3.指定元素之间的关系。   4.灵活的尺寸与对齐方式。一：基本概念：    采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。如下图： 容器默认存在2根轴，水平的主轴和垂直的侧轴，主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做 main end. 交叉轴的开始位置叫做 cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size， 占据的交叉轴空间叫做cross size。二：容器有如下6个属性 flex-direction flex-wrap flex-flow justify-content align-items align-content 我们分别来看下上面6个属性有哪些值，分别代表什么意思。1. flex-direction：该属性决定主轴的方向(即项目的排列方向)。 它可能有四个值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 我们来做几个demo，来分别理解下上面几个值的含义;我这边只讲解上面第一个和第二个值的含义，下面的也是一样， 就不讲解了; 比如页面上有一个容器，里面有一个元素，看下这个元素的排列方向。 HTML代码：(如没有特别的说明，下面的html代码都是该结构)： <div class="first-face container"> <span class="pip"></span> </div> css代码如下： <style> html, body { height: 100%; } .container { width:150px; height:150px; border:1px solid red; } .first-face { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction:row; display: -webkit-box; -webkit-box-pack:start; } .pip { display:block; width: 24px; height: 24px; border-radius: 50%; background-color: #333; } </style> 注意：在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。不支持该属性，因此使用display: flex;的时候需要加上display: -webkit-box; 还有一些水平对齐或者垂直对齐都需要加上对应的box-pack(box-pack表示父容器里面子容器的水平对齐方式)及box-align(box-align 表示容器里面子容器的垂直对齐方式）.具体的可以看如下介绍的 display:box属性那一节。 我们可以看下截图如下： 当我们把flex-direction的值改为 row-reverse后(主轴为水平方向，起点在右端)，我们截图如下所示： 2. flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，可以换行。 它有如下三个值：    nowrap（默认）：不换行。    wrap：换行，第一行在上方。    wrap-reverse：换行，第一行在下方。 3. flex-flow 该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 4. justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。下面假设主轴为从左到右。 值为如下： flex-start | flex-end | center | space-between | space-around; flex-start(默认值) 左对齐 flex-end 右对齐 center 居中 space-between： 两端对齐，项目之间的间隔都相等 space-around：每个项目两侧的间隔相等。 5. align-items属性 align-items属性定义项目在交叉轴上如何对齐。 它可能取5个值： flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 6. align-content属性 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 该属性可能取6个值。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 三：项目的属性，以下有6个属性可以设置在项目中， order flex-grow flex-shrink flex-basis flex align-self1. order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 基本语法： .xx {order: <integer>;}2. flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 基本语法： .xx {    flex-grow: <number>;  }3. flex-shrink属性 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 基本语法： .xx { flex-shrink: <number>;  }4. flex-basis属性 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 基本语法： .xx { flex-basis: <length> | auto;} 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。5. flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 6. align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 基本语法： .xx {      align-self: auto | flex-start | flex-end | center | baseline | stretch; } 上面是基本语法，感觉好模糊啊，看到这么多介绍，感觉很迷茫啊，下面我们趁热打铁来实现下demo。 我们很多人会不会打麻将呢？打麻将中有1-9丙对吧，我们来分别来实现他们的布局; 首先我们的HTML代码还是如下(如果没有特别的说明都是这样的结构)： 一： 1丙 HTML代码： <div class="first-face container"> <span class="pip"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 css代码结构如下： <style> html, body { height: 100%; } .container { width:150px; height:150px; border:1px solid red; } .first-face { } .pip { display:block; width: 24px; height: 24px; border-radius: 50%; background-color: #333; } </style> 1. 首先，只有一个左上角的情况下，flex布局默认为左对齐，因此需要display:flex即可;如下代码： .first-face { display: flex; display: -webkit-box; } 上面为了兼容UC浏览器和IOS浏览器下，因此需要加上display: -webkit-box;来兼容，我们也明白，如果不加上.first-face里面的代码，也能做出效果，因为元素默认都是向左对齐的，如下图所示： 我们继续来看看对元素进行居中对齐; 需要加上 justify-content: center;即可;但是在UC浏览器下不支持该属性， 我们水平对齐需要加上box-pack，box-pack表示父容器里面子容器的水平对齐方式，具体的值如上面介绍的box的语法， 需要加上 -webkit-box-pack:center; 因此在first-face里面的css代码变为如下代码： .first-face { display: flex; display: -webkit-box; justify-content:center; -webkit-box-pack:center; } 效果如下： 上面已经介绍过 justify-content属性定义了项目在主轴上的对齐方式(水平方向上)，有五个值，这里不再介绍，具体可以看上面的基本语法。 水平右对齐代码也一样、因此代码变成如下： .first-face { display: flex; display: -webkit-box; justify-content:flex-end; -webkit-box-pack:end; } 如下图所示： 2. 我们接着来分别看看垂直居左对齐，垂直居中对齐，垂直居右对齐.一：垂直居左对齐 我们现在需要使用上align-items属性了，该属性定义项目在交叉轴上如何对齐。具体的语法如上： 同样为了兼容UC浏览器或其他不支持的浏览器，我们需要加上box-align 该属性表示容器里面字容器的垂直对齐方式;具体的语法如上; 因此代码变成如下： .first-face { display: flex; display: -webkit-box; align-items:center; -webkit-box-align:center; } 效果如下： 二：垂直居中对齐 现在垂直已经居中对齐了，但是在水平上还未居中对齐，因此在水平上居中对齐，我们需要加上justify-content属性居中即可; 同样为了兼容UC浏览器，需要加上 -webkit-box-pack:center; 代码变为如下： .first-face { display: flex; display: -webkit-box; align-items:center; -webkit-box-align:center; justify-content:center; -webkit-box-pack:center; } 效果如下： 三：垂直居右对齐 原理和上面的垂直居中对齐是一个道理，只是值换了下而已;代码如下： .first-face { display: flex; display: -webkit-box; align-items:center; -webkit-box-align:center; justify-content:flex-end; -webkit-box-pack:end; } 效果如下： 3. 我们接着来分别看看底部居左对齐，底部居中对齐，底部居右对齐. 一：底部居左对齐 其实属性还是用到上面的，只是值换了一下而已;代码如下： .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:flex-start; -webkit-box-pack:start; } 效果如下： 二：底部居中对齐 代码变为如下： .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:center; -webkit-box-pack:center; } 效果如下： 三：底部居右对齐 代码变为如下： .first-face { display: flex; display: -webkit-box; align-items:flex-end; -webkit-box-align:end; justify-content:flex-end; -webkit-box-pack:end; } 效果如下： 二：2丙 1. 水平上2端对齐; 需要使用的属性justify-content: space-between;该属性能使第一个元素在左边，最后一个元素在右边。 因此代码变成如下： .first-face { display: flex; justify-content: space-between; } 但是在UC浏览器下不生效，因此我们需要 display: -webkit-box;和-webkit-box-pack:Justify;这两句代码; display: -webkit-box;我不多介绍，上面已经讲了，-webkit-box-pack:Justify;的含义是在box-pack表示水平等分父容器宽度。 因此为了兼容UC浏览器，所以代码变成如下： .first-face { display: flex; justify-content: space-between; display: -webkit-box; -webkit-box-pack:Justify; } 效果如下： 2. 垂直两端对齐; 垂直对齐需要使用到的flex-direction属性，该属性有一个值为column：主轴为垂直方向，起点在上沿。 代码变为如下： .first-face { display: flex; justify-content: space-between; flex-direction: column; } 再加上justify-content: space-between;说明两端对齐.但是在UC浏览器并不支持该属性，使其不能垂直两端对齐，因此为了兼容UC浏览器，需要使用-webkit-box;因此 整个代码变成如下： .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; } 如上使用 -webkit-box-direction: normal; 使其对齐方向为水平从左端开始，-webkit-box-orient: vertical;使用这句代码告诉 浏览器是垂直的,-webkit-box-pack:justify;这句代码告诉浏览器垂直的两端对齐。 如下图所示： 3. 垂直居中两端对齐 代码如下： .first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } 多加一句 align-items: center;代码; 表示交叉轴上居中对齐。同理在UC浏览器下不支持的，因此我们为了兼容UC浏览器，可以加上如下代码，因此整个代码如下： .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:center; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:center; } 再加上-webkit-box-align:center;这句代码，告诉浏览器垂直居中。 如下图所示： 4. 垂直居右两端对齐 代码如下： .first-face { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } 同理为了兼容UC浏览器，整个代码变成如下： .first-face { display: flex; justify-content: space-between; -webkit-flex-direction: column; flex-direction: column; align-items:flex-end; display: -webkit-box; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack:justify; -webkit-box-align:end; } 和上面代码一样，只是更改了一下垂直对齐方式而已; 如下图所示： 注意：下面由于时间的关系，先不考虑UC浏览器的兼容 三：3丙 代码如下： HTML代码： <div class="first-face container"> <span class="pip"></span> <span class="pip"></span> <span class="pip"></span> </div> CSS代码如下： .first-face { display: flex; flex-direction: column; justify-content: space-between; } .pip:nth-child(2) { align-self: center; } .pip:nth-child(3) { align-self: flex-end; } 如下图所示： 四： 4丙 代码如下： HTML代码： <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> CSS代码如下： .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } 如下图所示： 五：5丙 HTML结构如下： <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> css代码如下： .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } .first-face .column:nth-of-type(2){ justify-content: center; } 如下图所示： 六：6丙 HTML结构如下： <div class="first-face container"> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> <div class="column"> <span class="pip"></span> <span class="pip"></span> </div> </div> css代码如下： .column{ display: flex; justify-content: space-between; } .first-face { display: flex; flex-direction: column; justify-content: space-between; } 如下图所示： 7,8,9丙也是一个意思，这里先不做了; 回到顶部 Flex布局兼容知识点总结 假设父容器class为 box,子项目为item. 旧版语法如下：一：定义容器的display属性。 旧语法如下写法： .box { display: -moz-box; display: -webkit-box; display: box; } 新版语法需要如下写： .box{ display: -webkit-flex; display: flex; } 或者 行内 .box{ display: -webkit-inline-flex; display:inline-flex; } 二：容器属性(旧版语法) 1. box-pack 属性;(水平方向上对齐方式) box-pack定义子元素主轴对齐方式。 .box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack: center; } box-pack属性总共有4个值： .box{    box-pack: start | end | center | justify;    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/ } 各个值的含义如下： start:    对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间)    对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间） end:   对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。   对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。 center:    均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后. justify:    在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。 2.box-align 属性(垂直方向上的对齐方式) box-align定义子元素交叉轴对齐方式。 .box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; } box-align属性总共有5个值： .box{ box-align: start | end | center | baseline | stretch; /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/ } 各个值的含义如下： start:    对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。    对于反方向的框，每个子元素的下边缘沿着框的底边放置。 end:    对于正常方向的框，每个子元素的下边缘沿着框的底边放置。    对于反方向的框，每个子元素的上边缘沿着框的顶边放置。 center:     均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。 baseline:     如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。 stretch:    拉伸子元素以填充包含块 3.box-direction 属性 box-direction定义子元素的显示方向。 .box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; } box-direction属性总共有3个值： .box{ box-direction: normal | reverse | inherit; /*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/ } 4.box-orient 属性 box-orient定义子元素是否应水平或垂直排列。 .box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; } box-orient属性总共有5个值： .box{ box-orient: horizontal | vertical | inline-axis | block-axis | inherit; /*排列方向：水平 | 垂直 | 行内方式排列（默认） | 块方式排列 | 继承父级的box-orient*/ } horizontal: 在水平行中从左向右排列子元素。 vertical: 从上向下垂直排列子元素。 inline-axis： 沿着行内轴来排列子元素（映射为 horizontal）。 block-axis： 沿着块轴来排列子元素（映射为 vertical）。 inherit： 应该从父元素继承 box-orient 属性的值。 5.box-lines 属性 box-lines定义当子元素超出了容器是否允许子元素换行。 .box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; } box-lines属性总共有2个值： .box{ box-lines: single | multiple; /*允许换行：不允许（默认） | 允许*/ } single：伸缩盒对象的子元素只在一行内显示 multiple：伸缩盒对象的子元素超出父元素的空间时换行显示 6.box-flex 属性。 box-flex定义是否允许当前子元素伸缩。 .item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ box-flex: 1.0; } box-flex属性使用一个浮点值： .item{ box-flex: <value>; /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/ } 7.box-ordinal-group 属性 box-ordinal-group定义子元素的显示次序，数值越小越排前。 .item{ -moz-box-ordinal-group: 1; /*Firefox*/ -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ box-ordinal-group: 1; } box-direction属性使用一个整数值： .item{ box-ordinal-group: <integer>; /*显示次序：<一个整数，默认为1，数值越小越排前>*/ } 新版语法如下： 定义容器的display属性： .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器样式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse; /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/ flex-flow: <flex-direction> <flex-wrap>; /*主轴方向和换行简写*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/ } flex-direction值介绍如下：     row: 默认值。灵活的项目将水平显示，正如一个行一样。     row-reverse: 与 row 相同，但是以相反的顺序。     column: 灵活的项目将垂直显示，正如一个列一样。     column-reverse: 与 column 相同，但是以相反的顺序。 flex-wrap 值介绍如下:     nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。     wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行。      wrap-reverse： 换行并第一行在下方 flex-flow值介绍如下(主轴方向和换行简写)：     <flex-direction>: 定义弹性盒子元素的排列方向     <flex-wrap>：控制flex容器是单行或者多行。 justify-content值介绍如下：     flex-start: 弹性盒子元素将向行起始位置对齐。     flex-end: 弹性盒子元素将向行结束位置对齐。     center: 弹性盒子元素将向行中间位置对齐。     space-between: 第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐， 而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。 space-around: 伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。 align-items值介绍如下:    flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。    flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。    center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。     baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。    stretch: 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 align-content值介绍如下:     flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。     flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。     center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。     space-between: 第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界， 剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。    space-around: 各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。    stretch: 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 子元素属性 .item{ order: <integer>; /*排序：数值越小，越排前，默认为0*/ flex-grow: <number>; /* default 0 */ /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/ flex-shrink: <number>; /* default 1 */ /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/ flex-basis: <length> | auto; /* default auto */ /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/ align-self: auto | flex-start | flex-end | center | baseline | stretch; /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ } 兼容写法 1. 首先是定义容器的 display 属性： .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ } 这里还要注意的是，如果子元素是行内元素，在很多情况下都要使用 display:block 或 display:inline-block  把行内子元素变成块元素（例如使用 box-flex 属性），这也是旧版语法和新版语法的区别之一。 2. 子元素主轴对齐方式（水平居中对齐） .box{ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; } 兼容写法新版语法的 space-around 是不可用的：如下新版语法space-around; .box{ box-pack: start | end | center | justify; /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ } 3. 子元素交叉轴对齐方式（垂直居中对齐） .box{ box-align: start | end | center | baseline | stretch; /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ } 4. 子元素的显示方向。 子元素的显示方向可通过 box-direction + box-orient + flex-direction 实现，如下代码：1. 左到右(水平方向) .box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } 2. 右到左(水平方向) .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } 如上代码：box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。 3. 上到下(垂直方向上) .box{ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } 4. 下到上（垂直方向上） .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } 5. 是否允许子元素伸缩 .item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; } box语法中 box-flex 如果不是0就表示该子元素允许伸缩，而flex是分开的，上面 flex-grow 是允许放大（默认不允许） .item{ -webkit-box-flex: 1.0; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; flex-shrink: 1; } flex-shrink 是允许缩小（默认允许）。box-flex 默认值为0，也就是说，在默认的情况下，在两个浏览器中的表现是不一样的： 介绍如下： .item{ box-flex: <value>; /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/ flex-grow: <number>; /* default 0 */ /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/ flex-shrink: <number>; /* default 1 */ /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/ } 6. 子元素的显示次序 .item{ -webkit-box-ordinal-group: 1; -moz-order: 1; -webkit-order: 1; order: 1; } 注意：目前还有一个问题没有弄明白，旧版本中的那个属性对应着新版本的 align-self属性，有知道的请告知，谢谢！ Meta标签： 1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 这个想必大家都知道，当页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。 1 2 <meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" /> 这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。    获取滚动条的值： 1 window.scrollY  window.scrollX 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll.   禁止选择文本： 1 -webkit-user-select:none 禁止用户选择文本，ios和android都支持   屏蔽阴影： 1 -webkit-appearance:none 亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。    css之border-box： 1 2 3 4 5 6 7 element{         width: 100%;         padding-left: 10px;         box-sizing:border-box;         -webkit-box-sizing:border-box;         border: 1px solid blue; } 那我想要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？这样编写代码必然导致出现横向滚动条，肿么办？要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述（想深入了解的同学可以到w3school查看，要知道自己动手会更容易记忆）。让我们看看如何解决上面的问题：    css3多文本换行： 1 2 3 4 5 6 7 p {     overflow : hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 2;     -webkit-box-orient: vertical; } Webkit支持一个名为-webkit-line-clamp的属性，参见链接，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。需要注意的是display需要设置成box，-webkit-line-clamp表示需要显示几行。    Retina屏幕高清图片： 1 2 3 4 selector {   background-image: url(no-image-set.png);   background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center; } image-set的语法，类似于不同的文本，图像也会显示成不同的：  不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；  支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；  Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。      html5重力感应事件： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 if (window.DeviceMotionEvent) {                  window.addEventListener('devicemotion',deviceMotionHandler, false);           }         var speed = 30;//speed         var x = y = z = lastX = lastY = lastZ = 0;         function deviceMotionHandler(eventData) {             var acceleration =event.accelerationIncludingGravity;                 x = acceleration.x;                 y = acceleration.y;                 z = acceleration.z;                 if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {                     //简单的摇一摇触发代码                     alert(1);                 }                 lastX = x;                 lastY = y;                 lastZ = z;         } 关于deviceMotionEvent是HTML5新增的事件，用来检测手机重力感应效果具体可参考http://w3c.github.io/deviceorientation/spec-source-orientation.html   移动端touch事件： touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel//当某种touch事件非正常结束时触发 这4个事件的触发顺序为： touchstart -> touchmove ->  touchend ->touchcancel 对于某些android系统touch的bug: 比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。   单击延迟： click 事件因为要等待双击确认，会有 300ms 的延迟，体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。 Creating Fast Buttons for Mobile Web Applications Eliminate 300ms delay on click events in mobile Safari   IOS里面fixed的文本框焦点居中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html>     <head>     input {        position:fixed;        top:0;left:0;     }     </head>     <body>         <div class="header">             <form action="">                 <label>Testfield: <input type="text" /></label>             </form>         </div>     </body> </html> 在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。类似：   解决办法有两个： 可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。 1 2 3 4 5 6 7 8 9 10 .fixfixed { position:absolute; } $(document)     .on('focus', 'input', function(e) {         $this.addClass('fixfixed');     })     .on('blur', 'input', function(e) {         $this.removeClass('fixfixed');     });   还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。 1 2 3 4 5 6 7 8 9 10 11 12 .fixfixed { position:absolute; } $(document)     .on('focus', 'input', function(e) {         $absolute..show();         $this.hide();     })     .on('blur', 'input', function(e) {          $fixed..show();         $this.hide();     });   最后一种就是顶部的input不参与滚动，只让其下面滚动。   position:sticky position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 1 2 3 4 5 .sticky { position: -webkit-sticky; position:sticky; top: 15px; } 浏览器兼容性： 由于这是一个全新的属性，以至于到现在都没有一个规范，W3C也刚刚开始讨论它，而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。 另外需要注意的是，如果同时定义了left和right值，那么left生效，right会无效，同样，同时定义了top和bottom，top赢～～ 移动端点透事件 简单的说，由于在移动端我们经常会使用tap(touchstart)事件来替换掉click事件，那么就会有一种场景是： 1 2 3 <div id="mengceng"></div>   <a href="www.qq.com">www.qq.com</a> div是绝对定位的蒙层z-index高于a，而a标签是页面中的一个链接，我们给div绑定tap事件： 1 2 3 $('#mengceng').on('tap',function(){ $('#mengceng').hide(); }); 我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。 原因： touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏，此时click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。 解决办法： 1 尽量都使用touch事件来替换click事件。 2 阻止a链接的click的preventDefault   base64编码图片替换url图片 u在移动端，网络请求是很珍贵的资源，尤其在2g或者3g网络下，所以能不发请求的资源都尽量不要发，对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。   手机拍照和上传图片 <input type=”file”>的accept 属性 1 2 3 4 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">   动画效果时开启硬件加速 我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来，在pc端还好但是移动端就会有较大的卡顿感，这么我们需要使用css3的  transform: translate3d;来替换， 此效果可以让浏览器开启gpu加速，渲染更流畅，但是笔着实验时在ios上体验良好，但在一些低端android机型可能会出现意想不到的效果。   快速回弹滚动 在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做： 1 2 3 4 .div {         overflow: auto;         -webkit-overflow-scrolling: touch;     } 经笔着测试，此效果在不同的ios系统表现不一致， 对于局部滚动，ios8以上，不加此效果，滚动的超级慢，ios8一下，不加此效果，滚动还算比较流畅 对于body滚动，ios8以上，不加此效果同样拥有弹性滚动效果。   持续更新中。。 ios和android局部滚动时隐藏原生滚动条 android 1 2 3 ::-webkit-scrollbar{     opacity: 0; } ios 使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住之 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .wrap{     height: 100px;     overflow: hidden; } .box{     width: 100%;     height: -webkit-calc(100% + 5px);     overflow-x: auto;     overflow-y: hidden;     -webkit-overflow-scrolling: touch; } <div class="wrap">     <div class="box"></div> </div> 设置placeholder时候 focus时候文字没有隐藏 1 2 3 input:focus::-webkit-input-placeholder{     opacity: 0; } 移动端不同的input对应不同的键盘展示样式 ios —- android type email type url type tel type search 未完待续 参考资料：http://www.nihaoshijie.com.cn/index.php/archives/455 众所周知，在当今移动互联网大行其道的现在，基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西，但是大家有没有想过这样的网页是怎样改制作出来的呢？今天我们就来探讨一下这个问题 阅读读者具备基础 1、熟练的使用HTML和CSS 2、对HTML5和CSS3有一定的了解，这个不必深入 3、掌握JavaScript、jquery脚本语言 如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看，要不然可能会跟不上下面的学习了 HTML的特殊用法 首先我们先来讲解一下HTML中一些特殊的语法，可能对于还是HTML入门级的新手来说可能没见过，但是如大神那么请跳过这个模块 那么我们就先从这张图片说起：   相信这张图片大家一定是不会陌生的，没错这个就是淘宝网的标题栏，其中的红色边框标出来的图标在这里是相当的抢眼，但是你知道这个是怎样制作的吗？ 首先我们要准备一张，淘宝的logo图标，这张我们可以直接从百度上下载，下载地址  下载完成之后我们要将图片的格式转换成为ico格式，这个直接在网上查找转换工具就好了，地址 生成后将图片下载下来，重命名为taobaoLogo，新建一个HTML的项目，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > </head> <body> </body> </html>   运行的结果如下：   从这个例子中我们可以发现，只要添加上依据语句就可以实现这个效果了，但是在实际的使用中，我们还需要添加上另一句语句，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"> </head> <body> </body> </html>   运行的效果也是一样的 这里，细心的读者可能会问既然效果都是一样的，那么为什么要多此一举呢， 这样做当然有这样做的必要，详见这篇文章，在此就不必啰嗦了  其中一般这个Logo图标不但可以运用在标题中，而且还可以放在收藏夹中去使用，只需要将添加标题栏中rel="short icon"改为rel="bookmark"即可 <link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">  在手机网页的制作上，我们一般是不让用户手动的去改变页面的大小的，所以下面的这一句是必须加上的 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 除了上面的这一句，下面的这些也是制作手机页面必须加上的 <!--开启对web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--主要是正对苹果手机将数字自动识别为号码--> <meta name="format-detection" content="telephone=no" /> 除此之外，还有其他一些的属性供你自由的选择 <!-- 忽略识别邮箱，主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址--> <meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">  获取滚动条的滚动值 window.scrollY window.scrollX   桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll. 禁止用户选择文本 -webkit-user-select:none 这个属性是禁止用户选择文本，对安卓和苹果都是有效的 浅谈一下box-sizing 这个属性可能大家比较陌生吧， 因为这个属性是是CSS3中新加入的，为了实现一种我们平时 比较难实现的效果设定的属性 例如：我们在手机布局的时候，一般我们是采用百分比来对网页进行自适应的处理，也就是我们所说的自适应布局，我们可能有时会想要中效果就是，在左右内缩加上1px div{ padding-left:1px; padding-right:1px; }   但是采用自适应布局会出现把屏幕撑开，从而出现横向滚动条的效果，这个是我们在手机网页中开发的大忌，所以这个时候box-sizing就解决了我们的问题，具体的文法详见http://www.w3school.com.cn/cssref/pr_box-sizing.asp 从box-sizing这个属性中我又联想到还有另外一个与box有关的属性就是box-shadow box-shadow 这个属性虽然在手机网页中不是很常见，但是在网页中确实比较常见的，原因是移动端的网页显示的比较小，相对来说比较简洁，但是这个效果却是极好的，自从有了这个特性以后，望门就可以将网页是的特定元素实现得更具立体感，完成以前的一些没有办法实现的效果，具体详见：http://www.w3school.com.cn/cssref/pr_box-shadow.asp base64编码图片代替URL图片 由于在网页加载的时候，没一张图片，都要进行HTTP资源请求，所以将图片进行编码，减小单次请求的流量，从而加快网站的加载速度，这个的实现可以使用在线的编码工具即可，地址： http://www.fishlee.net/Tools/GetImageBase64Code#codeResult 移动端特殊的事件 在HTML5出现之后，有一些新的事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel//当某种touch事件非正常结束时触发 执行事件的顺序：touchstart>touchmove>touchend>touchcanel>click 从上面的顺序我们不难分析出：在点击的时候，click会发生延迟，这样的延迟一般是300ms。 手机图片和视频上传 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">   移动端不同的input对应不同的键盘 ios —- android type email type url type search 动画特效开启加速  默认的移动浏览器是不会开启动画效果硬件加速的，但是这样的效果在低端的安卓手机中可能会出现意想不到的反效果 动画加速可以采用，下列代码 .div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ }  设置placeholder时候 focus时候文字没有隐藏   input:focus::-webkit-input-placeholder{ opacity: 0; } android局部滚动时隐藏原生滚动条 ::-webkit-scrollbar{ opacity: 0; } 除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了，以后还会继续讨论下去  布局方法 在手机网页开发中，由于是基于webkit引擎开发的，所以我们可以大量的使用HTML5特性进行开发，布局上为了达到适屏的效果，我们需要进行采用的一般是百分比的布局，但是也是有一些布局较为特殊，这个我们就不讨论了，后续会有一篇讲解布局实例的文章，敬请期待 特别说明如需转载请注明出处，同时如果你觉得赞，请为我点一下“推荐”，你的鼓励是我前进的动力 参考文献 Meta 标签与搜索引擎优化 移动web问题小结

AMF AMF(是Action Message Format的缩写)是在flash和flex中与远程服务端交换数据的一种格式. 它是二进制格式，Flash应用与服务端或数据库通过RPC交换数据时，通常都采用这种格式。 AMF 1 诞生于Flash Player6，发展到现在已经变成了了AMF3   RTMP RTMP是Real-Time Messaging Protocol(实时消息传送协议)的缩写，它是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的私有协议。 RTMP协议是被Flash用于对象,视频,音频的传输.该协议建立在TCP协议或者轮询HTTP协议之上。　　RTMP协议就像一个用来装数据包的容器,这些数据可以是AMF格式的数据,也可以是FLV中的视/音频数据。一个单一的连接可以通过不同的通道传输多路网络流.这些通道中的包都是按照固定大小的包传输的。   RTMPT RTMP的变种，相当于RTMP用http包装后的协议，可穿越防火墙。   RTMPS RTMP的另一个变种，与RTMPT的区别在于，它使用https安全连接.

由于本人也是初学者（刚看了两天视频），所以请高手指点，这里赞下 blog 名叫交口称赞的兄弟，他在flex 方面是行家，谢谢了。摘要：最近晚上抽出点时间写了这篇文章，关于 Flex 开发方面的语言和架构，介绍了大家都熟悉的分层结构，着重介绍视图层（flex 实现），服务控制层和领域模型层，并按照严格分层，高解耦合性并结合 Flex 技术实验了一个用户管理小模块，案例不是目的，重要的是介绍开发思想。本文第一部分介绍 Flex 相关技术以及 ActionStript3.0 语言。第二部分介绍开发实例的开发过程，代码可以下载，亮点在接口工程。由于本人 flex 经验不足，在以后的工作中会不断补充。关键字：Flex, J2EE, 架构1. Flex 介绍         FLEX，是Rich Internet Applications时代的牛×产物Rich Internet Applications，翻译成中文为富因特网应用程序。传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表示层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了，这就是被Macromedia公司称之为的“体验问题”，而富因特网应用程序的出现也就是为了解决这个问题。        Flex最重要的两个技术要数AS和MXML, MXML 和 HTML 一样是标记语言，它描述了反映内容与功能的用户界面。与 HTML 不同的是，MXML 可对表示层逻辑与用户界面和服务器端数据绑定提供声明抽象。MXML 可将表示与业务逻辑的问题彻底分开，以实现最大程度地提高开发人员的生产率及应用程序的重复使用率。MXML 的开发基础是在迭代过程上，这与其他类型的 Web 应用程序文件如 HTML、JSP、ASP是相同的。开发 MXML 应用程序就象打开一个文件编辑器一样简单，只要输入一些标签、保存文件，然后在 Web 浏览器上打开文件 URL 即可。         MXML 文件同时也是普通的 XML 文件，所以可以选择多种开发环境。可以在简单文件编辑器、专用 XML 编辑器或是支持文件编辑的集成开发环境 (IDE) 中进行开发。由于 MXML 符合 W3C XML 方案的定义，您也可以使用结构化编辑，如代码着色和代码提示。 MXML和HTML间最大区别：前者定义的应用是编译的SWF文件，执行于FlashPlayer客户端中。后者是基于页面技术的应用。因此前者能提供更丰富的、动态的UI。MXML不支持Flash的某些特性，例如：时间轴。但是可以利用Flash设计组件并应用在Flex中。MXML应用可以是一个MXML文件，也可以是多个MXML组成，MXML支持MXML文件形式的自定义组件、ActionScript文件形式的自定义组件以及在Flash中建立的自定义组件。 FLEX试图通过提供一个程序员们已经熟知的工作流和编程模型，让程序员比从前更快更简单地开发动画及RIA应用。在多层式开发模型中，FLEX应用属于表现层。FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来         总之，flex 是未来界面开发的一个好方向，据我了解很多公司都要求员工要学习 flex 技术，可见 flex 受欢迎的程度。 2 .ActionStript3.0 特性介绍       ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言，它在 Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能，ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的。ActionScript代码通常被编译器编译成“字节码格式” ,有点类似 java 的处理和运行机制。变过 C#,Java和javascript程序的朋友，肯定能在 ActionScript 中找到这些语言的影子。 2.1内置命名空间和自定义命名空间       四个内置修饰符：   1 public :对所有代码可见 2 private: 只对类内部可见 3 internal :只对定义所在的同一包内可见 4 protected :对同一包以及不同包的子类可见       自定义命名空间：             使用关键字namespace定义命名空间，声明属性和方法时，应用命名空间。             AS 代 码：  12Namespace testSpace="org.blogjava.jm/testSpace ";   3testSpace myfunction2():void{} 4 5use mySpace2;  6myfunction2(); //调用使用 use 关键字打开命名空间 2.2       Local 变量特点             与java不同的是，在as3中，变量没有块级作用域（即两人大括号中间），如果在一个块内声明了一个变量，比如一个for循环内声明了一个变量，它在该代码所在整个函数内都是可访问的    1function myFunction():void{   2     for(var i:int=0;i<5:i++){   3       var last:int = i;    4    }    5     trace(last); //last 在 for 中定义但可以在 for 块外面访问到，个人觉得这样设计欠妥，尽管很方便。   6}  2.3       Dynamic 类        Object 类本身就是动态类，当然也可以用 dynamic 关键字来声明一个类，所谓动态就是在运行时可以对类追加属性和方法。   1dynamic class Protean{} 2var myProtean:Protean = new Protean();  3myProtean.name = "jack.wang";  4myProtean.password = 3;  5trace(myProtean. name , myProtean.password );    2.4       定义函数的两种方式：函数语句和函数表达式        1//函数语句声明     2Function fun1():void{}  3        4//函数表达式声明   5var fun2:Function = function():void{}   6//函数表达式声明的函数是不能够被垃圾回收的，必须显示的调用 delete 命令。 7var t:Test = new Test(); //t是动态类Test的一个实例  8t.funt = function(){};//把一个函数声明为t的一个属性  9delete t.funt; //删除刚才新增的函数，我们刚才声明的函数也被回收了10 2.5       在as3中也有arguments对象，功能基本上和javascript中的一样。                 arguments 对象是一个数组，其中包括传递给函数的所有参数，arguments.length 属性报告传递给函数的参数数量，（避免将 "arguments" 字符串作为参数名，因为它将遮蔽 arguments 对象）   function traceArgArray(x:int):void   {    for (var i:uint = 0; i < arguments.length; i++) {    trace(arguments[i]);  }    }    traceArgArray(1, 2, 3);    // 输出：     // 1    // 2   // 3 当然也可以用类似 java 的形式  function traceArgArray(x: int,  args)  2.6       在as3中允许定义同名的静态属性和实例属性   1class StaticTest {  2 static var message:String = "static variable";3 var message:String = "instance variable";     } 4 var myST:StaticTest = new StaticTest(); 5trace(StaticTest.message); // 输出：静态变量    trace(myST.message); // 输出：实例变量   2.7       在as中有一个叫做set和get存取器的东西，类似JavaBean，但又有所不同。 class GetSet { private var privateProperty:String;   public function get publicAccess():String{ return privateProperty;    }public function set publicAccess(setValue:String):void  {        privateProperty = setValue;    }  }    3 个人实验介绍       案例是超级简单的，开发Web 应用的，不管你是基于 J2EE,.net 平台还是其他的 PHP 等等都很熟悉分层架构，其中五层是最熟悉不过的了，一般分为表示层，控制层，服务层，模型层和数据层，有的公司干脆就把服务层和模型层合并起来和控制层合并在一起，基于分层的开发可以横向也可以纵向，由于引入 flex 技术，因为并不是所有人都懂得 flex 开发方式，尽管他和传统的 Swing, SWT，GWT开发很相近 ，不过这样需求分析时可以构建可演进的原型系统，界面也很 RIA。       人们常提面向接口编程于是经常看到 IUser user=new User();这样的代码，似乎就是在用接口，但是 new 的动作还是有依赖，于是人们用一些设计模式比如 Factory, Proxy，反射等等模式，后来又有了更好的依赖注入，似乎很完美了，可人们又陷进了过度设计，其实接口应用比直接用原类要多耗费几个机械指令 User user=new User()，而且在一个内聚的组件中尽量用对象直接连接，该分开的时候我们去用接口分，接口的目的是为了抽象，抽象的目的是为了解耦。       本开发为了把模型层和服务层完全分开，引入接口工程，也就是单独开发一个工程来设计接口，这个工程有设计师开发。 用户接口和工厂接口这两个类在单独的工程里开发，以便于模型和服务层同步开发。 在服务层不能对外暴露 IUser 接口，而他也要接受数据，这里用的是 UserVO 对象来封装数据，服务层不操作模型层的任何实现类，这样这两层之间完全解耦,当接口工程和实现完成时候打成 jar 包到 web 工程下 Flex 开发和 HTML开发有很大的不同，客户端和服务端交互的不是 HTML 而是 XML，所以在服务器端    的 Servlet 就应该输出 XML 流到客户端。 最后 Flex 也是一个单独的工程，通过 HTTPService 和 Web 服务器端交互数据。下载：我的实验代码 本文转自BlogJava 新浪blog的博客，原文链接：Flex+J2EE 之小记 ，如需转载请自行联系原博主。

Flex+J2EE 之小记 Jack. Wang 2008-9-10（本待完善...）  wbjeasygo@163.com  由于本人也是初学者（刚看了两天视频），所以请高手指点，这里赞下 blog 名叫交口称赞的兄弟，他在flex 方面是行家，谢谢了。 摘要：最近晚上抽出点时间写了这篇文章，关于 Flex 开发方面的语言和架构，介绍了大家都熟悉的分层结构，着重介绍视图层（flex 实现），服务控制层和领域模型层，并按照严格分层，高解耦合性并结合 Flex 技术实验了一个用户管理小模块，案例不是目的，重要的是介绍开发思想。本文第一部分介绍 Flex 相关技术以及 ActionStript3.0 语言。第二部分介绍开发实例的开发过程，代码可以下载，亮点在接口工程。由于本人 flex 经验不足，在以后的工作中会不断补充。 关键字：Flex, J2EE, 架构1. Flex 介绍         FLEX，是Rich Internet Applications时代的牛×产物Rich Internet Applications，翻译成中文为富因特网应用程序。传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表示层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了，这就是被Macromedia公司称之为的“体验问题”，而富因特网应用程序的出现也就是为了解决这个问题。         Flex最重要的两个技术要数AS和MXML, MXML 和 HTML 一样是标记语言，它描述了反映内容与功能的用户界面。与 HTML 不同的是，MXML 可对表示层逻辑与用户界面和服务器端数据绑定提供声明抽象。MXML 可将表示与业务逻辑的问题彻底分开，以实现最大程度地提高开发人员的生产率及应用程序的重复使用率。MXML 的开发基础是在迭代过程上，这与其他类型的 Web 应用程序文件如 HTML、JSP、ASP是相同的。开发 MXML 应用程序就象打开一个文件编辑器一样简单，只要输入一些标签、保存文件，然后在 Web 浏览器上打开文件 URL 即可。          MXML 文件同时也是普通的 XML 文件，所以可以选择多种开发环境。可以在简单文件编辑器、专用 XML 编辑器或是支持文件编辑的集成开发环境 (IDE) 中进行开发。由于 MXML 符合 W3C XML 方案的定义，您也可以使用结构化编辑，如代码着色和代码提示。 MXML和HTML间最大区别：前者定义的应用是编译的SWF文件，执行于FlashPlayer客户端中。后者是基于页面技术的应用。因此前者能提供更丰富的、动态的UI。MXML不支持Flash的某些特性，例如：时间轴。但是可以利用Flash设计组件并应用在Flex中。MXML应用可以是一个MXML文件，也可以是多个MXML组成，MXML支持MXML文件形式的自定义组件、ActionScript文件形式的自定义组件以及在Flash中建立的自定义组件。 FLEX试图通过提供一个程序员们已经熟知的工作流和编程模型，让程序员比从前更快更简单地开发动画及RIA应用。在多层式开发模型中，FLEX应用属于表现层。FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来          总之，flex 是未来界面开发的一个好方向，据我了解很多公司都要求员工要学习 flex 技术，可见 flex 受欢迎的程度。 2 .ActionStript3.0 特性介绍       ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言，它在 Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能，ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的。ActionScript代码通常被编译器编译成“字节码格式” ,有点类似 java 的处理和运行机制。变过 C#,Java和javascript程序的朋友，肯定能在 ActionScript 中找到这些语言的影子。 2.1内置命名空间和自定义命名空间       四个内置修饰符：   1 public :对所有代码可见 2 private: 只对类内部可见 3 internal :只对定义所在的同一包内可见 4 protected :对同一包以及不同包的子类可见       自定义命名空间：              使用关键字namespace定义命名空间，声明属性和方法时，应用命名空间。              AS 代 码：     12Namespace testSpace="org.blogjava.jm/testSpace ";   3testSpace myfunction2():void{} 4 5use mySpace2;  6myfunction2(); //调用使用 use 关键字打开命名空间 2.2       Local 变量特点              与java不同的是，在as3中，变量没有块级作用域（即两人大括号中间），如果在一个块内声明了一个变量，比如一个for循环内声明了一个变量，它在该代码所在整个函数内都是可访问的    1function myFunction():void{   2     for(var i:int=0;i<5:i++){   3       var last:int = i;    4    }    5     trace(last); //last 在 for 中定义但可以在 for 块外面访问到，个人觉得这样设计欠妥，尽管很方便。   6}  2.3       Dynamic 类         Object 类本身就是动态类，当然也可以用 dynamic 关键字来声明一个类，所谓动态就是在运行时可以对类追加属性和方法。   1dynamic class Protean{} 2var myProtean:Protean = new Protean();  3myProtean.name = "jack.wang";  4myProtean.password = 3;  5trace(myProtean. name , myProtean.password );    2.4       定义函数的两种方式：函数语句和函数表达式        1//函数语句声明     2Function fun1():void{}  3        4//函数表达式声明   5var fun2:Function = function():void{}   6//函数表达式声明的函数是不能够被垃圾回收的，必须显示的调用 delete 命令。 7var t:Test = new Test(); //t是动态类Test的一个实例  8t.funt = function(){};//把一个函数声明为t的一个属性  9delete t.funt; //删除刚才新增的函数，我们刚才声明的函数也被回收了10 2.5       在as3中也有arguments对象，功能基本上和javascript中的一样。                  arguments 对象是一个数组，其中包括传递给函数的所有参数，arguments.length 属性报告传递给函数的参数数量，（避免将 "arguments" 字符串作为参数名，因为它将遮蔽 arguments 对象）     function traceArgArray(x:int):void   {    for (var i:uint = 0; i < arguments.length; i++) {    trace(arguments[i]);  }    }    traceArgArray(1, 2, 3);    // 输出：     // 1    // 2   // 3 当然也可以用类似 java 的形式  function traceArgArray(x: int,  args)  2.6       在as3中允许定义同名的静态属性和实例属性   1class StaticTest {  2 static var message:String = "static variable";3 var message:String = "instance variable";     } 4 var myST:StaticTest = new StaticTest(); 5trace(StaticTest.message); // 输出：静态变量    trace(myST.message); // 输出：实例变量   2.7       在as中有一个叫做set和get存取器的东西，类似JavaBean，但又有所不同。 class GetSet { private var privateProperty:String;   public function get publicAccess():String{ return privateProperty;    }public function set publicAccess(setValue:String):void  {        privateProperty = setValue;    }  }    3 个人实验介绍        案例是超级简单的，开发Web 应用的，不管你是基于 J2EE,.net 平台还是其他的 PHP 等等都很熟悉分层架构，其中五层是最熟悉不过的了，一般分为表示层，控制层，服务层，模型层和数据层，有的公司干脆就把服务层和模型层合并起来和控制层合并在一起，基于分层的开发可以横向也可以纵向，由于引入 flex 技术，因为并不是所有人都懂得 flex 开发方式，尽管他和传统的 Swing, SWT，GWT开发很相近 ，不过这样需求分析时可以构建可演进的原型系统，界面也很 RIA。        人们常提面向接口编程于是经常看到 IUser user=new User();这样的代码，似乎就是在用接口，但是 new 的动作还是有依赖，于是人们用一些设计模式比如 Factory, Proxy，反射等等模式，后来又有了更好的依赖注入，似乎很完美了，可人们又陷进了过度设计，其实接口应用比直接用原类要多耗费几个机械指令 User user=new User()，而且在一个内聚的组件中尽量用对象直接连接，该分开的时候我们去用接口分，接口的目的是为了抽象，抽象的目的是为了解耦。        本开发为了把模型层和服务层完全分开，引入接口工程，也就是单独开发一个工程来设计接口，这个工程有设计师开发。 用户接口和工厂接口这两个类在单独的工程里开发，以便于模型和服务层同步开发。 在服务层不能对外暴露 IUser 接口，而他也要接受数据，这里用的是 UserVO 对象来封装数据，服务层不操作模型层的任何实现类，这样这两层之间完全解耦,当接口工程和实现完成时候打成 jar 包到 web 工程下 Flex 开发和 HTML开发有很大的不同，客户端和服务端交互的不是 HTML 而是 XML，所以在服务器端    的 Servlet 就应该输出 XML 流到客户端。 最后 Flex 也是一个单独的工程，通过 HTTPService 和 Web 服务器端交互数据。 下载：我的实验代码 其他视频资料：http://www.blogjava.net/Jack2007/archive/2008/09/05/227125.html参考文献 1.http://ezen.javaeye.com/blog/107397 2.http://www.nshen.net/blog/article.asp?id=555 3. http://blog.csdn.net/mozilla/archive/2007/08/23/1756761.aspx 4.http://hi.baidu.com/jlhh/blog/item/225aea197716b77adab4bd7f.html 5.http://yexin218.javaeye.com/blog/203032 6.http://yexin218.javaeye.com/blog/203032 7.http://www.blogjava.net/realsmy/archive/2008/01/17/176054.html 8. http://daoger.javaeye.com/blog/204694 9. http://www.blogjava.net/alps/archive/2008/07/23/216940.html 10.http://xy-z487.javaeye.com/blog/238074 11.http://www.pin5i.com/showtopic-19682.html 12. http://goday.blogbus.com/logs/13402716.html 13. http://www.flashas.net/html/Flex/20070525/1779.html 14. http://www.bluejia.cn/blog/?action=show&id=18 

SDK（Software Development Kit, 即软件开发工具包 ）一般是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。   远端程序调用(RPC, Remote Procedure Call) 是一种客户端与服务器端交换数据方式。我们可以调用本地对象带对各种参数方法设置回调并接受调用结果。我们不用关心发送和接收数据的实现细节。实现细节通常是抽象的，就像我们在调用本地方法一样。  AMFPHP 　　AMFPHP项目主页：http://www.amfphp.org/ 　　AMFPHP是PHP的远程调用(RPC, Remote Procedure Call)工具。它可以使PHP与下述技术无缝通信： 　　(1) Flash 和 Flex Remoting 　　(2) JavaScript JSON 和 Ajax JSON 　　(3) XML 和XML-RPC 编辑本段什么是RPC 　　远端程序调用(RPC, Remote Procedure Call) 是一种客户端与服务器端交换数据方式。我们可以调用本地对象带对各种参数方法设置回调并接受调用结果。我们不用关心发送和接收数据的实现细节。实现细节通常是抽象的，就像我们在调用本地方法一样。 什么是用RIA？  　富互联网应用（Rich Internet Applications，缩写为RIA）的出现就是为了解决这个问题。 　　RIA面向用户  富互联网应用程序是下一代的将桌面应用程序的交互式用户体验与传统的WEB应用的部署灵活性和成本分析结合起来的网络应用程序。富互联网应用程序中的富客户技术通过提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的WEB服务所驱动。结合了声音、视频和实时对话的综合通信技术，使富互联网应用程序（RIA）具有前所未有的网上用户体验。  Flex的技术框架  　　Flex技术包括以下几个主要技术框架：  　　1. 描述应用程序界面的XML语言（MXML）；  　　2. 符合ECMA规范的脚本语言（ActionScript)，处理用户和系统的事件，构建复杂的数据模型； 　 　3. 一个基础类库； 　 　4. 运行时的即时服务； 　 　5. 由MXML与ActionScript文件生成swf文件的编译器。  Flex 应用开发步骤  　　以下直接来源于Flex 2.0 Beta 3的帮助文件：  　　使用一系统预定义组件（窗口，按钮等）来定义一个开发界面。 　 　组织安排组件，现在用户自定义的界面设计。 　 　使用风格和主题来定义可见设计。 　 　增加动态动作，如应用程序之间的互动。 　 　定义并在需要时连接上一个数据服务。 　 　从源代码生成一个在Flash播放器中运行的SWF文件 三、教学资源 1.英文 flash-db.com tutorials and forum on AMFPHP sephiroth.it tutorials and blog on AMFPHP Macromedia Remoting Developer Center flashcoders mailing list Amfphpmailing list Amfphpdevelopment blog Flash Remoting book companion site Setting up PHP on your webserver Sönke Rohde - tutorial Jesse Warden - Flash, Flex and AMFPHP SwapDepths tutorials 2.中文 Amfphpv1.0 MS2 tutorials download, install, hello world pageable recordset working examples using web service with amfphp authenticate with setCredential() Another hello world tutorial luar的教学：http://www.luar.com.hk/flashbook/archives/000168.php 淡湮mmug网聚教学：http://breezecentral.zerone.com.tw/p66309923/