盒模型复习

标准模型和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/… "块格式化上下文"