前端面试题01(css)

简介: 前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。

前端面试题01(css)

@[toc]

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则提供了更多的高级特性和灵活性。

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

目录
相关文章
|
7天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
20 6
|
24天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
25 4
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
64 1
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
195 1
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
63 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
25 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
19 1
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
2月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
17 0