刷题-css

1. bfc的触发场景是什么？bfc的应用场景是什么

   bfc（block formatting context）块状级上下文，触发的条件都有：

   position为fixed或者absolute

   overflow 不为visible

   float不为none

   display为inline-block table-cell 等

   根元素

   bfc的特征：

   bfc盒子在垂直方向一个一个的排列

   bfc的上下盒子会发生margin重叠

   bfc的盒子内部不影响文档的其他元素 高度计算包含浮动元素

   bfc的盒子不会跟外部的float元素发生重叠

   bfc的应用场景：

   清除浮动 两栏布局

2. 怎么实现一个宽高自适应的正方形

    .square {
        width: 10%;
        height: 10vw;
     }
     
     
     // padding的百分比计算根据页面宽度
     .square {
        width: 10%;
        height: 0;
        padding-top: 10%;
     }
     
     // padding的百分比计算根据自身宽度
     .square {
        width: 10%;
        overflow: hidden;
     }
     
     .square::after {
         content: '',
         margin-top: 100%
      }
         
     

3. z-index在什么情况下会失效

   z-index的元素的position的值需要是absolute relative fixed

   父元素的position的值为relative

   子元素的值是static

   子元素设置了浮动

4. 说一下对css工程化的理解

   css工程化是为了解决以下问题：

   宏观设计：css代码如何组织，如何拆分，模块结构怎样设计

   编码优化：如何写出更好的css

   构建： 如何处理css，才能让我的css代码打包结果更优

   可维护：如何最小化以后它后续的变更成本最小

   css工程化的实践：

   预处理器： less scss

   webpack loader

   工程化的插件 postCss

   衍生问题： 为什么使用预处理器 因为从目录结构、可维护性、编码优化上，预处理器都要更加优秀

   postCss是做什么的？ 相当于把更先进的css转化成部分浏览器低版本不支持的特性

   webpack可以处理css吗？ webpack本身是不可以的，但是可以在loader的作用下处理css，两个关键的 loader一个是css-loader，一个是style-loader，且css-loader一定要在style-loader之前，因为只有 完成了编译，才能对css代码进行插入

5. 怎么实现文本的单行多行隐藏

    .hidden {
    
        text-overflow: eclipsis;
        white-space: nowrap;
        overflow: hidden;
        }
        
   .hidden {
       text-overflow: eclipsis;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       }
    

6. 为什么有时候是用translate改变定位，而不是使用position

   因为translate是css属性 发生修改并不会触发重绘，而position的绝对定位 fixed等则会改变文档流，触发重绘

7.transition跟animation的区别

transition是过度属性，强调的是过度，它的实现需要一个触发事件（鼠标移动，获取焦点，点击）才执行

animation是动画属性，它的实现不需要触发事件，只要设置好时间就可以自动执行，且可以循环，用@keyframe定义

8. scope css的原理 vue中的scoped属性的效果主要通过PostCSS转译实现

9. position的定位是相对于谁的定位

   css定位指定于最近的非static定位元素的位置