css盒模型

css盒子模型的基本概念：标准模型+ie模型

标准模型的宽高是content的宽高，不包括padding和border。

 

 ie模型的宽高是包括padding和border的

css是如何设置这两种模型的

box-sizing：content-box (标准)

box-sizing：border-box（ie）

js如何获得盒子模型对应的宽高

dom.style.width/height  只能取到内联的css样式设置的宽高

dom.currenStyle.width/height  可以取到所有样式设置的宽高，但只有ie支持

window.getComputedStyle(dom).width/height   谷歌浏览器

dom.getBoundingClientRect().width/height   计算元素的绝对位置，获得leift、right、top、bottom4个值

边距重叠

兄弟盒子直接外边距取最大的值

空元素盒子的边距取该元素最大的值，比如上边距30px，下边距20px，取30px；

父子元素用bfc解决

BFC边距重叠解决方案

基本概念：块级格式化上下文

 原理（渲染规则）：

1、bfc元素上学边距会发生重叠

2、bfc元素区域不会与浮动元素发生重叠（用于清除浮动）

3、bfc元素是一个独立元素，外面的元素不会影响里面的元素

4、计算bfc元素高度的时候，浮动元素也会参与计算

 如何创建bfc

float值不为none，只要浮动了，就创建了一个bfc元素

position的值为fix和absolute

dispaly设置为table相关属性

overflow为hidden和auto