js 盒模型

JS盒模型 *********

1、width | height

• parseInt(getComputedStyle(ele, null).getPropertyValue('width'))
• parseInt(getComputedStyle(ele, null).getPropertyValue('height'))

2、padding + width | padding + height

• clientWidth
• clientHeight

3、border + padding + width | border + padding + height

• offsetWidth
• offsetHeight

4、结合绝对定位，距离最近定位父级的Top | Left

• offsetTop
• offsetLeft

···html

<style type="text/css">
	.sup {
		 200px;
		height: 200px;
		padding: 30px;
		border: 5px solid black;
		background-color: orange;
		margin: 20px;
		position: relative;
	}

	.sub {
		 100px;
		height: 100px;
		padding: 20px;
		border: 5px solid black;
		background-color: red;
		position: absolute;
		top: 0;
		left: 20px;
	}
</style>

```