【总结】css常见面试题

searchop
265 阅读8分钟

下面整理下自己觉得比较重要的css相关的面试题，欢迎查看~~

一、flex布局

flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值是0 1 auto

标题默认值含义
flex-grow0定义项目放大比例，默认不放大，即即使存在剩余空间，也不会放大
flex-shink1定义项目缩小比例，默认缩小，即如果空间不足，则将该项目缩小
flex-basisauto定义在分配多余空间之前，项目占据的主轴空间，浏览器根据该属性计算主轴是否有多余空间

flex：1代表什么？

flex: 1 = flex: 1 1 0% 即自动增大缩小

flex:auto = flex: 1 1 auto

flex:0 = flex: 0 1 0%

flex:none = flex: O O auto

二、BFC

BFC是一个独立的布局环境，里面元素的布局不受外面布局的影响，也不会影响外部元素。BFC学习文章。

创建方式

  1. 根元素：body
  2. float：left/right
  3. overflow：hidden、auto、scroll
  4. display: inline-block/table-cell/grid/flex
  5. position: absolute/fixed

解决问题

  1. margin重叠：利用以上特性变为bfc。
  2. 高度塌陷：子元素float，父元素高度为0，通过设置父元素是overflow：hidden。
  3. 自适应两栏布局：左边宽度固定，右边自适应。

设置了以上属性的元素就会触发BFC，BFC特性有：

  1. BFC中上下相邻的两个容器margin会重叠
  2. BFC高度的计算会包括浮动元素的计算
  3. BFC区域不会与浮动容器发生重叠 这个就是利用的这个特性
  4. 容器内部元素不会影响外部元素
  5. 每个元素的左margin和容器的左border相接触

image.png

三、margin重叠

  1. 浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠，重叠只出现在垂直方向。
  2. 如果两个都是负值时，用0减去两个钟绝对值大的那个。

解决办法

  1. 兄弟之间折叠
  • 底部元素变为行内盒子，display：inline-block
  • 底部元素设置浮动：float
  • 底部元素的position值为absulte/fixed
/* 兄弟元素消除margin重叠 */
.div1 {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-bottom: 50px;
    border: 1px solid black;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 100px;
    border: 1px solid black;
    /* 方法1: */
    display: inline-block;
    /* 方法2: 设置浮动 */
    /* float: left; */
    /* 方法3: 设置absolute/fixed，设置该定位不设置top和left时，是默认的位置，但是脱离了文档流 */
    /* position: fixed;
    position: absolute; */
}
  1. 父子之间重叠

表现为父子之间的margin没了。

  • 父元素：overflow：hidden
  • 父元素添加边框：border：1px solid transparent
  • 子元素变为行内盒子：display：inline-block
  • 子元素加入浮动属性或者定位

image.png

<div class="outer">
    <div class="inner">
    </div>
</div>

/* 父子元素margin重叠 */
.outer {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin-top: 100px;
    /* 1. 父元素设置border */
    /* border: 1px solid #000; */
    /* 2. 父元素设置 overflow：hidden */
    /* overflow: hidden; */
    border: 1px solid blue;

}
.inner {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
    /* 子元素设置inline-block或者fleat，或者fixed/absolute，和同级元素处理方法相同 */
    /* display: inline-block; */
    /* float: left; */
    /* position: fixed; */
    /* position: absolute; */
}

image.png

四、css优化和提高性能方法

加载性能

  1. css压缩
  2. css单一样式：例如设置margin-bottom：bottom;margin-left:left执行效率比margin： 0 0 bottom left更高。
  3. 减少@import，使用link，因为@import是等待页面加载完再加载。

选择器性能

css选择器是从右向左进行匹配的。

  1. 如果有id选择器，则无需再增加标签
  2. 尽量少使用后代选择器，降低选择器的权重值。后台选择器开销是最高的，尽量将选择器深度降到最低，最高不超过三层，更多的使用类来关联每一个标签元素。

渲染性能

  1. 慎重使用高性能属性：浮动、定位
  2. 尽量减少页面重排、重绘。
  3. 属性为0时，不加单位
  4. 属性为浮点小数0.xx时，省略小数点之前的0
  5. 带浏览器前缀的在前，标准属性在后。
  6. 优化嵌套，避免层级过深。

五、postcss

用于处理css，类似babel将高版本js转化为低版本js代码，postcss可以编译尚未被浏览器支持的先进的css，借助autoprefixer自动增加浏览器前缀。

webpack的css相关插件

  1. css-loader：导入css
  2. style-loader：创建style标签，把css内容写入标签
  3. less-loader、sass-loader，预处理器定义了一套css之上的超集，如Ts与js的关系。
  4. post-css：增强原生css的能力，没有定义一门新的语言，而是将css解析为ast结构，并传入postcss插件做处理，具体功能都由插件实现，就像babel和js。

顺序：less-loader、postcss、css-loader、style-loader，但插件解析顺序是从右到左的，所以写的时候是先style-loader=>css-loader=>less-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          {
            loader: "css-loader",            
            options: {
              importLoaders: 1
            }
          }, 
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                // 添加 autoprefixer 插件
                plugins: [require("autoprefixer")],
              },
            },
          },
          "less-loader"
        ],
      },
    ],
  }
};

六、如何实现响应式布局

一个页面如何实现同时兼容H5和pc页面的

1. 媒体查询：

选择屏幕分割点，bootstrap的断点方案，移动端优先时使用min-width，pc优先时使用max-width。

image.png

2. 百分比布局

这里面比较迷惑的就是，各种css计算中子元素的百分比到底是相当于谁？

  • width、height的百分比是相对于父元素的width、height
  • top、bottom百分比相对于非static定位的父元素的高度
  • left、right百分比相对于非static父元素的宽度
  • padding、margin：无论垂直还是水平都是相等于父元素的width
  • border-radius、translate、background-size百分比都是相对于自身的宽度。

3. rem布局

屏幕分成100份，font-size根据屏幕大小动态的设置成clientWidth/100，元素的大小就是 元素PX/视觉稿宽度 * 100，pc的话会有一个最大值限制。需要重新设置font-size

假如是750的视觉稿，2倍的视觉稿，则html的font-size=750/100 = 7.5px，1rem = 7.5px 那200px的宽度，px的rem转换就是px直接除以1rem，而因为是二倍搞，所以需要200 / 2 / 7.5就是对应的rem值。

使用Flexible实现手淘H5页面的终端适配

4. vh、vw

  • vh：1vh是屏幕高度的1%，视窗高度是100vh
  • vw是视口宽度的1%，即视窗宽度是100vw

按照上面的定义，上面rem设置为clientWidth的1/100，那就是vw呢，所以可以直接将html根节点的font-size设置为1vw，其他元素宽度还是用rem。例如以下种效果等价。

/* rem方案 */
html {fons-size: width / 100}
p {width: 15.625rem}

/* vw方案 */
p {width: 15.625vw}

但是用rem时font-size不能用rem，应该用px，再加上媒体响应来适配不同的屏幕大小。

html {fons-size: width / 100}
body {font-size: 16px}
@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}

Rem布局的原理解析

5. flex、grid布局

前端响应式布局原理与方案（详细版）

响应式布局.png

七、css盒模型

内敛元素的width、height生效吗？设置margin和padding呢？

  • 块级元素可以设置width，height，margin和padding属性.
  • 行内元素设置宽高无效，但是水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

八、css层级

css层叠上下文概念、图层？

  1. 如何形成层叠上下文

    • 文档根元素
    • position属性的值不为static且z-index值不为auto
    • opacity属性值小于1
    • flex/grid布局且z-index不为auto
    • will-change值设定任意属性，且值为非初始化值
    • transform不为none
    • filter不为none

  2. zindex判断

    • 如果处于同一层级，按照css层叠顺序来
    • 如果处于不同的层叠上下文，则按照顶层元素的z-index判断。

  3. 层叠上下文和图层不是一个概念 层叠上下文 渲染图层 复合图层（硬件加速）区别与联系，某些特殊的渲染层会被提升为复合成层（Compositing Layers），复合图层拥有单独的 GraphicsLayer，而其他不是复合图层的渲染层，则跟随第一个拥有 GraphicsLayer 的父层。

  4. 如何开启复合图层

    • 3d转换 translate3d、translateZ
    • video、canvas、iframe
    • will-change
    • filter
    • 等等
avatar
文章
阅读
粉丝