摘要：
简介我可以肯定，您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是，CSS还缺少适用于此任务的合适机制。了解CSS3 弹性方框模型（简称Flexbox）该草案将 Flexbox 描述如下：[...]针对接口设计而优化的CSS框模型。除了CSS 中已有的布局系统之外，该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用的空间分配给特定的子代，或者通过“弹性”分配给应展开的子代，在各子代间进行分配。这些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在两个维度中构建布局。该模型是以 XUL用户界面语言的模型为基础的，适用于多 阅读全文
摘要：
使用事件代理有时候我们会感觉到页面反应迟钝，这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个div中有10个按钮，你只需要在div上附加一次事件句柄就可以了，而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。缓存选择器查询结果选择器查询是开销很大的方法。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。比如，下面这样的写法就是糟糕的写法：jQuery('#top').find('p.classA');jQuery(' 阅读全文
摘要：
避免使用@import有两种方式加载样式文件，一种是link元素，另一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS，但浏览器不能并行下载样式，就会导致页面增添了额外的往返耗时。比如，第一个CSS文件first.css包含了以下内容：@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后，才发现及处理第二个文件second.css。简单的解决方法是使用标记来替代@import，比如下面的写法就能够并行下载CSS文件，从而 阅读全文
摘要：
解决方法：1：expression表达式：a{star:expression(thisthis.onFocus=this.blur())} 不推荐使用，消耗性能2：JS解决 window.onload=function(){var aLinks=document.getElementsByTagName('a');for(var i=0;i<aLinks.length;i++){aLinks[i].onfocus=function(){this.blur();};}}3：jQuery解决 $(function(){$('a').bind('focu 阅读全文
摘要：
避免使用IframeIframe也叫内联frame，可以把一个HTML文档嵌入到另一个文档中。使用iframe的好处是被嵌入的文档可以完全独立于其父文档，凭借此特点我们通常可以使浏览器模拟多线程，需要注意的是使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，即使是跨窗口或跨标签页，这在所有主流浏览器都是如此。也因为这样这让iframe带来的好处大打折扣。在页面加载过程中iframe元素会阻塞父文档onload事件的触发，而开发者程序通常会在onload事件触发时初始化UI操作。例如，设置登录区域的焦点。因为用户习惯等待这一操作，所以尽可能的让onl 阅读全文
摘要：
准备1 css reset/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, st 阅读全文
摘要：
浏览器特定的选择当你想改变一个样式在一个浏览器而不是其他这些选择是非常有用的。IE 6及以下 * html {}IE 7及以下 *:first-child+html {} * html {}IE 7只 *:first-child+html {}IE 7和现代浏览器只HTML> BODY {}现代浏览器只（不是IE 7）HTML> / ** / BODY {}最近的歌剧版本9及以下 html:first-child {}Safari浏览器 html[xmlns*=""] body:last-child {}要使用这些选择器，将代码中的风格面前。例如： #conte 阅读全文
摘要：
1、IE6支持max-width解决方法IE6支持最大宽度，解决CSS代码：.yangshi{ max-width:1000px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)1000?"1000px":"");}说明：min-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。而_width:expression((document.documentElement.clientWidth||document 阅读全文
摘要：
其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。Zoom的使用方法：zoom : normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实.. 阅读全文
摘要：
一、html5 自定义属性介绍我之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id：测试这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。二、Dataset基础下面是元素应用data属性的一个例子：¥20.12要想获取某个属性的值，可以像下面这样使用dataset对象：v 阅读全文