基本概念：标准模型+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
网友评论