前端基础：CSS盒模型(1)

一、盒模型的分类：标准盒模型 + IE 怪异模型

1、content-box 标准盒模型：

• 浏览器默认值为【标准盒模型】，即 box-sizing: content-box。
• width 与 height 只包括content的宽和高，不包括border，padding，margin。这意味着：内边距, 边框和外边距都在这个盒子的外部。

2、border-box IE 盒模型（也叫 Quirks 怪异盒模型）：

• width 与 height 包括padding与border，不包括margin。这是IE Quirks mode使用的盒模型 。 这意味着，当你设置一个元素为 box-sizing: border-box 时，此元素的内边距和边框不再会增加它的宽度。这个时候内边距和边框将会包括在盒子中。

二、JS如何设置获取盒模型对应的宽高

1. dom.style.width/height

   只能取到内联样式的宽高，取不到样式表和外联样式写的宽高

2. dom.currentStyle.width/height

   拿到最终渲染后的dom的实际宽高，但只有IE支持

3. window.getComputedStyle(dom).width/height

   拿到最终渲染后的dom的实际宽高，兼容多浏览器

4. dom.getBoundingClientRect().widh/height/top/left/bottom/right

   取到dom渲染后相对于viewport边界的宽高和绝对位置

转载于:https://juejin.im/post/5b040303f265da0ba0637f79