大厂面试常考css总结

站长

2024年04月05日 15:40 · 阅读数 3

css在大厂的面试时不是重点考点，面试官心情好了问一个简直就是给你送分，这里总结了大厂近几年面试常问的css考点，一篇就可以搞定你对面试有关css的担忧。

1.说说你对css盒模型的理解

是什么？ 浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分：content(内容)、padding、border、margin。
标准盒模型

盒子总宽度：content（width） + padding + border + margin

            width: 300px;
            height: 300px;
            border: 5px solid #000;
            padding: 10px;
            margin: 20px;

怪异盒模型(IE) 盒子总宽度：width + margin 会缩减content的宽度，padding和border的宽度会融入到content中，会让盒子看上去变小了。

2. css中的选择器有哪些？说说优先级

<div id="app">
        <div class="box1">
            <div class="title">
                <h2>这是标题</h2>
            </div>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    id选择器
        #app{      
        } 
        
    类名选择器
        .box1,.box2,.box3{           
        }
        
    标签选择器
        h2{            
        }
        
   /* app下的所有div  后代选择器 */
         #app div{    
        } 

    /* 子选择器 选中app的子盒子*/
         #app > div{   
        } 

   /* 相邻兄弟选择器 选中相邻兄弟盒子，选中一个box2  */
         .box1 + .box2{
        } 

   /* 群组选择器 选中app下的所有box2 */
         #app .box2{ 
        } 
        
  /* 属性选择器 */
         input[abc="abc"]{ 
        } 
        
 /* 伪类 */
        #input:focus{
        }
  /*伪元素选择器 */
       #input::before{
        }

id选择器
类名选择器
标签选择器
后代选择器
子选择器
相邻兄弟选择器
群组选择器
属性选择器
伪类选择器
伪元素选择器

!important > 内联 > id选择器 > 类名选择器 > 标签选择器

内联：<div style="color: red; font-size: 16px;">这是一个使用内联CSS样式的段落。</div>

3.说说css中的单位有哪些？

px : 像素单位，屏幕上的发光点。
rem：相对单位，相对于根字体（html）大小。

        html{
            font-size: 30px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: burlywood;
        }
        .warp{
            width: 2rem;
            height: 2rem;
            font-size: 0.5rem;
            background-color: red;
        }


<div class="box">
       <div class="warp" >
            hello world
        </div> 
    </div>

em：相对单位，用于字体继承父容器字体大小，用在他处，是相对于当前容器自己的字体大小来定的（字体大小本身会继承于父容器）。

<style>
        .box{
            width: 300px;
            height: 300px;
            //warp设字体大小，span的em不会参照box
            font-size: 10px;  
        }
        .warp{
            width: 100px;
            height: 100px;
            background-color: blue;
            font-size: 20px;
        }
        .span{
            font-size: 1em;
            width: 20em;
            height: 20em;
            background-color: rgb(227, 143, 143);
        }
    </style>
    
    <div class="box">
        <div class="warp">
            <div class="span">
                hello
            </div>
        </div>
    </div>

rpx：HBuilder常用单位。微信小程序中的长度单位，代表屏幕宽度的百分比，一般情况下公式为：屏幕宽度 / 750。在设计稿中，1个rpx可以理解为屏幕宽度的1/750。
vw/vh ：相对单位，相对于窗口宽高比。
% ：相对单位，相对于父容器宽度的百分比。

4.说说设备像素，css像素，设备独立像素，dpr，ppi之间的区别？

pc端 1px == 1个物理像素
页面缩放比为1:1时，1px == 1个物理像素
设备像素：（设备像素 === 物理像素）指的是物理屏幕上的像素点数量，也就是硬件像素。设备像素与屏幕的物理尺寸有关，即同一尺寸的屏幕，像素点越多，画面就会越细腻。
CSS像素：（css像素 === 1px）是指网页上的一个逻辑单位，是Web开发中最常用的像素单位，它与设备像素并不总是相同，CSS像素通常是网页布局和设计所用的单位，可以根据具体设备的像素密度进行缩放，以适应不同分辨率的屏幕。
设备独立像素：（设备独立像素 === 分辨率）也称逻辑像素，是一种基于设备像素和屏幕尺寸进行计算的抽象单位，用来描述屏幕上的布局和尺寸，与CSS像素类似，也可以根据具体设备的像素密度进行缩放，以适应不同分辨率的屏幕。
DPR：（dpr（设备像素比） = 设备像素 / 设备独立像素）是设备像素和设备独立像素之比，表示一个CSS像素中包含的设备像素数量。例如，一个dpr为2的设备，一个CSS像素会被渲染成4个设备像素（2x2）。
PPI：（ppi === 像素的密度）是指每英寸像素密度的数量，是设备分辨率的另一种表达方式。通常情况下，像素密度越高，屏幕显示效果就会越清晰。

5. 说说回流重绘（重排重绘）

是什么

回流：浏览器渲染页面之前需要对结构进行布局计算。

重绘：将已经计算好布局的容器绘制出来
触发条件

回流：页面上有容器的几何属性发生变更

重绘：容器非几何属性变更（字体，颜色，尺寸）

注意：回流必定重绘，重绘不一定回流。

6.css中有哪些方式可以隐藏页面元素？区别是什么？

 1. display:none              脱离文档流  无法响应事件  回流重绘
 2. visibility:hidden         占据文档流  无法响应事件  重绘
 3. opacity:0                 占据文档流  响应事件      重绘 || 不重绘
 4. position:absolute;        脱离文档流  无法响应事件  
 5. clip-path（切割）                 占据文档流  无法响应事件  重绘

7.谈谈你对BFC的理解

是什么块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则
渲染规则
1. BFC容器在计算高度时，浮动元素的高度也会计算在内
2. BFC容器内的子元素的margin-top不会和BFC这个父容器发生重叠
3. 遵照从上往下从左往右的顺序渲染
触发条件
1. overflow:不为visible
2. display:table-xxx || inline-block || inline-xxx || flex || grid
3. float
4. position:absolute || fixed
应用

清除浮动

8.水平垂直居中 !!

父容器：position: relative;

子容器： position: absolute; + left50% + top50% + (translate) || margin负值(已知宽高)

<style>
    .box{
      width: 500px;
      height: 500px;
      background-color: antiquewhite;
      position: relative;
    }
    .wrap{
      width: 200px;
      height: 200px;
      background-color: #5cd552;
      position: absolute;
      left: 50%;
      top: 50%; 
      transform: translate(-50%, -50%); 
    }
  </style>


  <div class="box">
    <div class="wrap">hello world</div>
  </div>

父容器：

display: flex;

justify-content: center;

align-items: center;

子容器会垂直水平居中
父容器：

display: grid;

justify-content: center;

align-items: center;

子容器会垂直水平居中
给父容器加 display:table-cell；

text-align:center;

vertical-align:middle;(子容器不能是块级)

子容器加display：inline-block；
margin（已知宽高）

9.三栏布局怎么实现

两栏布局：

第一个盒子： display:flex 第二个盒子：flex:1

<style>
        .warp{
            display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: blue;
            flex:1
        }
    </style>
    
    <div class="warp">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

float + margin-left

<style>
    .wrap{
      height: 200px;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
    }
    .right{
      height: 100%;
      background-color: bisque;
      margin-left: 200px;
    }
  </style>

  <div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

display: grid;(网格布局)

三栏布局：

display:flex flex：1

<style>
        .warp{
            display: flex;
            
            
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .content{
            flex: 1;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .right{
            width: 200PX;
            height: 200px;
            background-color: blue;
            
        }
    </style>


    
    <div class="warp">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>

grid
圣杯布局：实现一个具有三列布局、且中间列优先显示于内容流的页面布局。这种布局通常由一个固定宽度的中间列和两个自适应宽度的侧边列组成，其中中间列在DOM结构上位于最前面，但在视觉上却排在最中间。

<style>
    .wrap {
      height: 200px;
      padding: 0 200px 0 200px;
    }

    .left {  
      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
      width: 200px;
      height: 100%;
      background-color: aqua;
    }

    .content {
      float: left;
      width: 100%;
      height: 100%;
      background-color: cadetblue;
    }

    .right {
      float: left;
      margin-left: -200px;
      position: relative;
      right: -200px;
      width: 200px;
      height: 100%;
      background-color: bisque;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

双飞翼布局：旨在实现一个具有三列布局、中间列优先显示于内容流的页面布局。和圣杯布局相比，双飞翼布局不需要使用相对定位和负边距等技巧，而是采用了更加简单的技术实现。

<style>
    .wrap{
      height: 200px;
    }

    .conatiner{
      float: left;
      box-sizing: border-box;
      height: 100%;
      background-color: cadetblue;
      padding: 0 200px 0 200px;
      width: 100%;
      
    }

    .left{
      float: left;
      margin-left: -100%;
      width: 200px;
      height: 100%;
      background-color: aqua;
      
    }
    
    .right{
      float: left;
      margin-left: -200px;
      width: 200px;
      height: 100%;
      background-color: bisque;
      
    }
  </style>

内容放在前面
  <div class="wrap">
    <div class="conatiner">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>

  </div>

10.说说flexbox

是什么？

是一种布局方式，可以简便完整响应式(自适应)的实现页面布局。容器中默认存在两条轴，主轴，交叉轴，默认x轴为主轴，可以用flex-direction来改变轴的方向
特征
1. 可以控制子元素主轴上的对齐方式
2. 可以控制子元素交叉轴上的对齐方式
3. 可以控制子元素缩放比例，排列方式
应用场景
1. 多栏布局
2. 居中

11.css3新增了哪些属性？

选择器：属性选择器，伪类选择器
box-shadow：阴影
background-clip：裁剪
transition(过渡) box:hover
transform(变形)
animation(动画)
渐变色

12.css3中常见的动画哪些？

transition(过渡)：当其他属性值发生变更时，控制该值变更所花费的事件以及变更曲线

.box {
      width: 200px;
      height: 50px;
      background-color: blueviolet;
      transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .box:hover{
      width: 500px;
    }

transform(变形) ：用于做容器的旋转，平移，缩放，倾斜等动画

.wrap{
      margin-top: 30px;
      width: 200px;
      height: 50px;
      background-color: red;
      transition: all 2s;
    }
    .wrap:hover{
      transform: translateX(100px) rotateZ(90deg);
    }

animation(动画)：控制容器动画的关键帧 @keyframes

.container{
      margin-top: 30px;
      width: 200px;
      height: 50px;
      background-color: rgb(28, 223, 57);
      animation: move 2s linear infinite;
    }

    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

13.什么是响应式

是什么响应式布局，是根据设备的宽度来响应式布局，达到不同设备的适配。
实现方案

flex （适用于某个容器内的响应式）
% (常适用于外层大容器)
rem + pc：(媒体查询 @media screen and (min-width: 768px) and... :屏幕宽度大于768px) || 移动端(js) ----媒体查询放根字体

<style>
    
    li{
      width: 10rem;
    }
    @media screen and (min-width: 1000px){  
      html{
        font-size: 30px;
      }
    }
    @media screen and (min-width: 800px) and (max-width: 1000px){
      html{
        font-size: 20px;
      }
    }
    @media screen and (max-width: 500px){  
      html{
        font-size: 14px;
      }
    }
    
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

媒体查询（不用rem） ----更复杂，代码量大
vw/vh (适用于外层大容器) ----相对window的大小

14. 视差滚动效果如何实现

是什么多层背景以不同速度进行移动，形成视差滚动效果
实现

background-attachment: fixed;（背景图像会随着页面的滚动而固定在指定的位置）

<style>
    *{margin: 0;padding: 0;}
    div{
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 20vh;
      text-align: center;
      line-height: 100vh;
    }
    .box.img:nth-child(2){
      background-image: url('https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF');
      background-size: cover;
      /* 将背景图片水平和垂直方向都居中显示在其容器中 */
      background-position: center center;
      background-attachment: fixed; 
    }
    .box.img:nth-child(4){
      background-image: url('https://t7.baidu.com/it/u=1785207335,3397162108&fm=193&f=GIF');
      background-attachment: fixed; 
    }
    .box.img:nth-child(6){
      background-image: url('https://t7.baidu.com/it/u=4265852580,160349292&fm=193&f=GIF');
      background-attachment: fixed; 
    }
    .box.img:nth-child(8){
      background-image: url('https://t7.baidu.com/it/u=3659156856,3928250034&fm=193&f=GIF');
      background-attachment: fixed; 
    }
  </style>

  <div class="box">1</div>
  <div class="box img">a</div>
  
  <div class="box">3</div>
  <div class="box img">b</div>

  <div class="box">5</div>
  <div class="box img">c</div>

  <div class="box">7</div>
  <div class="box img">d</div>

perspective + translateZ

<style>
    *{margin: 0;padding: 0;}
    html{
      height: 100%;
      overflow: hidden;
    }
    body{
      height: 100%;

    }
    #app{
      width: 100vw;
      height: 400px;
      text-align: center;
      font-size: 30px;
      padding-top: 100px;
      overflow-y: scroll;
      perspective: 1px;
    }
    .box1{
      width: 500px;
      height: 200px;
      background: #d98383;
    }
    .box2{
      width: 500px;
      height: 200px;
      background: #c8e17a;
      transform: translateZ(-3px);
    }
    .box3{
      width: 500px;
      height: 200px;
      background: #6ab682;
      transform: translateZ(-1px);
    }
  </style>

  <div id="app">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </div>

15.css画一个三角形

border：50px solid + border-color 可以用伪元素遮挡形成其他图形

 <style>
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box{
      border: 50px solid;
      border-color: transparent transparent #12f325 #13cfeb;
      /* border-color: #f15811 transparent transparent transparent; */
      position: relative;
    }
    .box::after{
      content: '';
      position: absolute;
      border: 34px solid;
      border-color: transparent transparent #fff #fff;
      left: -40px;
      bottom: -40px;
    }

    .box2{
      border: 50px solid;
      border-color: transparent #c4ea1b transparent transparent;
      border-radius: 50%;
    }
  </style>

  <div class="box"></div>
  <div class="box2"></div>

16. 如何显示一个小于10px的文字

zoom:倍数 ，原理是改变焦距，近大远小
transform: scale(0.01) 指的是将元素的尺寸缩小到原来的1/100，即缩小了99%。