03 2014 档案
摘要：box-sizing语法： box-sizing ： content-box || border-box || inherit 参数取值： content-box：此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 border-box:此值让元素维持IE传统的Box Mod...
阅读全文
摘要：background-image语法： background-image: url1,url2,...,urlN; 通过“，”分隔N张背景图片，background的所有其它属性需要配合该属性进行设置，如下： background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; backrgound-attachment: attachment1,attachment...
阅读全文
摘要：background-origin语法： background-origin: padding-box || border-box || content-box 参数取值： padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片； border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片； content-box(content):此值决定background...
阅读全文
摘要：background-clip语法： background-clip ： border-box || padding-box || content-box 参数取值： border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉； padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉； context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；
阅读全文
摘要：background-size语法： /*Ｍozilla*/ -moz-background-size: auto || || || cover || contain /*Webkit*/ -webkit-background-size: auto || || || cover || contain /*Presto*/ -o-background-size: auto || || || cover || contain /*W3c标准*/ background-size: auto || || || cover || contain 参数： auto：默认值...
阅读全文
摘要：animation语法： 1、动画的定义 @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% ...
阅读全文
摘要：transition语法： transition ： [ || || || [, [ || || || ]]* 第一个参数：transition-property，执行变换的属性（当属性发生变化时，不直接进行变化，而是以动画的形式逐渐变化） 取值包括： none：没有属性变化 all：（默认值）所有属性都变化 indent：指定的属性 第二个参数：transition-duration，执行变换需要的时间 取值： 0...
阅读全文
摘要：transform语法： transform ： none | [ ]* none为默认值，表示不进行变换 n个transform-function表示进行n种不同的变换。包括：rotate | scale | skew | translate |matrix;（每种变换中间用逗号分开） transform:rotate(30deg) // 沿中心顺时针旋转30度 transform:translate(100px,20px) // 沿X轴向右移动100px，沿Y轴向下移动20px，同transform:translateX(100px)；transform:trans...
阅读全文
摘要：gradient语法： -moz-linear-gradient( [ || ,]? , [, ]* ) // chrome的新版写法和FF的一致，只要改版前缀即可 第一个参数：指定渐变方向。例如：top，从上向下渐变；left，从左向右渐变； left top，从左上向右下渐变 第二个参数：指定起始点的颜色值 第三个参数：指定结束点的颜色值 还可以加参数，如： background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace); 可以指定多个颜色值，如果不同时指定百分比，则平均...
阅读全文
摘要：rgba语法： rgba(0, 0, 0,0.5); 第一个参数：R 红色（0-255） 第二个参数：G 绿色（0-255） 第三个参数：B 蓝色（0-255） 第四个参数：透明度（0-1）使用rgba指定颜色的好处是：任何位置的颜色，使用rgba指定，都可以通过设置第四个参数来调整透明度。不仅仅可以设置背景色的透明度。使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别： 1、使用opacity指定背景颜色的透明度时，其内容也一起被设置透明度，导致内容模糊。如果不想内容模糊，只能如下处理： （单独设置一个元素做背景透明设置，其内容反而不在它内部） ...
阅读全文
摘要：word-wrap语法： word-wrap ： normal | break-word normal ： 默认值，单词如果单词超长，会冲出边界（单个单词超长，在当前行显示） break-word ：将内容在边界内换行，当单词在当前行放不下时，会自动切换到下一行（单个单词超长，在下一行显示）word-break语法： word-break:normal | break-all | keep-all normal：如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；（单个单词长...
阅读全文
摘要：text-overflow语法： text-overflow ： clip | ellipsis clip:表示不显示省略标记(...)，而只是简单的裁切，需要在一定的高度范围内配合overflow:hidden属性使用，如果不配合的话将无任何效果； 和单独使用overflow:hidden;效果一致。 ellipsis：对象文本溢出时将显示省略标记(...)，需要配合overflow:hidden；white-space:nowrap一起使用才会有效果。小知识点：/**这是firefox特有的属性，只有firefox浏览器可以识别，是firefox的一种hack形式*...
阅读全文
摘要：text-shadow语法： text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]... 第一个参数：指定颜色值 第二个参数：指定X轴偏移量 第三个参数：指定Y轴偏移...
阅读全文
摘要：box-shadow语法：（想法：用阴影来做边框，就不会出现动态改变边框宽度而产生的重排问题） 对象选择器{box-shadow：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 第一参数： 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影， 也就是说设置阴影类型为“inset”时，其投影就是内阴影； X轴偏移量：是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； Y轴偏移量：...
阅读全文
摘要：border-image语法： border-image ： none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ]{0,2} 第一个参数：none：默认值，边框无背景图片 image：和background-image一样，根据绝对定位设置背景图片的位置 第二个参数： number：设置边框的宽度，单位px，可以使用1~4个值，指定边框的宽度，设置方式同border-width percentage：同number一样，只不过是使用百分比来设置宽度 第三个参数：（可选，1~4...
阅读全文
摘要：1、border-radius标准：border-top-left-radius: x y // 左上角，x 圆角水平半径， y 圆角垂直半径border-top-right-radius：x yborder-bottom-right-radius：x yborder-bottom-left-radius：x yFF：-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleftchrome:(标准基础上加前缀)-webkit-bor
阅读全文
摘要：扩充类的方法：1、向原型对象上添加方法或属性。例如：Number.prototype.cl = function(){}; 但这种做法并不推荐，因为ES5之前，无法将这些新添加的方法或属性设置为不可枚举的。他们可以在for/in循环中被遍历到2、使用ES5提供的扩展对象的方法：Object.definePropery()。 在web浏览器环境下，可以通过Object.defineProperty()方法给HTMLElement.prototype添加方法，从而使表示HTML标记的所有对象可以继承该方法。但该方法尚未被普及，实用方面有限制类型检测：1、typeof关键字：无法检测对象的类型2..
阅读全文
摘要：1、类和原型：原型对象是类的核心，类的所有实例都从同一个原型上继承属性和方法，原型对象是类的唯一标识2、类和构造函数：构造函数通过new关键字来创建对象，构造函数的prototype属性被用作新对象的原型。所以，同一个构造函数创建的对象都是同一个类的成员3、类、原型、构造函数：当且仅当两个对象继承自同一个原型对象时，他们才是属于同一个类的实例。而初始化对象的构造函数则不能作为类的标识，因为两个不同的构造函数如果prototype指向同一个原型对象，那么这两个构造函数创建的实例仍然属于同一个类4、constructor：每个javascript函数（除了ES5中的Function.bind()方
阅读全文
摘要：跨域消息传递：postMessage()1、兼容性问题：IE8及其以上浏览器和其它主流浏览器都已经支持2、使用范围：跨iframe、跨页面、跨域3、使用方法： 发送消息：postMessage( data, scope ) data值需要传递的消息，scope指定发送给那些域 监听消息：使用事件监听方法监听（addEventListener/attachEvent） 之所以可以使用事件监听方法监听，是因为当调用postMessage方法时，会触发message事件，并传递给事件处理程序一个事件对象。4、事件对象的属性： data：传递的消息 source：消息源自的Window对象 ...
阅读全文
摘要：1、应用程序缓存和其它存储方式的区别： a、不像localStorage和sessionStorage那样只存储web应用程序的数据，它将应用程序自身存储起来。 b、不像浏览器缓存一样会过期或者被用户手动清除，除非用户“卸载”它们 c、离线状态下使用localStorage存储相关的数据，当再次进入在线状态时，能够将存储的数据传输到服务器2、应用程序缓存清单 使用方法： a、想要将应用程序“安装”到应用程序缓存中，首先创建一个清单：包括所有应用程序所依赖的URL列表 b、在主HTML页面的标签中设置manifest属性指向该清单文件 清单内容： a、首行必须以：CACHE MA...
阅读全文
摘要：userData是IE5及其以上浏览器支持的一种客户端存储方式，它通过在document元素后面附加一个专属的元素来实现。对userData的封装：/*** IE userdata封装*/function UserDataStorage( maxage ){ var memory = document.createElement( "div" ); memory.style.display = "none"; memory.style.behavior = "url('#default#userData')"; doc
阅读全文
摘要：封装cookie的操作：查询cookie个数、查询所有cookie的键、获取cookie、设置cookie、删除cookie、清除全部cookie/*** cookieStorage*/function cookieStorage( maxage, path ){ var cookie = ( function(){ var cookie = {}; var all = document.cookie; if( all ==="" ){ return cookie; } var list = all.split( "; " ); for( var i=0
阅读全文
摘要：1、本地存储方式的补充：flash cookie ，用于flash，最大不超过100k，借助flash的ExternalInterface接口，可以实现js对flash cookie的操作google gears， 是google开发的一款浏览器插件，内嵌SQLite数据库，并提供了api对其进行操作，但已被废弃indexedDB，目前在firefox中有实现，同cookie等存储方式相比，它可以存储多种类型的数据2、cookie1、cookie的值中不允许包含分号、逗号和空白符，在存储之前最好使用encodeURIComponent方法对其进行编码，读取时再进行解码2、和jQuery中不同的
阅读全文
摘要：客户端存储遵循同源策略，不同的站点页面之间不可以相互读取对方的数据，但同一站点的不同页面之间可以共享存储的数据客户端存储的种类：1、web存储 localStorage、sessionStorage2、cookie3、userData（IE）4、web数据库（尚未标准化） 索引数据库API（indexed Database API）5、文件系统API 用于将文件通过XHR上传到服务器主要看了localStorage和sessionStorage区别： 1、存储的有效期。localStorage为永久存储，除非用户手动删除；sessionStorage为会话存储，页面关闭之后就消失。 ...
阅读全文
摘要：1、终止请求和超时终止请求XMLHttpRequest对象提供abort方法，调用该方法时触发abort事件XHR2提供了timeout属性，当超时发生时触发timeout事件。但浏览器尚不支持自动超时。可以使用setTimeout模拟实现。例如：function timedGetText( url, time, callback ){ var request = new XMLHttpRequest(); var timeout = false; var timer = setTimeout( function(){ timeout = true; request.abort(); },..
阅读全文