盒模型
- 标准模型
- IE模型
两种模型都包括(从外向里)margin、border、padding、content
不同的是:较width、height而言,1 只包括content内容,而2则包括border、padding;
如何设置两种模型呢?1: box-sizing: content-box
2: box-sizing: border-box
以上内容与标题无任何关系,纯粹巴拉巴拉几句。。。
js 获取盒模型宽高的几种方法:
设置dom元素的宽高样式 一般有三种方法:
- 内联样式
- style标签
- 通过link标签引入
获取方法有如下4个
- dom.style.width/height
只试用于1 内联样式的获取
- dom.currentStyle.width/height
拿到的是123中渲染以后的样式,是比较准确的,但是有兼容性只有ie支持
- window.getComputedStyle(dom).width/height
兼容性更好,可以拿到123的样式
- dom.getBoundingClientRect().width/height/top/left
拿到的是123中渲染以后的样式,还可以计算元素的绝对位置(距离视口viewport左顶点的距离)