前端面试题01（css）

news2024/11/20 20:25:07

前端面试题01（css）

文章目录

- 前端面试题01（css）
- - - 1、CSS选择器的优先级
    - 2、隐藏元素的方法有哪些
    - 3、px和rem的区别
    - 4、重绘和重排的区别
    - 5、水平垂直居中的方式
    - 6、CSS的那些属性可以继承
    - 7、预处理器
  - 🎉写在最后

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

💥个人主页：code袁
💥 所属专栏：Java

1、CSS选择器的优先级

CSS的特性：继承性，层叠性，优先级
！important > 行内样式 > id >类/伪类/属性 > 标签 > 全局选择器

<style>
    .box {
      background-color: blue;
      height: 200px;
      width: 200px;
    }
  </style>
  <body>
    <div class="box" style="background-color: red"></div>
  </body>

2、隐藏元素的方法有哪些

1.display：none 元素在页面上消失，不占据空间
2.opacity:0 设置元素的透明度0 不占空间
3.visibility：hidden 让元素消失 占据空间
4.position：absolute  通过改变元素位置，让其消失

3、px和rem的区别

px是像素，每个像素的大小一致，绝对的长度单位
rem 相对单位 1px=10rem

4、重绘和重排的区别

浏览器的重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程。
重排是指重新计算网页布局的过程，而重绘则是根据新的布局信息重新绘制网页的过程。
它们的区别在于，重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息；
而重绘则是在元素的位置和尺寸等属性不变的情况下，重新绘制元素的样式。

5、水平垂直居中的方式

1.定位+margin
2.定位+transform
3.flex布局
4.grid布局
5.table布局

定位+margin

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      width: 400px;
      height: 400px;
      border: 1px solid;
      position: relative;
    }
    .son {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rebeccapurple;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  </style>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>

定位+transform

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      width: 400px;
      height: 400px;
      border: 1px solid;
      position: relative;
    }
    .son {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rebeccapurple;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>

flex布局

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .father {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 400px;
      border: 1px solid;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>

6、CSS的那些属性可以继承

子属性可以继承父属性的样式
1.字体属性 font 
2.文本属性 text-hight
3.元素的可见性：visibility：hidden
4.表格布局属性：border-spacing
5.列表属性：list-style
6.页面样式属性：page

7、预处理器

预处器语言增加了变量，函数，混入等强大的功能
SASS       LESS
SASS（Syntactically Awesome Style Sheets）和LESS（Leaner St Sheets）是两种流行的CSS预处理器，
它们扩展了CSS的功能并提供了更便捷的开发方式。

SASS和LESS都支持以下特性：

变量：可以定义和使用变量，方便在多个地方复用样式。
嵌套规则：可以在父选择器内部编写子选择器，减少代码的嵌套层级。
混合（Mixin）：可以定义可重用的样式块，并在需要的地方引用。
继承：可以通过继承已有的样式来减少重复代码。
运算：可以进行数学运算，方便计算样式值。
函数：提供了一些内置函数，用于处理颜色、字符串等。
SASS还有一些额外的特性：

Partials和Import：可以将样式文件拆分为多个部分，并在需要的地方引入。
控制指令：提供了条件语句和循环语句，增强了样式表的灵活性。
LESS相比于SASS，更加简洁和易学，语法上更接近于普通的CSS。
而SASS则提供了更多的高级特性和灵活性。