精确获取元素样式值 - 盒模型

两个要点:

1. 盒模型的计算方式

2. 默认值的处理

 

计算方式 

先说前提条件,即 doctype 是 <!doctype html>,也就是浏览器会按标准模式渲染网页,这样的话,所有浏览器的盒模型的计算方式都是:

  可见宽度 = borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth;

  可见高度 = borderTopWidth + paddingTop + height + paddingBottom + borderBottomWidth;

 

因为IE8+ 和其他非IE浏览器都支持 box-sizing,即可以指定盒模型的计算方式,默认值是 content-box,计算方式和上面一样。

还有一个值是 border-box,计算方式如下:

  可见宽度 = width(即真正的width = 设置的width - border - padding)

  可见高度= height

 

 

默认值

盒模型这几个属性取到的值不一定是数字,也可能是 auto、medium 之类的,这非常令人讨厌。非数值的情况大多是默认值,所以下面来看:

  IE678 IE9+和非IE
margin auto 0px
border medium 0px
padding 0px 0px
width/height auto 如100px

 

可见 padding 最靠谱,所有浏览器表现一致。

 

最讨厌的是 border,IE居然默认是 medium,如果我们没设置过border,medium等同于0px;如果我们设置成 medium,警告一下,千万别在开发中用medium。

除此之外,border还有两个文本值:thin, thick。这三个值存在兼容性问题,如下:

  IE67 IE8+和非IE
thin 2px 1px
medium 4px 3px
thick 6px 5px

 

这里我们不用去考虑手动设置成 medium 的情况,所以碰到 medium,直接转成0px,不用考虑别的,如果谁手动写了medium,您自己蛋疼去吧。况且 3px 只有三个字符,您写 medium 累不累啊

 

margin 给人的感觉是用于分隔两个盒模型,也就是说它本身并不是盒模型,只是盒模型的一个附属,暂且可以这么理解吧,毕竟真正想想,我们需要动态获取它干嘛?

 

压轴的是 width / height

在 IE 中碰到 auto 并不是没有办法了,而是要用到另一组属性: offsetWidth / offsetHeight

 

有人会问为什么不是 client 系列,刚才不是说 border 有那个不靠谱的值,直接上client系列就可以不用管border了嘛,但问题是,IE中如果值是 auto,clientWidth/Height 为 0,直接作废了。

  width = offsetWidth - border - padding

  height =offsetHeight - border - padding

 

posted @ 2012-06-27 19:25  越己  阅读(277)  评论(0编辑  收藏