随笔分类 - WEB前端
摘要：1. 基线、底线、顶线行高指的是文本行的基线间的距离。基线并不是汉字的下端沿，而是英文字母"x"的下端沿2. 行距、行高3. 内容区底线和顶线包裹的区域，实际中不一定看得到，但却是存在。4. 行内框行内框只是一个概念，它无法显示出来，但是它又确实存在它的高度就是行高在没有其他因素（padding）影响的时候，行内框等于内容区域5. 行框行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框行框高度等于本行内所有元素中行高最大的值元素对行高的影响对于行内元素如em、strong、span和等，其padding、margin、border-top、border-
阅读全文
摘要：webkit内核的safari、 Chrome的Linear Gradients (线性渐变)-webkit-gradient是background的一个属性值；webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type, x1 y1, x2 y2, from(开始颜色值), to(结束颜色值), [color-stop(偏移量小数, 停靠颜色值), ...] );webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear
阅读全文
摘要：css2的时候已经有了text-shadow这个属性，但是css2.1的又删除了这个属性，css3又重新使用了这个属性； 语法： text-shadow:1px 2px 3px #FFF; text-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色。 兼容性Firefox,webkit内核的Safari和Chrome,Opera支持Text Shadow(文本阴影)：text-shadow:2px 2px 5px #333333IE不支持text-shadow(阴影)其它一个文本可以使用多个文本阴影演示text-shadow:7px 5px 2p
阅读全文
摘要：语法： box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色； 兼容性Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333；webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333；Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333；IE不支持Box Shadow(阴影.
阅读全文
摘要：tabindex目前浏览器支持性较好，经测试IE6-8、Firefox、Chrome都支持。HTML tabIndex 属性HTML tabIndex 属性HTML DOM tabIndex 属性示例tabindex定义了accesskey的链接或表单元素可以使用快捷键(ALT+字母)访问。但各种浏览器下accesskey快捷键的使用方法并不相同：IE浏览器：按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车。FireFox浏览器：按住Alt+Shift键，点击accesskey定义的快捷键。Chrome浏览器：按住Alt键，点击accesskey定义的快捷键。Op
阅读全文
摘要：本地持久化存储一直是本地客户端程序优于 web 程序的一个方面。对于本地应用程序，操作系统会一共一个抽象层，用于存储和获取特定于应用程序的数据，例如用户设置或者运行时状态。这些值可以被存储于注册表、INI 文件，或者其他什么地方，这取决于操作系统的实现。如果你的本地应用程序需要不简单是键值对形式的本地存储，你也可以使用嵌入式数据库、发明你自己的文件格式，或者其他很多种解决方案（引自“HTML5本地存储详解）。HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小
阅读全文
摘要：值：半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -webkit(例如：-webkit-border-radius)用于Safari和Chrome。 例1 <div id="round"></div> #round { padding:10px; wid
阅读全文
摘要：简介Range是一种fragment（HTML片断），它包含了节点或文本节点的一部分。可以通过document.createRange()或selection象的getRangeAt()方法获得。createRange()是在2级DOM里定义的一个方法，它属于document对象。IE是不支持此方法的，因此需要检测浏览器的支持性。if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("Range&qu
阅读全文
摘要：简介selection是对当前激活选中区（即高亮文本）进行操作。在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，本文讲述的是标准的selection操作方法。文中绝大部分内容来自https://developer.mozilla.org/en/DOM/Selection术语以下几个名词是英文文档中的几个名词。 anchor 选中区域的“起点”。 focus 选中区域的“结束点”。 range 是一种fragment(HTML片断)，它包含了节点或文本节点的一部分。一般情况下，同一时刻页面中只
阅读全文
摘要：这篇文章是对JavaScript跨域总结与解决办法的补充。有三个页面：a.com/app.html：应用页面。a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。实现起来基本步骤如下：在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。 数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：在应用页面（a.com/app.html）中监听iframe的
阅读全文
摘要：本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和补充。 什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少
阅读全文
摘要：经常使用window.location，它的结构总是记不住，简单梳理下，方便以后查询。示例URL：http://b.a.com:88/index.php?name=kang&when=2011#first属性含义值protocol:协议"http:"hostname:服务器的名字"b.a.com"port:端口"88"pathname:URL中主机名后的部分"/index.php"search:"?"后的部分，又称为查询字符串"?name=kang&when=2011&
阅读全文
摘要：1. 获得iframe的window对象存在跨域访问限制。 chrome：iframeElement. contentWindow firefox： iframeElement.contentWindow ie6：iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can u...
阅读全文
摘要：先加载执行a.js，完毕后再加载执行b.js。先执行a.js，完毕后再执行b.js。这就不可以确定谁先执行了，因为通过创建script标签引入的JS，是谁先加载完毕谁先执行，与创建顺序无关。对于创建script标签引入JS来讲，在某些高级浏览器中有async属性用于控制是按照加载完毕的顺序执行，还是按照创建顺序执行。
阅读全文
摘要：今天看了篇文章（Response Times: The 3 Important Limits）觉得很不错，这里简单整理了下要点。Response Times: The 3 Important Limits有关操作响应时间的基本准则，三十多年来就没有变过，而且这些准则不限于某一门技术或语言。0.1秒是用户瞬间感受的界限，这意味着不需要任何提示（feedback）可直接显示结果。1秒：即使用户感觉到了延迟，但仍然感觉流畅并保持连续的操作，一般来讲，延迟在0.1秒~1秒之间，是不需要特殊提示的， 但用户仍然会失去直响应的感觉。10秒是用户专注于单一任务的极限，对于更长的延迟，用户将会进行其它的操作，
阅读全文
摘要：1、选择器了解CSS的查找匹配原理，让CSS更简洁、高效使用高效率的CSS选择器如何使CSS渲染更高效总结不要在ID选择器前使用标签名一般写法：div#divBox更好写法：#divBox解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。不要再class选择器前使用标签名一般写法：span.red 更好写法：.red 解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：p.red { color: red; } span.red { color:#ff00ff; } 如果是这样定义的就不要去掉，去掉后就会混淆，不过
阅读全文
摘要：参考： HTML与javascript中常用编码浅析 escape, encodeURIComponent和encodeURI escape(), encodeURI(), encodeURIComponent() 的区别 文章并非原创，这里只是做了个简单整理。 一些名词 bit二进制数字，称作比特
阅读全文
摘要：document.documentElement对<html />元素的引用document.documentElement === document.getElementsByTagName('html')[0]document.body对<body />元素的引用document.body === document.getElementsByTagName('body')[0]
阅读全文
摘要：a.x = a = { }, 深入理解赋值表达式var o = {x : 1};var a = o;a.x = a = {name:100};console.log(a.x); // undefinedconsole.log(o.x); // {name:100}// a.x = a = {name:100};// 等价于 a.x = (a = {name:100});// 首先计算a.x的引用，然后计算(a = {name:100})的返回值if 语句的简写var condition = true, numb = 0;if(condition) { alert('rain-...
阅读全文
摘要：in 运算符判断对象是否拥有某一属性只要对象拥有该属性，就会返回true，否则falsevar point = { x:1, y:1 };alert( 'x' in point ); //truevar arr = ['one', 'two'];alert( 'kang' in arr ); //falsealert( '1' in arr ); //truealert( 'push' in arr ); //truevar fn = function(){};fn.prototype.site =
阅读全文