iframe用于創(chuàng)建內(nèi)部窗口 .inner frame
視口
實(shí)際可見(jiàn)的內(nèi)容可見(jiàn)區(qū)域。
offset：偏移，位移 哦符賽的
client：客戶端 可蘭因的
scroll：滾動(dòng) 死闊肉
Fxxx off：滾
1.offsetWidth
定義：offsetWidth屬性返回元素的寬度（沒(méi)有單位）沼头，offsetWidth是測(cè)量包含元素的邊框(border)、水平線上的內(nèi)邊距(padding)豹绪、豎直方向滾動(dòng)條(scrollbar)（如果存在的話）坛怪、以及CSS設(shè)置的寬度(width)的值。
不包含外邊距
（可視內(nèi)容寬 = width+padding + border ）：如果有滾動(dòng)條
語(yǔ)法：
元素.offsetWidth
返回值：返回元素的布局寬度（沒(méi)有單位）活玲，offsetWidth是測(cè)量包含元素的邊框(border)涣狗、水平線上的內(nèi)邊距(padding)、豎直方向滾動(dòng)條(scrollbar)（如果存在的話）舒憾、以及CSS設(shè)置的寬度(width)的值镀钓。
實(shí)例：
<style>
div{
width: 200px;
height: 200px;
border: 50px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div></div>
<script>
console.log(document.querySelector("div").offsetWidth)//400
</script>
2.offsetHeight
定義：返回元素的布局高度（沒(méi)有單位），offsetWidth是測(cè)量包含元素的邊框(border)珍剑、水平線上的內(nèi)邊距(padding)掸宛、豎直方向滾動(dòng)條(scrollbar)（如果存在的話）、以及CSS設(shè)置的寬度(Height)的值招拙。
不包含外邊距
（可視內(nèi)容高 = width+padding + border ）：如果有滾動(dòng)條
語(yǔ)法：
元素.offsetHieght
返回值：返回元素的布局高度（沒(méi)有單位）唧瘾，包括內(nèi)容，邊框和內(nèi)邊距别凤，滾動(dòng)條饰序，但不包括外邊距。
實(shí)例：
3.clientWidth | clientHieght
定義：clientWidth屬性返回元素的可視寬度（以像素為單位）规哪，包括填充求豫，內(nèi)邊距，但不包括邊框，外邊距蝠嘉，滾動(dòng)條最疆。只讀屬性。
（可視內(nèi)容寬 = width+padding - 滾動(dòng)條）：如果有滾動(dòng)條
語(yǔ)法：
元素.clientWidth
返回值：屬性返回元素的可視內(nèi)容寬度 | 高度（以像素為單位）蚤告，包括填充努酸，內(nèi)邊距，但不包括邊框杜恰，外邊距获诈，滾動(dòng)條。只讀屬性心褐。
實(shí)例：
<style>
div{
width: 200px;
height: 200px;
border: 50px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div></div>
<script>
console.log(document.querySelector("div").clientWidth)//300
</script>
4.scrollWidth || scrollHeight
定義：用于查詢?cè)氐膬?nèi)容寬 || 內(nèi)容高
（全部寬度：可視寬(width+內(nèi)邊距)+不可視寬）不含滾動(dòng)條
（全部高度：實(shí)際高(Height+內(nèi)邊距)+不可視寬）不含滾動(dòng)條
- element.scrollWidth：返回元素的整體寬度舔涎，包括由于溢出而無(wú)法展示在網(wǎng)頁(yè)的不可見(jiàn)部分。
- element.scrollHeight ：返回元素的整體高度逗爹，包括由于溢出而無(wú)法展示在網(wǎng)頁(yè)的不可見(jiàn)部分亡嫌。
語(yǔ)法：
元素.scrollWidth || scrollHeight
返回值：
實(shí)例：
<style>
div{
width: 200px;
height: 100px;
border: 10px solid black;
padding: 10px;
margin: 50px;
background-color: aquamarine;
/* overflow: auto; */
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector("div")
console.log(div.scrollWidth,div.scrollHeight)//220 120
</script>
innerWidth
定義：返回視口寬，包括滾動(dòng)條
語(yǔ)法：
元素.innerWidth
返回值：返回視口寬桶至，包括滾動(dòng)條
實(shí)例：
<style>
div{
background-color: aquamarine;
width: 800px;
height: 2000px;
}
</style>
</head>
<body>
<div>
</div>
<script>
let v = window.innerWidth
document.querySelector("div").innerHTML = `<h1>${v}</h1>`
// document.onclick= function(){
// document.querySelector("div").innerHTML = `<h1>${v}</h1>`
// }
window.onresize = ()=>{
let v = window.innerWidth//內(nèi)部寬（包含滾動(dòng)條）
document.querySelector("div").innerHTML = `<h1>${v}</h1>`
}
</script>
offsetLeft || offsetTop
定義：
用于查詢定位元素的坐標(biāo)
offsetLeft：查詢定為元素的水平坐標(biāo)
offsetTop：查詢定位元素的垂直坐標(biāo)
語(yǔ)法：
定位元素.offsetLeft
定位元素.offsetTop
返回值：
返回一個(gè)數(shù)字（單位是像素）
getBoundingClientBox
返回元素在視口中的
查詢?cè)爻叽?/h2>
Element.offsetWidth || offsetHeight:布局尺寸
Element.clientHeight || clientWidth:可視內(nèi)容寬度 視口尺寸
Element.scrollHeight || scrollWidth:可視加不可視 內(nèi)容高
查詢?cè)刈鴺?biāo)（還有一個(gè)光標(biāo)系統(tǒng)）
在瀏覽器中有兩種坐標(biāo)系統(tǒng)
視口坐標(biāo)：以視口的左上角為坐標(biāo)原點(diǎn)（0昼伴，0）的坐標(biāo)系統(tǒng)
文檔坐標(biāo)：以文檔的左上角為坐標(biāo)原點(diǎn)、
查詢視口坐標(biāo)
Element.getBoundingClientRect()
定義： 用于查詢?cè)氐囊暱谧鴺?biāo)镣屹，該函數(shù)返回一個(gè)矩形（DOMRect）對(duì)象圃郊，該對(duì)象有6個(gè)屬性：top,lef,right,bottom,width,height；
語(yǔ)法：
元素.getBoundingClientRect()
沒(méi)有參數(shù)
返回值：該函數(shù)返回一個(gè)矩形（DOMRect）對(duì)象女蜈，該對(duì)象有6個(gè)屬性：top,lef,right,bottom,width,height持舆；
實(shí)例：
<style>
div{
width: 100px;
height: 100px;
float: right;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector("div")
console.log(div.getBoundingClientRect());//DOMRect { x: 1812, y: 8, width: 100, height: 100, top: 8, right: 1912, bottom: 108, left: 1812 }
</script>
實(shí)例2.0：查詢div的x和y坐標(biāo)
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div></div>
<script>
const div= document.querySelector("div")
const obj = div.getBoundingClientRect()
console.log(obj.x,obj.y)
</script>
查詢?cè)匚臋n坐標(biāo)
- 方法1：利用offsetLeft和offsetTop查詢
- 方法2：利用公式計(jì)算（文檔坐標(biāo)=視口坐標(biāo)+文檔滾動(dòng)距離）window.scrollY+
Element.offsetTop || Element.offsetLeft
定義：
是一個(gè)只讀屬性，用于查詢?cè)兀ǘㄎ换虿欢ㄎ唬┫鄬?duì)于offsetParent的坐標(biāo)
offsetParent是什么
- 他最近的定位父級(jí)伪窖。（1.必須是父級(jí)元素2.必須設(shè)置定位屬性 3.必須是最近的）
- body
語(yǔ)法：
非定位.offsetTop
定位.Top
返回值：返回沒(méi)有單位的像素坐標(biāo)
實(shí)例：
查詢?cè)O(shè)置內(nèi)容的滾動(dòng)尺寸
<nav class="md-nav" aria-label="查詢?cè)O(shè)置內(nèi)容的滾動(dòng)尺寸">
</nav>
