前端面试知识点--CSS盒模型

1. 基本概念

完整定义DOCTYPE会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式。

（W3C）标准模型
一个块的宽度 = width(content宽度)+padding(内边距)+border(边框)+margin(外边距)；

（怪异）IE模型
一个块的宽度 = width(content宽度+内边距+边框)+margin(外边距) （即怪异模式下，width包含了border以及padding）;

2. 标准模型和IE模型的区别

标准盒子模型中，盒子的width是指content宽度，但IE盒子模型中，width包含了content、border和padding的宽度。

即主要区别在于width和height的计算方式的不同

标准盒子模型：盒子的总宽度 = width + padding + border + margin
width = content的宽度

IE 盒子模型 : 盒子的总宽度 = width + margin
width = content的宽度 + padding内边距(左右) + border边框宽度(左右)
（高度以此类推）

3. CSS如何设置这两种模型

（box-sizing为CSS3属性）

• box-sizing:content-box; 标准模型（浏览器默认）
• box-sizing:border-box; IE模型

4. JS如何设置获取盒模型对应的宽和高

• dom.style.width/height（只能获取内联样式的宽高）
• dom.currentStyle.width/height（渲染显示的宽高，只支持IE浏览器）
• window.getComputedStyle(dom).width/height（兼容主流浏览器，通用性好）
• dom.getBoundingClientRect().width/height/left/top（计算元素的绝对位置，视窗的左上交为顶点）

5. BFC（边距重叠解决方案）

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

原理规则：

• 不会让垂直方向的边距发生重叠；
• BFC的区域不会与浮动元素发生重叠；
• BFC在页面上是独立容器，其里面的元素与外面元素互不影响；
• 计算BFC高度时，浮动元素也会参与计算；

如何创建BFC：

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table、table-cell、table-caption、flex、inline-flex
• overflow的值不是visible

使用场景：
解决高度塌陷问题------链接

还有一种IFC为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来的。

（本文纯属个人学习笔记，如有不足请留言！）