盒模型及常见问题解决

什么是盒模型

每一个html元素均可看做一个盒子，由外边距margin、边框border、内边距padding、内容content组成，对这些属性的设置，能够实现元素的不一样展现及布局(eg.设置margin实现水平居中)。

盒模型分类

因为浏览器对盒模型的实现不一样，造成了：标准盒模型、IE盒模型
两者区别：width和height定义不一样

• 标准盒模型的宽高包括：content
• IE盒模型的宽高包括：content、padding、border

如何实现不一样分类

因为IE盒模型更贴合人们对于物理盒子宽高的理解，因此一般采用IE盒模型。
设置两种模型的方法：

• box-sizing: border-box; // IE盒模型
• box-sizing: content-box; // 标准盒模型

JS如何获取盒子宽、高

方法一：

dom.style.width/height
// 缺点：仅能获取js显式设置或dom标签上设置的行内样式中的宽高，
// 没法获取内联样式(<style>标签设置的样式)、外联样式(<link>标签引入的样式)中的宽高。❗️👍
复制代码

方法二：

dom.currentStyle.width/height
// 缺点：可获取各类方式综合层叠计算后的宽高，但仅支持IE浏览器。👎
复制代码

方法三：

window.getComputedStyle(dom).width/height
// 可获取各类方式综合层叠计算后的宽高，兼容性很好(IE9+)。👍👍
复制代码

方法四：

dom.getBoundingClientRect().width/height
// `getBoundingClientRect` 可获取元素的宽高及相对于视口原点(浏览器网页部分的左上角)位置信息(top、left)。👍
复制代码

什么是边距重叠

边距重叠：是指父子、相邻兄弟元素的外边距会重叠在一块儿，大小取较大的那个边距。

如何解决边距重叠 —— BFC（块级格式化上下文）

BFC的渲染规则：

• BFC元素垂直方向的外边距会重叠；
• BFC元素区域不会与浮动元素重叠(父级添加overflow: hidden清除浮动的原理)；
• BFC元素是一个独立的区域，它不会影响外部布局，外部元素也不会影响它内部布局；
• 计算BFC高度时，浮动元素也会参与计算。

如何建立BFC

• float 不为 none
• position 不为 static、relative
• display 不为 inline
• overflow 不为 visible

其它

我将学习、工做中的积累作成了开源项目：Blog

欢迎关注并一块儿讨论学习。