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语法: /*Mozilla*/ -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(); },..
阅读全文