前端小知识（7）--css盒模型

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