js 盒模型

一笑奈何 提交于 2020-03-10 11:49:45

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
<!DOCTYPE html>



就是盒模型
<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>

```

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!