Skip to main content

CSS盒模型

标准盒子模型​

在标准盒模型中，元素的whith和height指的是元素内容的宽度和高度，也就是说我们改变元素的margin、padding、border，都不会改变元素内容的宽度和高度。

.box {
    box-sizing: content-box; // 默认是标准盒子模型
}

IE盒子模型​

在IE盒子模型中，元素的whith和height指的是元素内容的宽度和高度 + 内边距（padding）+ border（边框），也就是说我们改变元素的padding、border，是会改变元素内容的宽度和高度的。

.box {
    box-sizing: border-box;
}

通过DOM节点中的style属性获取元素宽度/高度 缺点是只能获取行内样式， 不能获取内嵌样式、外链样式。

let width = element.style.width; 
let height = element.style.height;

通过window.getComputedStyle方法获取元素宽度/高度，这是一个通用型方法

let width = window.getComputedStyle(element).width;
let height = window.getComputedStyle(element).height;

通过getBoundingClientRect方法获取元素宽度/高度，这个方法是获取一个元素的绝对位置，可以拿到元素的left、top、width、height、

let width = element.getBoundingClientRect().width;
let height = element.getBoundingClientRect().height;