13.元素尺寸与位置

原理：通过js的方式，得到元素在页面中的位置

13.1 元素尺寸与位置-尺寸

1.获取宽高:
●获取元素的自身宽高、包含元素自身设置的宽高、padding、border
● offsetWidth和offsetHeight
●获取出来的是数值，方便计算
●注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

2.获取位置:
●获取元素距离自己定位父级元素的左、上距离
● offsetleft和offsetTop注意是只读属性

3.获取位置的另一种方法:

element.getBoundingClientRect()

该方法返回元素的大小及其相对于视口的位置
【示例】

const div = document.querySelector('div')
console.log(div.getBoundingClientRect())

13.2 css属性选择器

语法：

input[属性]{
	…
}
input[属性=属性值]{
	…
}

13.3 总结

补充：
让整个HTML页面滚动丝滑

/* 页面滑动 */
html {
  /* 让滚动条丝滑的滚动 */
  scroll-behavior: smooth;
}