学习前端面试知识（5）

   2024-8-1  打卡第五天  学习视频链接

清除浮动的方法

• 先解释一下增加浮动可能会导致的一个高度塌陷的问题：按照下面的两张图来看，没增加浮动前两个容器可以被包含在父容器之中，给子容器增加了浮动之后父容器的高度就出问题了。

• 清除浮动就是为了避免这样一个高度塌陷的问题。有几个解决方法
  • 在父组件中添加overflow:hidden。BFC 是一个独立的渲染区域，它内部元素的布局不会影响到外部的元素。在 BFC 中，浮动元素也会参与计算，这意味着即使子元素浮动，父元素（BFC容器）也能正确地计算其高度。具体到 overflow: hidden，当它被应用到一个元素上时，这个元素就会成为一个BFC容器。在这个容器内部，浮动元素会被包含在内，父元素的高度会考虑到浮动元素的高度，从而避免了高度塌陷的问题
  •   

  • 
        
    这是第一个盒子
        
    这是第二个盒子
    
    
    

  • 给父组件设置指定的高度。

  • 

  • 
        
    这是第一个盒子
        
    这是第二个盒子
    
    
    

  • ::after伪元素，display:flex和clear:both搭配使用。使用文心一言分析的时候说在使用display:flex后clear不一定要使用，但是实际操作发现不加上clear属性的话没有效果，display符合BFC就行，主要是加上clear属性，clear: both; 属性用于控制元素的哪一侧不允许有浮动元素。both 这个值具体指的是元素的左侧和右侧都不允许有浮动元素。

  • 

  • 
        
    这是第一个盒子
        
    这是第二个盒子
    
    
    

CSS3新增元素

• 选择器
• 盒子模型 border-radius box-shadow border-image
• 背景 bakcground-size background-origin background-clip
• 文本效果 text-shadow word-wrap
• 渐变 线性渐变 径向渐变
• 字体 @font-face
• 2d/3d transform transform-origin
• 过渡与动画 transition @keyframes animation
• 媒体查询
• 多列布局

z-index属性什么时候会失效

• z-index值越大越在上层 position relative absolute fixed 设置为这几个属性的时候z-index有效
• 失效：
  • 父元素为relative，子元素就会失效。解决方法，将父元素改为absolute或者static
  • position 非static.
  • 设置z-index的前提下同时设置了float。解决方法：去除flock，给为display:inline-block

css加载是否会造成阻塞

• css不会阻塞dom树解析，但会阻塞dom树渲染，同时还会阻塞后面js语句的执行
• 提高加载速度：
  • 使用cdn 会根据网络情况挑选最近的具有网络缓存的节点，减少加载时间。
  • 对css进行压缩 比如webpack等工具都能进行压缩 gzip
  • 合理使用缓存，cache-control expires e-tag 。需要注意文件更新时带来的影响，在文件后更新值，避免缓存带来的影响（不太理解，先记录下）
  • 减少http请求数 将多个css合并，或者写成内联样式（缺点，不能缓存）

简单描述浏览器渲染的流程

• 解析html，生成dom树，解析css文件，生成cssdom树（并行过程）
• 将dom树和cssdom树进行结合生成render树
• 根据render树进行渲染绘制，将像素渲染到屏幕上
• dom和css解析是并行的，所以css加载阻塞不会影响html解析，但是因为render树需要等两个结束后执行，所以会影响渲染，同时因为js可能会修改css中的样式，所以也会等css加载后才执行，这也就导致可能会阻塞到js语句的执行

postcss（没接触过，记录一下）

• css babel 可以使用比较新的css语法
• 使用js插件转变样式的工具 提供解析器 解析成抽象语法树AST
• 常用插件
  • autoprefixer 检查css代码，自动添加不同浏览器前缀，实现兼容性
  • precss
  • postcss-cssnext

css modules

• 避免css相互覆盖，加入了局部作用域和模块依赖
• 实现原理：
  • css的规则是全局的，任何一个样式的规则对整个页面有效
  • 使用独一无二的cssname，每个类名编辑成独一无二的哈希值