CSS盒模型

CSS盒模型分标准模型和IE模型，俩者区别是什么呢？如何在css中设置这两种模型呢？跟着本文来了解一下；

文章目录

前言

一、盒模型是什么？

二、标准模型和IE模型的区别在哪里？

标准模型

IE模型

三、如何通过CSS设置这两种模型？

四、如何通过JS获取相应盒模型的宽高？

五、边距重叠解决方案（BFC）

---

前言

        提到CSS盒模型，很多人能想到基本概念是什么，甚至能想到其中标准模型和IE模型有什么区别；但再去引申，如何设置这两种模型？如何通过JS获取盒模型对应的宽高？如果发生边距重叠如何解决呢？阅读本文，了解更多的盒模型的知识吧！

---

一、盒模型是什么？

        关于盒模型的定义，百度是这样解释的：我们常听到的属性名：内容（content）、内边距（padding）、边框（border）、外边距（margin），这些属性盒模型都具备；为了便于理解，我们用日常中常见的事物盒子来比喻，因此称为“盒模型”。

二、标准模型和IE模型的区别在哪里？

标准模型

width=内容（content）的宽度

height=内容（content）的高度

总宽度=content+padding（左右）+border (左右)+margin（左右）

总高度=content+padding（上下）+border（上下）+margin（上下）

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE模型

width=content+padding（左右）+border（左右）

height=content+padding（上下）+border（上下）

总宽度=width+margin（左右）

总高度=height+margin（上下）

设置 padding 、border 后，真正宽度或高度就会改变。

三、如何通过CSS设置这两种模型？

box-sizing：content-box;        (标准模型，也是浏览器默认模型)

box-sizing：border-box;        (IE模型)

四、如何通过JS获取相应盒模型的宽高？

        1> 通过dom节点dom.style.width/height

let dom = document.getElementById("dom");
console.log(dom.style.width)

这种方法只能获取通过内联样式设置宽高样式的元素的宽和高

        2> 通过dom.currentStyle.width/height

//仅支持IE浏览器
let dom = document.getElementById("dom");
console.log(dom.currentStyle.width)

这种方法获取到的是渲染后的元素的宽和高，但该种方法仅支持IE浏览器

        3>通过window.getComputedStyle(dom).width/heght

let dom = document.getElementById("dom");
let width = window.getComputedStyle(dom).width;
console.log(width)

这种方法也是获取浏览器渲染过后的元素的宽高，但兼容性更好

        4>通过dom.getBoundingClientRect().width/height

let dom = document.getElementById("dom");
let width = dom.getBoundingClientRect(dom).width;
console.log(width)

这种方法可以获取元素的绝对位置（相对于视窗口的左上角)，可获得left/top/width/height四个属性

五、边距重叠解决方案（BFC）

在页面布局中，可能会出现父、子重叠；兄弟上、下边距重叠，一般会取边距最大值；空元素的上、下边距重叠

BFC：Block Formatting Context，意思为块级格式化上下文

BFC的使用原理：

        ① BFC元素在垂直方向上的边距不会发生重叠

        ② BFC区域不会与浮动元素的box重叠，可用来消除浮动

        ③ BFC在页面上是一个独立的容器，外面的元素不会影响容器里面的元素，同样，里面的元素也不会影响容器外面的元素

        ④ 计算BFC元素高度时，浮动元素不参与计算

如何创建BEC:

        ① overflow的值为hidden/auto等；

        ② float的值不为none时；

        ③ position的值不为static或relative；

        ④ display的值为inline-box、table 、table-cell相关等；

---