摘要:两个要点: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 越己 阅读(267) 评论(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 越己 阅读(235) 评论(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 越己 阅读(239) 评论(0) 推荐(0) 编辑