css中盒子模型
一般对块元素，做布局和做动画的时候，往往我们需要通过dom api去获取dom的长度和宽度
通过DOM元素的尺寸
在宽度方向上相似的三个属性， 高度方向上同理
| 序号 | 属性 | 意义 |
|---|---|---|
| 1 | offsetWidth | width + padding-left +padding-right + border-left-width+border-right-width， 实际看到的值 |
| 2 | clientWidth | width + padding-left +padding-right， 实际看到的值 |
| 3 | scrollWidth | 元素的实际宽度，包括被滚动条隐藏的宽度 |
| 4 | offsetLeft | 该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离 |
| 5 | clientLeft | 内边距的边缘和边框的外边缘之间的水平距离，即左边框的距离 |
| 6 | scrollLeft | 做滚动条隐藏的尺寸 |
- 注意
scrollLeft， 是指滚动条的位置，是是可写的
offsetLeft， 对应的有一个属性（offsetParent），是指元素相对于哪个父元素有定位
文档尺寸和视口坐标
当我们计算一个DOM元素位置也就是坐标时候，往往会有两个坐标， 文档坐标 和 视口坐标
- 文档尺寸：是指document.body 或者 document.documentElement的整个大小包括滚动条默认隐藏的部分
- 视口尺寸：是指现实文档内容的一部分，不包括浏览器的外壳， 不包括浏览器滚动条隐藏的部分
如果文档比视口小，没有出现滚动条，此时文档的左上角和视口的左上角是相同，两者转换需要减去滚动条的scrollLeft 或者scrollTop 即可
获取一个元素的 scrollOffset值的函数封装
function getScrollOffset () {
const dom = w || window
if (w.pageXoffset != null) {
return {x: w.pageXoffset, y: w.pageYoffset}
}
const d = w.document
if (document.compatMode === 'CSS1Compat') {
return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
}
return {x: d.body.scrollLeft, y: d.body.scrollTop}
}
获取视口的尺寸
function getViewPortSize (w) {
const w = w || window
if (w.innerWidth != null)
return {w: w.innerWidth, h: w.innerHeight}
var d = d.document
if (document.compatMode === 'CSS1Compat')
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}
return {w: d.body.clientWidth, h: d.body.clientHeight}
}
获取文档的文档尺寸
function getElementPosition(e) {
var x = 0
var y = 0
while(e != null) {
x += e.offsetLeft
y += e.offsetTop
e = e.offsetParent
}
return {x, y}
}
获取元素的视口坐标
万能的DOM，提供了jsapi， 通过dom的getBoundingClientRect方法，返回一个left， right， top， bottom， 分别表示四个位置相对于视口的坐标， 它返回的数值，包元素的内边距和边框，不包括外边距
定位与尺寸的问题
定位影响元素尺寸的，文档流信息
absolute： 脱离正常文档流， 需要通过width，height， left， bottom right top 等属性来确定文档的大小
fixed： 脱离正常文档流， 需要通过width，height， left， bottom right top 等属性来确定文档的大小 相对于窗口定位
relative： 不脱离正常的文档流， 块元素依然保持块属性 left， bottom， right， top 只影响定位属性
网友评论