Skip to main content

css

推荐阅读-灵活使用css开发

目录​

1.BFC是什么有什么作用

  • bfc特点：
    • bfc内的元素不会影响外面元素
    • bfc内的浮动元素也会参与高度计算
    • 同一个bfc内的元素垂直方向的margin会出现重叠
    • bfc内的元素按照水平方向依次排列
    • bfc元素不会与float元素重叠
  • 形成bfc：
    • 根元素
    • position为fixed、absolute
    • float不为none
    • overflow不为visible
    • display为inline-block、flex、inlin-flex、table-cell

2.盒模型

  • 特点：
    • 标准盒模型构成：content+padding+border+margin,盒模型宽度：content部分
    • ie盒模型：content+padding+border+margin,盒模型宽度：content+padding+border
  • box-siziing:
    • content-box,设置为标准盒模型
    • border-box，设置为ie盒模型的宽高计算方式

3.link和@import的不同

  • link可以用于加载除css外还可以用于定义rss、定义ref等属性，不存在兼容性问题，
  • import只能用于加载css
  • 当页面被加载时，link引用的css会同时被加载，而import则会等到页面被全部下载完才会加载，会出现闪烁

3.居中布局

  • position: absolute;top:50%;left: 50%;margin回移一半
  • display:flex;justifiy-content: center;align-items: center;
  • position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);

4.选择器优先级

  • important,10000
  • 行内样式,1000
  • id，#选择器,100
  • class，伪类、属性选择器，10
  • 标签选择器、伪元素选择器，
  • 通配符选择器

5.清浮动

  • 伪类清浮动，#box::after{ content:'';display: inline-block;clear:both; }
  • 变更为bfc元素
  • 在末尾添加清浮动元素，并增加clear：both属性

6.层叠上下文

  • 概述：在web页面渲染时，某些元素会受z-index值得影响，这些受z-index影响的元素称职之为层叠上下文

  • 形成层叠上下文的条件：根元素是层叠上下文、position：absolute/fixed、grid、flex

  • 特点：

    • 当容器的z-index为有效数值并生效时，容器内的子元素无法穿过容器否则反之
    • 当父容器的z-index为有效数值并生效时，子元素的层级由父元素决定，这种变化后的容器元素我们称之为层叠上下文
    • 层叠上下文元素可嵌套，层叠上下文子元素均受层叠上下文外层元素影响
    • 每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，可以需要考虑子元素
    • 层叠上下文未指定z-index时，其层叠上下文等级与z-index: 0相同，要普通元素高，指定z-index时按照层叠等级应该是z-index: 0

  • 当处于同一个层叠上下文时按照以下顺序判断：

    • z-index为负、block块状水平盒子、float浮动元素、inline-block水平盒子、z-index: auto、z-index: 0、z-index：为正

7.rem适配方案

  • 通过动态获取屏幕宽度，以375宽度、字体大小50为基准
  • 通过监听resize的变化等比缩放
  • 设计图750为标准，则按照
  • 1rem=根字体px
  • 以750为基准，7.5rem为屏幕宽度，根字体大小=(width/750)*100+'px';

8.flex模型

  • flex中项目的flex属性有什么作用
    • 深入理解flex
    • 分别可以定义为：flex-grow、flex-shrink、flex-base
      • flex-grow：容器存在剩余空间，若单个项目或多个项目为1等分剩余空间、其他项目为1，一个为2，另一个等分空间是其他的两倍。默认为auto不占据剩余空间
      • flex-shrink：默认为1，空间不足缩小。其他项目都为1，单个为0，则表示单个不缩放
        • shrink压缩规则：
          • 所有单个项目*压缩比例宽度相加=压缩总量值
          • 单个项目压缩比例=项目宽度*压缩比例/压缩总量值
          • 项目宽度=项目原width-压缩比例*溢出宽度
      • flex-base：默认为auto表示项目原大小。可以设置为像素值，这个值将在flex-grow前生效,表明项目占据的空间
  • order作用域项目上
    • 值越大排在越后面

9.1px

1px解决方案

10.input遮挡

input遮挡

11.css性能优化

60fps性能优化 css性能优化

  • 部分主要内容内联

  • 通过will-change: transform，或者transform：translateZ、translate3d开启GPU渲染

  • 将复杂动画脱离文档里，或同一个dom节点，减少对兄弟节点，父节点影响

  • 选择器，减少使用通配符，或者选择器过程，在合并成render tree时会造成查找性能问题

  • media，在适当时期加载对应的css

  • 使用transfrom

  • preload降级不必要css加载顺序

  • 减少使用import

  • requestAnimationFrame，在下一次重绘前调用指定函数来重绘

12.实现动画的方式

  • animation
  • transition
  • animationRequestFrame
  • SVG
  • canvas
  • gif