前端面试题-CSS

1. 盒模型

  • ⻚⾯渲染时, dom 元素所采⽤的 布局模型。可通过 box-sizing 进⾏设置。根据计算宽⾼的区域可分为
    • content-box ( W3C 标准盒模型)
    • border-box ( IE 盒模型)
    • padding-box
    • margin-box (浏览器未实现)

2. BFC

  • 块级格式化上下⽂,是⼀个独⽴的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
  • IE下为 Layout ,可通过 zoom:1 触发

触发条件:

  • 根元素
  • position: absolute/fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

规则:

  • 属于同⼀个 BFC 的两个相邻 Box 垂直排列
  • 属于同⼀个 BFC 的两个相邻 Box 的 margin 会发⽣重叠
  • BFC 中⼦元素的 margin box 的左边, 与包含块 (BFC) border box 的左边相接触(⼦元素 absolute 除外)
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的⾼度时,浮动⼦元素也参与计算
  • ⽂字层不会被浮动层覆盖,环绕于周围

应⽤:

  • 阻⽌ margin 重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同⼀个 BFC 区域之中)
  • ⾃适应两栏布局
  • 可以阻⽌元素被浮动元素覆盖

3.层叠上下⽂

  • 元素提升为⼀个⽐较特殊的图层,在三维空间中 (z轴) ⾼出普通元素⼀等。

触发条件

  • 根层叠上下⽂( html )
  • position
  • css3 属性
    • flex
    • transform
    • opacity
    • filter
    • will-change
    • webkit-overflow-scrolling

层叠等级:层叠上下⽂在z轴上的排序

  • 在同⼀层叠上下⽂中,层叠等级才有意义
  • z-index 的优先级最⾼

4. 居中布局

⽔平居中

  • ⾏内元素: text-align: center
  • 块级元素: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

垂直居中

  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table

⽔平垂直居中

  • absolute + transform
  • flex + justify-content + align-items

5. 选择器优先级

  • !important > ⾏内样式 > #id > .class > tag > * > 继承 > 默认
  • 选择器 从右往左 解析

6.去除浮动影响,防⽌⽗级⾼度塌陷

  • 通过增加尾元素清除浮动
  • :after /
    : clear: both
  • 创建⽗级 BFC
  • ⽗级设置⾼度

7.link 与 @import 的区别

  • link 功能较多,可以定义 RSS ,定义 Rel 等作⽤,⽽ @import 只能⽤于加载 css
  • 当解析到 link 时,⻚⾯会同步加载所引的 css ,⽽ @import 所引⽤的 css 会等到⻚⾯加载完才被加载
  • @import 需要 IE5 以上才能使⽤
  • link 可以使⽤ js 动态引⼊, @import 不⾏

8. CSS预处理器(Sass/Less/Postcss)

  • CSS 预处理器的原理: 是将类 CSS 语⾔通过 Webpack 编译 转成浏览器可读的真正 CSS 。在这层编译之上,便可以赋予 CSS 更多更强⼤的功能,常⽤功能:
    • 嵌套
    • 变量
    • 循环语句
    • 条件语句
    • ⾃动前缀
    • 单位转换
    • mixin 复⽤

9.CSS动画

transition: 过渡动画

  • transition-property : 属性
  • transition-duration : 间隔
  • transition-timing-function : 曲线
  • transition-delay : 延迟
  • 常⽤钩⼦: transitionend

animation / keyframes

  • animation-name : 动画名称,对应 @keyframes
  • animation-duration : 间隔
  • animation-timing-function : 曲线
  • animation-delay : 延迟
  • animation-iteration-count : 次数
    • infinite : 循环动画
  • animation-direction : ⽅向
    • alternate : 反向播放
  • animation-fill-mode : 静⽌模式
    • forwards : 停⽌时,保留最后⼀帧
    • backwards : 停⽌时,回到第⼀帧
    • both : 同时运⽤ forwards / backwards
  • 常⽤钩⼦: animationend
  • 动画属性: 尽量使⽤动画属性进⾏动画,能拥有较好的性能表现
    • translate
    • scale
    • rotate
    • skew
    • opacity
    • color

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/43425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

题解:ABC277E - Crystal Switches

题解:ABC277E - Crystal Switches 题目 链接:Atcoder。 链接:洛谷。 难度 算法难度:B。 思维难度:A。 调码难度:C。 综合评价:普及/提高。 算法 宽度优先搜索拆点思路 思路 把每个点…

Android WakefulBroadcastReceiver的使用

WakefulBroadcastReceiver 是一种特殊类型的广播接收器,为应用创建和管理 PARTIAL_WAKE_LOCK 。 简单来说, WakefulBroadcastReceiver 是持有系统唤醒锁的 BroadcastReceiver ,用于执行需要保持CPU运转的场景。 注册 注册 Receiver &#…

将vue项目通过electron打包成windows可执行程序

将vue项目打包成windows可执行程序 1、准备好dist将整个项目打包 npm run build2、安装electron依赖 npm install electron --save-dev npm install electron-packager --save-dev"electron": "^13.1.4", "electron-packager": "^15.2.0…

九耶丨阁瑞钛伦特-在项目中找到的经典BUG是什么?

在项目中找到的经典BUG有很多种,以下是其中一些常见的例子: 空指针异常(NullPointerException):当程序试图访问一个空对象或未初始化的变量时,会抛出空指针异常。这通常是由于缺少对变量的正确初始化或检查…

Neo4j之FOREACH基础

在 Neo4j 中,FOREACH 语句用于在查询中对一组元素执行某些操作,通常是在创建或更新节点关系时。它常常与 CREATE 或 SET 等操作结合使用。 创建多个关系: MATCH (p:Person), (m:Movie) WHERE p.name Alice AND m.title The Matrix FOREAC…

MySQL常用练手题目

数据库表名和字段设计 1.学生表 Student(s_id,s_name,s_birth,s_sex) 学生编号,学生姓名, 出生年月,学生性别 2.课程表 Course(c_id,c_name,t_id) 课程编号, 课程名称, 教师编号 3.教师表 Teacher(t_id,t_name) 教师编号,教师姓名 4.成绩表 Score (s_id,c_id,s_score) 学生编号…

C# window forms 进度条实现

在 C# Windows Forms 应用程序中,如果在后台执行长时间运行的任务,并希望同时更新进度条,可以使用多线程来实现。这将确保进度条的更新不会阻塞主线程,从而保持界面的响应性。以下是一个示例,演示了如何在后台执行任务…

【Datawhale 科大讯飞-基于论文摘要的文本分类与关键词抽取挑战赛】机器学习方法baseline

内容 科大讯飞AI开发者大赛NLP赛道题目: 基于论文摘要的文本分类与关键词抽取挑战赛 任务: 1.机器通过对论文摘要等信息的理解,判断该论文是否属于医学领域的文献。 2.提取出该论文关键词。 数据集的获取 训练集: 这里读取tit…

【基础】Android Handler

一、博客参考 Handler机制详解【重点】:https://www.jianshu.com/p/b4d745c7ff7a Handler Thread工作线程操作UI范例【重点】:https://www.cnblogs.com/net168/p/4075126.html 二、内存泄漏的解决:静态内部类弱引用 关于 Handler&#xf…

vue+flask基于知识图谱的抑郁症问答系统

vueflask基于知识图谱的抑郁症问答系统 抑郁症已经成为当今社会刻不容缓需要解决的问题,抑郁症的危害主要有以下几种:1.可导致病人情绪低落:抑郁症的病人长期处于悲观的状态中,感觉不到快乐,总是高兴不起来。2.可导致工…

智慧工地平台工地人员管理系统 可视化大数据智能云平台源码

智慧工地概述: 智慧工地管理平台是以物联网、移动互联网技术为基础,充分应用大数据、人工智能、移动通讯、云计算等信息技术,利用前端信息采通过人机交互、感知、决策、执行和反馈等,实现对工程项目內人员、车辆、安全、设备、材…

elaticsearch(3)

整合springboot 1.整合依赖 注意依赖版本和安装的版本一致 <properties> <java.version>1.8</java.version> <!-- 统一版本 --> <elasticsearch.version>7.6.1</elasticsearch.version> </properties> 导入elastics…

数据结构算法--1 顺序查找二分查找

顺序查找时间复杂度为O(n) 我们可以借助Python中的函数enumerate,通过enumerate遍历列表返回其索引和值 def linnear_search(li, val):for ind, v in enumerate(li):if v val:return indelse:return None 也可以通过列表长度依次遍历: def linear_search(li, val): # …

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…

创建react native项目的笔记

创建react native项目的笔记 重新下载 ruby安装 watchman安装 cocoapods安装 react native 项目创建好项目后安装 ios 依赖清除设备缓存安装 android 依赖链接 网易 mumu 模拟器安装路由 Navigation页面之间的跳转逻辑自定义头部样式判断不同设备平台代码示例安装 Axios安装本地…

java mysql druid mybatis-plus里使用多表删除出错的一种处理方式

今天在出来多表删除的时候在mapper.xml用了下面的多个delete语句 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"…

Spring Cloud 系列之OpenFeign:(7)链路追踪zipkin

传送门 Spring Cloud Alibaba系列之nacos&#xff1a;(1)安装 Spring Cloud Alibaba系列之nacos&#xff1a;(2)单机模式支持mysql Spring Cloud Alibaba系列之nacos&#xff1a;(3)服务注册发现 Spring Cloud 系列之OpenFeign&#xff1a;(4)集成OpenFeign Spring Cloud …

PHP酒店点菜管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 酒店点菜管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88232051 论文 https://…

前端技术Vue学习笔记--005

Vue学习笔记 一、非父子通信-event bus 事件总线 作用&#xff1a;非父子组件之间&#xff0c;进行简易消息传递。&#xff08;复杂场景用----Vuex&#xff09; 使用步骤&#xff1a; 创建一个都能访问的事件总线 &#xff08;空Vue实例&#xff09;-----utils/EventBus.js /…

两个数组的交集-C语言/Java

描述 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序。&#xff08;1 < nums1.length, nums2.length < 1000&#xff0c;0 < nums1[i], nums2[i] < 1000&#xff09; 示例1 输入…