1:基本概念
标准模型:
盒模型由:margin、border、padding、width(width= content)
IE模型:
盒模型有:margin、width(width = content + padding + border)
2:css设置这两种模型
box-sizing:content-box; //标准模型(浏览器默认)
box-sizing:border-box; //IE模型
3:js获取盒模型的宽和高
1:dom.style.width/height(只能获取内联样式的宽高)
2:dom.currentStyle.width/height(渲染以后的节点的宽高, 只有IE支持)
3:window.getComputedStyle(dom).width/height(chrom等都支持,IE7、8、9报错)
4:dom.getBoundingClientRect().width/height/left/top
(计算元素的绝对位置。相对于viewport的左上角的绝对位置)
4:BFC(边距重叠解决方案)
概念
BFC即“块级格式化上下文”。它是一个独立的渲染区域,只有block-level box 参与,
它规定了内部的block-level box如何布局,并且与这个区域外包毫不相干
哪些元素会生成BFC
1:根元素
2:float属性不为none
3:position为absolute或fixed
4:display为inline-block、table-cell、table-caption、flex、inline-flex
5:overflow不为visible
注意:
父元素生成BFC后,子元素即使浮动也参与就算