2022前端面经--CSS

Echo$

已于 2022-09-18 23:15:47 修改

阅读量194

点赞数

分类专栏：面经文章标签： css 前端 html

于 2022-09-18 21:16:21 首次发布

本文链接：https://blog.csdn.net/pretend88/article/details/126923293

版权

面经专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.css垂直居中

1.flex布局
 			display: flex;
            /*设置为flex布局，设置display属性的值为flex将其定义为弹性容器*/
            justify-content: center;
            /*水平居中
            定义了项目在主轴上的对齐方式，水平对齐居中*/
            align-items: center;
            /*垂直居中
            定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中*/


2.绝对布局，设置margin:auto;并设置top、left、right、bottom的值
    .main {
            text-align: center;//div内部文字居中
            background-color: rgb(138, 46, 46);
            width: 300px;
            height: 300px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        } 
        
3.绝对布局：让left和top都是50%，再用transform向左（上）平移它自己宽度（高度）的50%
        .main {
            text-align: center;
            background-color: rgb(176, 14, 14);
            width: 400px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            
        }
        
4.使用grid布局

    .container {
      display: grid;
      width: 500px;
      height: 500px;
      background-color: orange;
      margin: 0 auto;
    }
    .content {
      width: 100px;
      height: 100px;
      background-color: red;
      align-self: center; /*设置单元格内容的垂直位置*/
    justify-self: center; /*设置单元格内容的水平位置*/
    }

//都可以
.div6 {
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-items: center;
  /* align-content: center;
  justify-content: center; */
}


5、使用table-cell，需要注意的是content块需要给予inline-block

    .container {
      display: table-cell;
      /* 垂直居中 */
      vertical-align: middle;
      /* 水平居中 */
      text-align: center;
      width: 500px;
      height: 500px;
      background-color: orange;
    }
    .content {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
    }


//js实现
    <script>
        let HTML=document.documentElement,
            winW=HTML.clientWidth,
            winH=HTML.clientHeight,
            boxW=box.offsetWidth,
            boxH=box.offsetHeight;
        box.style.position="absolute";
        box.style.left=(winW-boxW)/2+'px';
        box.style.top=(winH-boxH)/2+'px';
    </script>

2.css优先级

从高到低依次是：

important！>行内样式（1000）>id选择器(100)>类选择器，属性选择器，伪类选择器(10)>标签选择器和伪元素选择器(1)>通配符、子选择器和相邻选择器


//!important表示强制应用样式，优先级最高

3.掌握几大经典布局方案

圣杯布局

双飞翼布局

==》左定，右定，中间自适应

圣杯布局：浮动和负margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            height: 100%;
            padding: 0 200px;
        }
        .left,.right{
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }
        .center{
            width: 100%;
            min-height: 400px;
            background: lightsalmon;
        }
        .left,.center,.right{
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-right: -200px;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

双飞翼布局：浮动和负margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container,.left,.right{
            float: left;
        }
        .container{
            width: 100%;
        }
        .center{
            margin: 0 200px;
            min-height: 400px;
            background: lightsalmon;
        }        
        .left,.right{
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

使用CALC

但是用表达式，在渲染时会导致性能问题，也有一定兼容性问题

.center{
   /*兼容到IE9*/
   width: calc(100%-400px);
   min-height: 400px;
   background: lightsalmon;
}

使用flex

flex: 0 0 200px; 第一个值表示放大，第二个值表示缩小，第三个值表示所占width

flex: 1; 既不放大也不缩小自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            overflow: hidden;
        }
        .container{
            display: flex;
            justify-content: space-between;
            height: 100%;
        }
        .left,.right{
            flex: 0 0 200px;
            height: 200px;
            background: lightblue;
        }
        .center{
            flex: 1;
            min-height: 400px;
            background: lightsalmon;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

定位方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            position: relative;
            height: 100%;
        }
        .left,.right{
            position: absolute;
            top:0;
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin: 0 200px;
            min-height: 400px;
            background: lightsalmon;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

4.display

inline（行内元素）:
1. 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2. 不能更改元素的height，width的值，大小由内容撑开.
3. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
1. 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。

		.block{
            height: 200px;
             width: 300px; 
            background: red;
        }
        .inline{
           
            display: inline;
            background: green;
        }
        .inline-block{
            display: inline-block;
            width: 700px;
            height: 100px;
            background: blue;
        }
        
    <div class="block">block</div>
    <div class="inline">inline55555555555555555555</div>
    <div class="inline-block">inline-block</div>

5.px、em、rem区别

px: 固定的像素值，一旦设置就无法自适应页面，随着页面的大小而改变

em: 相对父元素来设置字体大小

rem: 相对根元素来设置大小，em和rem都能够实现自适应

6.自适应布局的实现方式

rem+媒体查询
rem+lib-flexible
vw实现

响应式布局：

百分比布局
使用媒体查询
rem（计算初始大小（媒体查询））
vw

7.Less和Sass

CSS预处理， Less和Sass

8.CSS引入方式

行内样式

<div style='width: 200px; height:300px;'>

内部样式表

<style>
...
</style>

外部样式表

<link rel=‘stylesheet’ href=‘css文件路径’>

9.position属性值以及区别

1. position: static;
2. position: inherit;
3. position: relative;
4. position: absolute;
5. position: fixed;
6. position: sticky;（新的属性值）

1.position: static 默认值，没有定位
2.position: inherit 继承父元素的position值
3.position: relative 相对定位，相对于自己的初始位置，不脱离文档流。也就是说元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
4.position: absolute 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
5.position: fixed fixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性
6.position: sticky sticky很像relative和fixed的结合，元素偏移在达到特定阈值前为相对定位，达到阈值之后为固定定位

10.如何触发硬件加速

CSS中常见的硬件加速的css属性

transform
opacity
filters
will-change

will-change 会告知浏览器该元素会有哪些变化，这样浏览器就可以在元素属性真正发生变化之前做好应对的准备工作

11.盒模型有哪些，区别

标准盒模型、怪异盒模型（IE盒模型）和flex弹性伸缩盒模型以及多列布局

标准盒模型（box-sizing content-box）

IE盒模型（box-sizing border-box）

content = width+padding+border

附完美回答方式：

标准盒子模型，即box-sizing content-box，我们所写的width和height并不是最终盒子的宽高，而是content的，盒子的宽高由我们的content+padding+border来组成的，但是这样在做项目时可能会遇到小问题，假如我想构建一个100x100的盒子大小，但是我发现我写的是width和height是100，于是我需要加上padding及border，但是加上去之后，盒子也会相应变大，这就造成改动麻烦。

12.CSS实现轮播图

可以通过使用js控制每张图片的相对位置来实现，在第一张图片之前和最后一张图片之后分别补充最后一张和第一张图片，在最后一张切换到第一张时将容器的left设置为0，实现无缝轮播
通过CSS的动画实现，控制z-index和opacity，同时给每张图设置延时显示时间
vue可以利用v-show和transition实现

采用CSS动画实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        li {
            display: block;
            width: 300px;
            height: 200px;
            position: absolute;
            animation: show 16s infinite;
        }

        li:nth-child(1) {
            background-color: red;
            animation-delay: 0s;
        }
        li:nth-child(2) {
            background-color: powderblue;
            animation-delay: 4s;
        }
        li:nth-child(3) {
            background-color: yellow;
            animation-delay: 8s;
        }
        li:nth-child(4) {
            background-color: blue;
            animation-delay: 12s;
        }

        @keyframes show{
            0%{
                opacity: 0;
                z-index: 2;
            }
            6%,25%{
                opacity: 1;
                z-index: 1;
            }
            31%,100%{
                opacity: 0;
                z-index: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="lunbo">
            <li class="lis1">1</li>
            <li class="lis2">2</li>
            <li class="lis3">3</li>
            <li class="lis4">4</li>
        </ul>
    </div>
</body>
</html>

13.两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
            width: 300px;
            background-color: rebeccapurple;
        }

        .right {
            background-color: rgb(206, 65, 225);
        }

        .main1 {
            display: flex;
        }

        .left1 {
            width: 300px;
            flex-shrink: 0;
            flex-grow: 0;
            background-color: rgb(153, 129, 51);
        }

        .right1 {
            flex: 1;
            background-color: royalblue;
        }

        /* 第三种 */
        .main2 {
            position: relative;
            width: 100%;
        }

        .left2 {
            position: absolute;
            width: 300px;
            left: 0;
            background-color: rgb(51, 153, 97);
        }

        .right2 {
            position: absolute;
            right: 0;
            left: 300px;
            background-color: rgb(166, 65, 225);
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

    <div class="main1">
        <div class="left1">左边</div>
        <div class="right1">右边</div>
    </div>

    <div class="main2">
        <div class="left2">左边</div>
        <div class="right2">右边</div>
    </div>
</body>
</html>

14.标签样式选择

div p 是定义<div>标签中所有的<p>标签，包括所有的子标签和孙辈的标签的样式

div>p 是定义<div>标签中所有的子标签中的<p>标签，不包括孙辈的标签的样式

div+p 是定义紧跟在<div>标签后面的第一个<p>标签的样式

div~p  是定义所有跟在<div>标签后面的<p>标签的样式

div .p  是定义<div>标签中所有class为p的标签的样式

div,p  是定义所有<div>标签和<p>标签的样式

15.高度塌陷问题

父元素的高度，默认被子元素撑开。例如子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父元素的高度丢失，就是我们所说的高度塌陷问题。

例如，我们想要的界面是如下：

然而，可能会出现如下情况：

解决办法：
参考：前端基础问题 – 高度塌陷问题详解(面试重点问题)

16.解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型， 宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承 父盒子模型；
3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为 外边距塌陷。
4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

17.BFC（Block Formatting Context）是什么？应用？

BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

应用场景：

  1. 解决margin叠加的问题
 2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
 3. 用于清除浮动，计算BFC高度。

18.如何实现浏览器内多个标签页之间的通信

调用localstorge、cookies等本地存储方式

19.为什么要清除浮动？清除浮动的方式？

清除浮动主是要为了解决父级元素因为子级浮动引起内部高度为0的问题（父级没有高度的情况）；很多情况下不方便给父亲高度，比如新闻，不知道新闻里面多少字，不方面给高度，一般是让里面的内容自动撑开高度。这个时候就需要清除浮动，用clear 属性：清除浮动
清除方式：
1、父级盒子定义一个height
2、父级盒子定义overflow:hidden/auto;
3、额外标签法：在浮动盒子的后面加一个空标签，例如

.clear{
    clear:both;
}

4、使用after伪元素清除浮动

.clearfix:after{
    display:block; /*  转换为块级元素*/
    content:".";  /*  内容为小点，尽量加不要空，防止旧版本有空隙*/  
    height:0; /*  高度为0*/  
    visibility：hidden；/* 隐藏小点*/
    clear：both;
}
.clearfix{
    *zoom:1; /*  *代表IE6和IE7能识别的特殊符号，带有这个*的属性，只有IE6和IE7才执行，zoom就是IE6和IE7清除浮动的方法，IE6和IE7浏览器的处理方式，所以必须加上*/
}

5、使用before和after双伪元素清除法

.clearfix:before，.clearfix:after{
    display:table; /*  转换为块级元素*/
    content:"";  /*  为空*/  
}
.clearfix:after{
   clear:both;
}
.clearfix{
    *zoom:1;
}

20.CSS3有哪些新特性

实现圆角border-radius，阴影box-shadow，边框图片border-image
对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜- skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba()
唯一引入的伪元素是::selection；
实现媒体查询@media，多栏布局flex
过渡transition，动画animation

21.div里面的文字垂直居中

1、平水居中：text-align:center；

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

2、垂直居中：line-height:height;

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

22.opacity和rgba的区别

opacity
opacity是一个属性,有opacity属性的所有后代元素都会继承 opacity 属性

.box{
     opacity:0.4; //取值从 0.0 （完全透明）到 1.0（完全不透明）
}

rgba
rgba是一个属性值，语法为rgba（r,g,b,a）；rgba只会作用于它本身，不会作用于子元素上

.box{
     background: rgba(0,0,255,0.4); // 不限于背景颜色，可以是文字颜色，阴影等
}

23.CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

24.link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

25.对前端工程化的理解

 开发规范
 模块化开发
 组件化开发
 开发仓库
 性能优化
 项目部署
 开发流程
 开发工具

26.你知道什么是语义化标签嘛？

答：合理的标签干合理的事情