盒模型

介绍

盒模型 box model 是元素大小的呈现方式

css3 新增了盒模型计算方式：box-sizing 属性

盒模型的默认值是 content-box

content-box：

布局所占宽度 Width=width+padding-left+padding-right+border-left+border-right

border-box：

布局所占宽度 Width=width(包含了 padding-left+padding-right+border-left+border-right)

padding-box:

布局所占宽度 Width=width(包含了 padding-left+padding-right)+border-left+border-right

js 计算

<div class="box" style="width: 200px; height: 200px;"></div>;

let box = document.querySelector(".box");
console.log(box.style.width); // 200px
console.log(box.style.heihgt); // 200px

但对于 css 尺寸，无法计算

.box {
    width: 200px;
    height: 200px;
    background: lightpink;
}

JavaScript 的 element 对象，只提供三种只读属性，用于获取元素的尺寸

offsetHeight 和 offsetWidth

用于获取元素真实的宽高（border-box），包含元素的内边距和边框，如果有水平滚动条的话，还需要加上水平滚动条的高度

.box {
    margin: 10px auto;
    padding: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background: lightpink;
}

let box = document.querySelector('.box');
let height = box.offsetHeight;
let width = box.offsetWidth;
console.log(height); // 222px
consoel.log(width); // 222px

clientHeight 和 clientWidth

表示可视区域的高度和宽度，包括元素内容本身的宽度和高度以及 padding。但是，如果有滚动条的话，需要减去滚动条的宽度和高度。

.box {
    margin: 10px auto;
    padding: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background: lightpink;
}

let box = document.querySelector('.box');
let height = box.clientHeight;
let width = box.clientWidth;
console.log(height); // 220px
consoel.log(width); // 220px

scrollHeight 和 scrollWidth

用于获取一个元素的内容宽度高度，包括溢出的部分

在没有溢出，即没有滚动条的情况下，这两个值等同于 clientHeight 和 clientWidth，也是包括元素本身的尺寸以及 padding，但不包括 border 和 margin

.father {
    margin: 10px auto;
    padding: 10px;
    /* 父元素的内容宽度：320px + 10px = 330px */
    width: 200px;
    /* 父元素的内容高度：200px - 17px = 203px */
    height: 200px;
    border: 1px solid #000;
    overflow: auto;
}
.son {
    padding: 10px;
    /* 子元素的真实宽度：300px + 10px * 2 = 320px */
    width: 300px;
    height: 100px;
    background: plum;
}
let f_box = document.querySelector('.father');
let height = f_box.scrollHeight;
let width = f_box.scrollWidth;
console.log(height); // 203px
console.log(width); // 330px

参考

https://juejin.cn/post/6869300782765637639