css盒模型
页面上显示的每个元素(包括内联元素)都可以看做一个盒子,即盒模型(box-model)
盒模型有两种类型:W3C标准盒模型
和IE怪异盒模型
W3C标准盒模型
width = content宽度
盒子总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE怪异盒模型
width = content宽度 + padding + border
盒子总宽度 = margin-left + width + margin-right
切换方式 box-sizing
/* W3C 标准盒模型(浏览器默认) */
box-sizing: content-box;
/* IE 怪异盒模型 */
box-sizing: border-box;
JS获取盒模型宽高
let box = document.getElementById('box')
getComputedStyle(box).width // 获取width
box.getBoundingClientRect().width // 获取DOMRect的宽