标准模型和IE模型
- 通过[box-sizing]设置
- 标准模型[content-box]的宽和高只计算content部分
- ie模型[border-box]的宽高包括padding和border
获取盒模型宽高
dom.style.width/height // 只能获取内联样式
dom.currentStyle.width/height // 只支持ie
window,getComputedStyle(dom).width/height // 兼容性最好
dom.getBoudingClientRect().width/height
getBoudingClientRect()拿到的是相对于视窗的绝对位置top,left和宽高
边距重叠
两个或多个块级盒子的!!垂直!!相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。 特别注意内容为空的盒子。
BFC/Block Formatting Context 块级格式化上下文
- 解决了margin重叠问题
- 清除浮动（高度不同的非浮动元素溢出到浮动元素的下方）
- 盒子内的布局不会影响到盒子外
- 方法：（谁坍塌了给谁的父元素加，就是将它父元变为BFC盒子）
1.给父元素设置overflow***不为visble***==>hidden,auto，scroll都行 2.设置float值不为none 3.display = inline-block,flex,inline-flex 4.display = table-cell，table-caption 5.设置position***不为默认static***==>absolute,fixed都行
mdn安利了display: flow-root，准备试试
[MDN] developer.mozilla.org/zh-CN/docs/… "块格式化上下文"
