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
<html lang="zh"> <head> <meta charset="UTF-8"> <title>就是盒模型</title><style type="text/css">
.sup {
width: 200px;
height: 200px;
padding: 30px;
border: 5px solid black;
background-color: orange;
margin: 20px;
position: relative;
}
.sub {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: red;
position: absolute;
top: 0;
left: 20px;
}
</style>
