css盒模型

基本概念：标准模型+IE模型

都是由   margin、border、padding、content，并且 content 部分不包含其他部分。

标准模型和IE模型的区别

标准盒模型在计算宽高时只计算content

IE盒模型计算宽高的时候包含了border  padding  

就是说IE盒模型的宽度包含了border  padding  

css如何设置这两种盒模型

设置标准盒模型:

box-sizing:content-box；

设置IE盒模型:

box-sizing:border-box;

js如何获取盒模型对应的宽和高

4中方式

第一钟通过 dom.styte.width/heigth这种方法不可以取到所有的宽和高因为他只能取到内联css样式的宽和高，什么是内联就是此文件内部的css样式而不是link引入的css。

第二种方法window.getComputedStyle(dom).width/heigth这个支持内联外联样式也不用在乎兼容问题

BFC的基本概念以及原理

块级格式化上下文

原理：

1，bfc的区域不会和浮动的区域重叠就是清楚浮动。

2，bfc是一个独立的容器外面的元素不会影响内部元素内部也不会影响外部

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

如何创建BFC

1,overflow: hidden  创建BFC

2,只要是浮动  就是创造了一个BFC

BFC使用场景