前端必须要了解的一些知识 (五)
盒模型
标准模型和IE模型
标准模型和IE模型的区别
1计算宽度和高度的不同
ie中content的宽度包括padding和border这两个属性
css是如何设置这两种模型的
border-box 是·ie
默认 content-box
js如何获取盒模型的宽和高
四种方法
1.dom.style.width/height 只能获取行内样式
2.dom.currentStyle.width/height只适合ie，兼容性问题
3.window.getComputedStyle(dom).width/height可以准确获取//兼容性最好
4.dom.getBoundingClientRect().width/height
getBoundingClientRect()可以返回一个包含几个参数的对象，left，top，width,height.等。。盒模型距离viewport 左上角的距离。
拔高
解释边距重叠
margin边距重叠取最大值
引出BFC和IFC
IFC在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。
BFC的使用场景
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC的生成
既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
看到有道友文章中把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC
BFC的约束规
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
清除浮动的四种方式及其原理理解
利用clear样式
父元素结束标签之前插入清除浮动的块级元素
利用伪元素（clearfix）
