2012年10月9日
设置width / height 引发的问题
摘要： 设置一个元素的高宽，有两种方式：1. 按可视区域计算，包括border 和 滚动条2. 按css特指的 width/height 计算这两种方式各有各的好处：第一种用起来很自然，调用者不用去管元素内部的结构，特别是公用性特别明显的组件，如果每次调用都要先减去什么或加上什么，会平添很多代码；第二种则是需要团队定好规则，某个组件只能这么设置高宽（我偏好第一种，第二种也想不到别的好处了。。。）下面只说第一种（第二种还需要说么。。。）。DOM元素的可视区域由 border, padding, content 组成。也就是说如果我们设置一个元素宽度为200px，其实际content = 200 - bo 阅读全文
posted @ 2012-10-09 17:21 越己 阅读(391) 评论(0) 推荐(0) 编辑
2012年8月25日
杂谈 height, line-height, display, vertical-align
摘要： 先声明一下，测试环境为 IE7+ , Chrome, Firefox, 不爱测那么多浏览器。。。坑爹的行内元素HTML：<div> <span>文字</span></div>CSS:body { font-family: '宋体'; font-size: 12px;}这种情况下，span 和 div 都是由文字撑开高度，但是高度各有不同。div: 所有浏览器都是height: 12pxspan: IE7 IE8 Chrome 是height: 12px, IE9 IE10 Firefox 是height: 14px第一个例子就这么 阅读全文
posted @ 2012-08-25 00:59 越己 阅读(1615) 评论(1) 推荐(1) 编辑
2012年6月27日
精确获取元素样式值 - 盒模型
摘要： 两个要点：1. 盒模型的计算方式2. 默认值的处理计算方式先说前提条件，即 doctype 是<!doctype html>，也就是浏览器会按标准模式渲染网页，这样的话，所有浏览器的盒模型的计算方式都是： 可见宽度 = borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth; 可见高度 = borderTopWidth + paddingTop + height + paddingBottom + borderBottomWidth;因为IE8+ 和其他非IE浏览器都支持 box-sizing， 阅读全文
posted @ 2012-06-27 19:25 越己 阅读(433) 评论(0) 推荐(0) 编辑
精确获取元素样式值 - 位置
摘要： 写这篇文章我很矛盾，因为如果非常规范的写代码，这篇文章说的问题根本就不存在。因为 top right / bottom left 一般都会手动设置，如果不小心结果是 auto，那绝对是您忘了赋值了。比如为了绝对定位到父级元素（offsetParent）的左上角，有时候我们会偷懒写成下面这样：position: absolute;我们以为浏览器默认会填上 left: 0; top: 0; 没错，大部分浏览器都会实现同样的效果，但是却不是 0px，而是 auto，这时候问题就来了，而且我曾经在Firefox x.0 中发现，这样简写居然不是定位到左上角，当然最新的版本已经解决了这个问题。首先说明一 阅读全文
posted @ 2012-06-27 19:24 越己 阅读(388) 评论(0) 推荐(0) 编辑
精确获取元素样式值
摘要： 这个系列的文章会介绍如何精确取值，开篇准备了一些闲言碎语。首先介绍两个工具方法：/** * 把连字符形式转成驼峰形式，如margin-left => marginLeft * @param {String} name * @return {String} */function camelize(name) { return name.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); });}/** * 把驼峰形式转成连字符形式，如marginLeft => margin-left * @p... 阅读全文
posted @ 2012-06-27 19:23 越己 阅读(374) 评论(0) 推荐(0) 编辑
2012年6月4日
【jQuery-1.7.2源码分析】extend
摘要： 上一篇说的jQ对象的鸟瞰图，这还是一个非常简单的对象，jQ强大的各种方法则是通过各种扩展实现的。jQ的扩展分两种1.把相对紧凑的方法统一在一处，因此，在内部写法上看起来是一个个的模块，这样便于维护。其中分为两类：1) 基于jQuery这个对象，也就是静态属性/方法的作用，这部分的扩展更为通用，比如attr: function( elem, name, value, pass )，脱离jQ对象也可以使用2) 基于 prototype 的，内部大多只是借用了静态属性/方法2. 当作工具方法如需要给obj = {a:1, b:2}对象加几个属性，就直接obj = jQuery.extend(obj, 阅读全文
posted @ 2012-06-04 14:55 越己 阅读(599) 评论(0) 推荐(0) 编辑
【jQuery-1.7.2源码分析】jQuery对象
摘要： 前言看了一些别人写的源码分析文章，大多是贴代码，写注释。个人觉得从中吸取到的知识有限，因为这样多重于技巧，而轻于设计思想，所以本系列不打算重复老路，更多的是把我看源码的心得分享出来。对于一些值得推广的技巧，会在文章结尾处专门列出，以便查找。jQuery对象是什么，举个例子，$('#id') 返回的就是jQuery对象，这个东西是整个jQuery的核心所在，所以我先来分析它。var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 阅读全文
posted @ 2012-06-04 14:54 越己 阅读(1171) 评论(0) 推荐(0) 编辑
2012年5月16日
【Firefox】重绘引发Flash重新加载
摘要： 今天碰到一个bug，仅火狐出现，先放一段代码：<div> <object> <param name="wmode" value="opaque" /> <embed></embed> </object></div>这时，如果你改变div的overflow，或者width之类的，引起了div的重绘，貌似这会引起整个body范围内的重绘。因为是body的重绘，所以为了不让flash跟着遭殃，只好把它放到body同级上，然后使用绝对定位去匹配位置。即最后的代码结构是：<h 阅读全文
posted @ 2012-05-16 22:51 越己 阅读(335) 评论(0) 推荐(0) 编辑
ajax原理分析
摘要： ajax是通过XMLHttpRequest对象和服务器进行通信的一种方式，就像我们在浏览器地址栏输入url，然后服务器返回页面一样，只不过ajax给了我们充分的自由，让我们可以选择何时发送http请求，以何种方式发以及发什么。首先，创建一个XMLHttpRequest对象：function createXHR() { return new XMLHttpRequest();}IE从7开始支持XHR对象，我不想再支持IE6了，所以你懂的。代码范式xhr.open(method, url, isAsyn);xhr.send(data);xhr.open()没有发送请求，而是准备好了一个即将发... 阅读全文
posted @ 2012-05-16 13:30 越己 阅读(598) 评论(1) 推荐(0) 编辑
2012年5月12日
php定义大段文本
摘要： php的heredoc很适合输出大段文本，比如：echo <<<HTML<div> <span>abc</span></div>HTML;但有时候，你并不想就这么输出，而是把文本给一个变量，那么就得这么做：$str = <<<HTML<div> <span>abc</span></div>HTML;接着，你觉得这么不好看，要缩进一下，这里我要严重提醒下，这玩意不能缩进！它的结束标识符必须在行首，而且前面不能有多余的空白符或其他任何字符它的开始标识符和结束标识符后面 阅读全文
posted @ 2012-05-12 17:30 越己 阅读(1792) 评论(0) 推荐(0) 编辑
下一页