CSS盒模型

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

image.png
image.png

标准模型和IE模型区别

• 宽高的计算不同
• 标准模型 content = width
• IE模型 content + padding + border = width

CSS如何设置这两种模型

在CSS3中
设置为标准模型：box-sizing: content-box（浏览器默认方式）
设置为IE模型 ：box-sizing: border-box

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

• dom.style.width/height （只能获取内联样式）
• dom.currentStyle.width/height（获取渲染完成后的样式，只有IE支持）
• window.getComputedStyle(dom).width/height（兼容Firefox、Chrome）
• dom.getBoundingClienRect().width/height

实例题（根据盒模型解释边距重叠）

边距重叠：取最大值

BFC（边距重叠解决方案）

• BFC的基本概念：块级格式化上下文
• BFC原理：
  1. BFC 垂直方向下 外边距会发生重叠
  2. BFC 区域不会与浮动的元素的重叠（清除浮动）
  3. BFC 是一个独立的元素，里面的元素不会影响外面的元素
  4. 计算 BFC 高度的时候，浮动元素也会常与计算
     相关资料：https://zhuanlan.zhihu.com/p/25321647
• 如何创建 BFC
  1. float 值不为 none（即设置浮动）
  2. position不为static和relative
  3. display为inline-block, table-cell, table-caption, flex, inline-flex
  4. overflow不为visible
     相关资料：https://blog.csdn.net/qq_43004614/article/details/90691509
• BFC的使用场景
  1. BFC垂直方向边距重叠
  2. BFC不与float重叠
  3. BFC子元素即使是float也会常与高度计算，可用于清除浮动