CSS相关面试问题

2023-12-28 14:33:52

什么是BFC
- 原文https://blog.csdn.net/blueberry_liang/article/details/90030814
- 释义
  - BFC—— Box、Formatting Context
  - box：盒子模型
  - Formatting Context：渲染文档的容器，css根据它来进行渲染
- 哪些元素会生成BFC:
  - 根元素
  - float属性不为none
  - position为absolute或fixed
  - display为inline-block, table-cell, table-caption, flex, inline-flex
  - overflow不为visible
- BFC作用
  - 防止垂直 margin 重叠
  - 避免浮动元素和其他元素重叠
  - 清除内部浮动
CSS的重绘与回流
- 原文https://www.cnblogs.com/mdr86553/p/12048742.html
- 什么是重绘
  - 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制
- 什么是回流
  - 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
- 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
- 减少重绘（Repaint）和回流（reflow）
  - 为什么？
    - 由于重绘和回流均会增加页面的负载，因此需要减少这类情况发生
  - 怎么做？
    - 少用style，多用class将相同属性封装到一个class中。
    - 不要把属性值放在一个循环里当成循环里的变量。
    - 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
    - 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
    - 不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）
    - 用translate替代top改变
    - 用opacity替代visibility（在独立图层下优化重绘）
盒子模型
- 由margin、border、padding、content组成，其中padding与content作为元素的宽度和高度
- box-sizing属性
  - content-box：此时元素的宽度和高度仅由content组成
  - border-box：此时元素的宽度和高度由border、padding、content组成
  - inherit：属性继承上一级元素
一些细节功能
- 上下左右居中。原文：https://www.cnblogs.com/xiaoxueer/p/11849997.html
  - flex布局
    - 父元素
      - display: flex;
      - align-items: center;
      - justify-content: center;
    - 子元素
      - 无
  - absolute绝对定位
    - 父元素：
      - position: relative;
    - 子元素
      - position: absolute;
      - top:50%;
      - left:50%;
      - transform:translate(-50%, -50%);
  - 设置after属性
    - 父元素
      - text-align: center;
    - 父元素:after
      - content: '';
      - display: inline-block;
      - height: 100%;
      - vertical-align: middle;
    - 子元素
      - display: inline-block;
      - vertical-align: middle;

码农公寓

相关文章