CSS面试总结

2022/6/27 6:20:55

编程Tag： css 元素面试 width height 总结 background color margin

本文主要是介绍CSS面试总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章首次发表：_时雨_CSDN

1. BFC:块级格式化上下文（重点关注）

BFC基本概念:BFC是 CSS布局的一个概念，是一块独立的渲染区域(环境)，里面的元素不会影响到外部的元素。

BFC原理(渲染规则、布局规则):
(1)内部的 Box会在垂直方向，从顶部开始一个接着一个地放置;
(2)Box垂直方向的距离由 marain决定，属于同一个 BFC 的两个相邻 Box的margin 会发生重叠;
(3)每个元素的margin Box的左边，与包含块 border Box的左边相接触，(对于从左到右的格式化，否则相反)。即使存在浮动也是如此;
eg:左浮是子div的左边接触父div的borderbox的左边，右浮是子div接触父div的borderbox右边
(4)BFC在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。
BFC布局规则：
(5)BFC的区域不会与float Box重叠(即清浮动)
(6) 计算BFC的高度时，浮动元素也参与计算。

BFC触发条件(即脱离文档流)

根元素，即HTML元素(最大的一个 BFC)
浮动(float 的值不为none)
定位(position的值为absolute或fixed)
表格单元(display为table、table-cell、table-caption、inline-block等 HTML表格相关的属性 )
弹性盒(display为flex或inline-flex)
overflow不为visible

BFC作用（应用场景）
1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2、避免元素被浮动元素覆盖
3、让父元素的高度包含子浮动元素，清除内部浮动(原理:触发父 div的BFC属性，使下面的子 div都处在父 div的同一个BFC区域之内)
4、使用不同的BFC防止margin重叠

2. CSS盒子模型

CSS的盒子模型：标准盒子模型、IE盒子模型(怪异盒模型)
区别：
标准盒子模型宽高 = content + border + padding + margin
IE盒子模型宽高 =margin+content（content包含 border + padding ）
即标准盒子模型增大padding 、 border 就会撑大盒子，但IE盒模型则不会撑大，而是通常减小content
默认为标准盒子模型
CSS盒子模型的转换：
box-sizing: content-box; /*标准盒子模型*/
box-sizing: border-box; /*IE盒子模型*/

 <style>
      .box2 {
        margin-bottom: 10px;
        width: 100px;
        border: 20px solid black;
        height: 100px;
        background-color: red;
      }

      .box3 {
        box-sizing: border-box;
        margin-top: 10px;
        width: 100px;
          border: 20px solid black;
        height: 100px;
        background-color: blue;
      }
    </style>
    <div class="box2"></div>
    <div class="box3"></div>

3. 清除浮动

给父元素单独定义高度
优点简单，代码少；缺点无法进行响应式布局
给浮动元素的容器加overflow：hidden
优点简单，兼容性较高；缺点：超出部分被隐藏
在浮动元素后面加一个带clear：both属性的空标签
优点：简单代码少，兼容性较高；缺点：增加无语义的空标签，不利于页面优化和后期维护
：after伪元素方法（最推荐）一定要有的属性content display clear
优点：写法固定，兼容性高；缺点：代码多

<style>
    .box {
      border: 1px solid black;
      padding: 5px;
      width: 450px;
      /* overflow: hidden; 
    法二：父元素加overflow: hidden; 
     */
    }
    /* 法三：伪元素（推荐） */
    .box:after {
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    .left {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .right {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }

    /* .clean{
        clear: both;
       } */
  </style>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 法一：加一个标签 -->
      <!-- <div class="clean"></div> -->
    </div>
  </body>

4. 隐藏元素的方法及各自的特点

- rgba(0,0,0,0)  /*占据空间，可以响应点击事件 */
- opacity:0     /* 占据空间，可以响应点击事件 ，子元素会继承吗，在读屏软件中无法隐藏*/
- overflow：hidden   /*用来隐藏元素溢出部分，占据空间，无法响应点击事件*/
- visibility:hidden    /* 占据空间，无法点击 ：与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏*/
- transform: scale(0,0)    /* 占据空间，无法点击 */
- display：none  /*不占据空间，无法点击*/	 
- z-index:-1000 /* 不占据空间，无法点击 */
-   position：absolute;
left:-99999px;
top:-90999px;  /* 不占据空间，无法点击 */

5. line-height和heigh区别

line-height：每一行文字的高，如果文字换行则整个盒子高度会增大（高度=行数*行高）。
height：定值，即这个盒子的高度。

6. 用CSS画三角形

按要求画某一朝向的三角形，其他三个边框设为透明

<style>
    div{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom:50px solid red;
    }
    .all{
        margin-top: 20px;
         width: 0;
        height: 0;
        border: 50px solid transparent;
        border-color: blue green purple black;
    }
</style>
<div></div>
<div class="all"></div>

在这里插入图片描述

7.圣杯布局（三栏布局方式两边固定中间自适应，与双飞翼布局解决的问题一致）

eg: 两边100px，中间自适应

  <body>
    <div class="left"></div>
     <div class="middle"></div>
    <div class="right"></div>   
  </body>

使用flex布局：左右固定宽中间 flex：1

 /* 法一：flex布局 */
body{
    display: flex;
}
.left{
width: 100px;
height: 500px;
background-color: aquamarine;
}
.middle{
flex:1;
/* 占据剩余空间 */
background-color: lightsalmon
}
.right{
width: 100px;
height: 500px;
background-color: red;
}

绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离

    <style>
    body {
      position: relative;
      margin: 0;
    }
    .left {
      position: absolute;
      width: 100px;
      height: 500px;
      background-color: aquamarine;
      left: 0;
      top: 0;
    }
    .right {
      width: 100px;
      height: 500px;
      position: absolute;
      background-color: red;
      right: 0;
      top: 0;
    }
    .middle {
      height: 500px;
      margin-left: 100px;
      margin-right: 100px;
      background-color: lightsalmon;
    }
  </style>

自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后

  .left {
     float: left;
      width: 100px;
      height: 500px;
      background-color: aquamarine;
    }
    .right {
      width: 100px;
      height: 500px;
     float: right;
      background-color: red;
    }
    .middle {
      height: 500px;
      background-color: lightsalmon;
    } 
  <body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">25484868</div>
  </body>

margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏被宽度为 100%的浮动元素包起来

8. 画一根0.5px的线

采用meta viewport的方式（viewport只针对移动端，只在移动端上才能看到效果）
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>

-采用transform: scale()的方式

<style>
    div{
        margin: 50px;
        width: 150px;
        height: 1px;
        background-color: aqua;
        transform: scaleY(0.5);
    }
</style>
<body>
    <div></div>
</body>

9.水平垂直居中问题

固定宽高

水平居中

法一： margin: auto;

  div {
        width: 500px;
        height: 200px;
        background-color: blue;
        /* 法一 ： margin: auto;*/
         margin: auto;
      }
    </style>

    <div></div>

父元素text-align: center;子元素display: inline-block;

 <style>
        body{
            text-align: center;
        }
        div{
             width: 500px;
            height: 200px;
            background-color: blue; 
            display: inline-block;
        }
    </style>

    <div></div>

Flex布局

    body{
          display: flex;
        justify-content: center;
    }
    div{
         width: 500px;
        height: 200px;
        background-color: blue; 
    }
</style>
<div></div>

垂直居中

已知父元素高度，子元素相对定位并 transform:translateY(-50%);
弹性盒布局，父元素 display：flex，子元素 align-self：center
使用 line-height改变行高，设置子元素和父元素行高一样使内联元素居中，需要已知父元素的高度

水平垂直居中

绝对定位+margin

  div{
            width: 500px;
            height: 200px;
            background-color: blue; 
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -250px;
        }
    </style>
        <div></div>

绝对定位，设置四个方向值为0后margin设为auto

 div{
            width: 500px;
            height: 200px;
            background-color: blue; 
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
             margin: auto;
        } 
    </style>
        <div></div>

不固定宽高

水平垂直居中

子元素相对父元素绝对定位后子元素top,left值为50%，再 transform: translate(-50%,-50%);
父元素设置弹性盒子

display: flex;
justify-content: center;
align-items: center;

table-cell

  .parent {
    width: 200px;
    height: 150px;
    background-color: blue;
    display: table-cell;
    /* 不是行内元素无效 */
    text-align: center;
    vertical-align: middle;
  }
  .son {
    /* 转换为行内块元素防止css失效 */
    display: inline-block;
  }

10. 骰子布局

11. overflow 的原理

当元素设置了 overflow 样式且不为visible 时，该元素就构建了一个BFC。BFC 在计算高度时内部浮动元素的高度也会计算在内，故BFC 的高度不会发生坍塌，所以达到了清除浮动的目的。

12. display: none与visibility: hidden的区别

占用位置的区别
display: none不占用位置
visibility: hidden占用位置
重绘和回流的问题
visibility: hidden;、 display: none; 均产生重绘
display: none 还会产生一次回流

PS: 产生回流一定会造成重绘，但是重绘不一定会造成回流。

13. 重绘与回流

回流（重构/重排/reflow）：

定义

当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。（重排开销大）

触发条件

1.一个DOM 元素的几何属性发生变化，常见的几何属性有width、height、padding、margin、left top、 border 等

2.可见的DOM 节点添加、删除、更新

3.读写 offset 族、 scroll 族和 client 族属性时（需要通过即时计算得到）

4.字体大小改变

5.display：none

重绘

定义：
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，从而省去布局的过程，跳过了生成布局树和建图层树的阶段。
触发：
颜色的修改、阴影的修改等外观样式的改变

减少重绘与回流

最小化重绘和重排，如样式集中改变，使用添加新样式类名.class 而不是用大量的style修改
批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量再去使用，而不是频繁使用这个计算属性;或利用 document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际 DOM 中
使用 absolute 或 fixed 使元素脱离文档流，再对其进行复杂动画效果的绘制
尽量避免使用table布局
开启 GPU 加速，利用 css 属性 transform、will-change 等，如改变元素位置时使用translate 比使用绝对定位改变高效，因为它不会触发重排或重绘

14. 单双冒号区别

单冒号:用于表示伪类，操作文档已有的元素，伪类一般匹配的是元素的一些特殊状态，如 hover、link等
双冒号:用于表示伪元素，会创建文档树之外的元素，伪元素一般匹配的是特殊位置，如after、before等，侧重于表达或定义不在语法定义范围内的抽象元素

15. 元素空隙原因及解决方法

原因代码中添加了空白符(空格、tab(制表符)、回车换行等)等字符引起的:
元素被当成行内元素排版的时候，元素之间的空白符(空格、tab(制表符)、回车换行等)都会被浏览器处理，根据white-space的处理方式(默认是normal，合并多余空白)，原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

解决方案：

在HTML中的标签之间不留空格，但代码可读性会变差
父元素 font-size:0，子元素再单独设置字体样式
margin 负值
设置父元素的letter-spacing属性
word-spacing 词间距
float: left

16. Css3新特性

Box-shadow
Box-radius
css3选择器 last-child、nth-child
渐变
弹性盒flex
过渡、动画、2D/3D转换

17.Scoped原理

原理：
1.给HTML的DOM节点加一个不重复data属性(形如:data-v-2333a)来表示他的唯一性。
2.在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如[data-v-
2333a])来私有化样式。

优点: 实现组件的私有化，不对全局造成样式污染
缺点：父组件无法设置子组件样式
解决：使用两个style，一个用于私有样式，一个用于公共样式。

18.CSS 动画比JavaScript 动画高效的原因

通常渲染引擎生成一帧图像有三种方式：重排、重绘和合成。其中重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。
js的动画执行在主线程容易引发阻塞和等待；css的动画执行在合成线程，速度快且不阻塞主线程。

参考资料

关于CSS-BFC深入理解

这篇关于CSS面试总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS面试总结

1. BFC:块级格式化上下文（重点关注）

2. CSS盒子模型

3. 清除浮动

4. 隐藏元素的方法及各自的特点

5. line-height和heigh区别

6. 用CSS画三角形

7.圣杯布局（三栏布局方式两边固定中间自适应，与双飞翼布局解决的问题一致）

8. 画一根0.5px的线

9.水平 垂直居中问题

固定宽高

水平居中

垂直居中

水平垂直居中

不固定宽高

水平垂直居中

10. 骰子布局

11. overflow 的原理

12. display: none与visibility: hidden的区别

13. 重绘与回流

回流（重构/重排/reflow）：

定义

触发条件

重绘

减少重绘与回流

14. 单双冒号区别

15. 元素空隙原因及解决方法

16. Css3新特性

17.Scoped原理

18.CSS 动画比JavaScript 动画高效的原因

参考资料

相关编程文章

9.水平垂直居中问题