js 盒模型

時間 2019-12-09

標籤模型欄目 JavaScript 简体版

原文原文鏈接

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

一、width | height

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

二、padding + width | padding + height

clientWidth
clientHeight

三、border + padding + width | border + padding + height

offsetWidth
offsetHeight

四、結合絕對定位，距離最近定位父級的Top | Left

offsetTop
offsetLeft

···html
<!DOCTYPE html>

就是盒模型css

<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>

```html

相關標籤/搜索