CSS盒模型、BFC、IFC

CSS盒模型、BFC、IFC

1.块元素有哪些属性可以继承？

text-indent、text-align、visibility、cursor

2.盒模型

CSS盒模型本质上是一个盒子，包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

CSS盒模型：标准盒模型 + IE盒模型

  • W3C盒模型（标准盒模型）和IE盒模型（怪异盒模型）两者的区别？

    • 计算宽度和高度的不同
      • 标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin（简单说，它的width/hegiht只是内容高度，不包含padding和border的值）
      • IE盒模型：盒子总宽高/高度 = width/hegiht + margin = （内容区宽度/高度 + padding + border）+margin（即width/hegiht包含了padding和border值）

  • CSS如何设置这两种盒模型？

    • box-sizing：content-box（浏览器默认设置标准盒模型）
    • box-sizing：border-box

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

    • dom.style.width/height只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到
    • dom.currentStyle.width/height（只有IE兼容）取到的是最终渲染后的宽和高
    • window.getComputedStyle(dom).width/height同上，但是多浏览器支持，IE9 以上支持。
    • dom.getBoundingClientRect().width/height也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离
    • dom.offsetWidth/offsetHeight包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好

  • BFC 块级格式化上下文（边距重叠解决方案）

    • 概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。
    • BFC原理（渲染规则|布局规则）：
      • 内部的box会在垂直方向，从顶部开始一个接着一个地放置；
      • box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
      • 每个元素的margin box的左边，与包含块borderbox的左边相接触，即使存在浮动也是如此；
      • BFC在页面上是一个隔离的独立容器，外面的元素不会影响到里面的元素，反之亦然。文字环绕效果，设置float；
      • BFC的区域不会与float box重叠（清除浮动）
      • 计算BFC的高度时，浮动元素也参与计算
    • CSS在什么情况下会创建出BFC
      • 根元素，即HTML元素（最大的一个BFC）
      • 浮动（float的值不为none）
      • 绝对定位元素（absolute或者fixed）
      • 行内块（display：inline-block）
      • 表格单元（display为table、table-cell、table-caption等HTML表格相关的属性）
      • 弹性盒子（display为flex或inline-flex）
      • 默认值。内容不会被修剪，会呈现在元素框之外（overflow不为visible）
    • BFC的使用场景
      • 自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
      • 避免元素被浮动元素覆盖
      • 可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使得下面的子div都处在父div的同一个BFC区域之内）
      • 去除边距重叠现象，分属于不同的BFC时，可以阻止margin重叠

  • IFC（行内格式化上下文）

    • 内部的Box会在水平方向，从含块的顶部开始一个接着一个地放置
    • 这些Box之间的水平方向的margin，border和padding都有效
    • Box垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认， 文本与图片对其），例：line-heigth与vertical-align

关于BFC的理解

每一个BFC区域，只包括其子元素，不包括其子元素的子元素

<div class='box1'>
  <div class='box2'></div>
  <div class='box3'>
    <div class='box4'></div>
  </div>
</div>

比如上面代码，假如box1和box3是BFC区域，那么box1只包含box2和box3，box3只包含box4

每一个BFC区域都是独立隔绝的，互不影响

那么如何将一个元素变成BFC区域呢？参考上上文的CSS在什么情况下会创建出BFC。

我们利用BFC独立隔绝，互不影响的特点，可以解决很多布局的问题。

例如：

  • 解决外边距的垂直塌陷问题
    • 给父盒子设置成BFC区域，比如说加上overflow:hidden，就可以解决
  • 解决包含塌陷问题
    • 有时候我们给子元素加margin可能会带着父元素一起跑，这就是包含塌陷
    • 只需要将父元素变为BFC区域，就能得到解决
  • 清除浮动
    • 浮动会导致父元素高度塌陷，清除浮动中有一句代码叫做overflow：hidden，目的就是为了将元素变成BFC区域。
  • 阻止标准流元素被浮动元素覆盖
    • 浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素们不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。
    • 只需要让被覆盖的元素触发BFC，就可以做到不受浮动元素影响

关于IFC的理解

IFC的形成条件：块级元素中仅包含内联级别元素

IFC的特性：

  • 1.子元素水平方向横向排列，并且垂直方向起点为元素顶部
  • 2.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】
  • 3.在垂直方向上，子元素会以不同形式来对齐（vertical-align）
  • 4.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
  • 5.IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列
  • 6.IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同
  • 7.当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定
  • 8.当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
posted @ 2022-08-03 09:23  笔下洛璃  阅读(97)  评论(0)  编辑  收藏  举报