20240308-1-校招前端面试常见问题CSS

news/2024/4/21 13:22:07/文章来源:https://blog.csdn.net/qq_24428851/article/details/136571192

校招前端面试常见问题【3】——CSS

在这里插入图片描述

1、盒模型

Q:请简述一下 CSS 盒模型?

W3C 模式:盒子宽=width+padding+border+margin
怪异模式:盒子宽=width+margin

Q:inline、block、inline-block 元素的区别?

inline(行内元素):
使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行。
不能更改元素的 height,width 的值,大小由内容撑开。
可以使用 padding 上下左右都有效,margin 只有 left 和 right 产生边距效果,但是 top 和 bottom 就不行。

block(块级元素):
使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度。
能够改变元素的 height,width 的值。
可以设置 padding,margin 的各个属性值,top,left,bottom,right 都能够产生边距效果。

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

2、选择器

Q:请列举出你用过的 CSS 选择器?

普通选择器:

选择器例子描述
.class.intro选择 class=“intro” 的所有元素。
#id#firstname选择 id=“firstname” 的元素。
**选择所有元素
elementp选择所有

元素

层次选择器

选择器例子描述
element.classp.intro选择 class=“intro” 的所有

元素

element,elementdiv, p选择所有
元素和所有

元素

element elementdiv p选择
元素内的所有

元素

element>elementdiv > p选择父元素是
的所有

元素

element+elementdiv + p选择紧跟
元素的首个

元素

element1~element2p ~ ul选择前面有

元素的每个

  • 元素

属性选择器

选择器例子描述
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target=“_blank” 属性的所有元素。

伪类选择器

选择器例子描述
:activea:active选择活动链接。
::afterp::after在每个

的内容之后插入内容。

::beforep::before在每个

的内容之前插入内容。

:first-childp:first-child选择属于父元素的第一个子元素的每个

元素。

:focusinput:focus选择获得焦点的 input 元素。
:fullscreen:fullscreen选择处于全屏模式的元素。
:hovera:hover选择鼠标指针位于其上的链接。
:linka:link选择所有未访问过的链接。
:not(selector):not§选择非

元素的每个元素。

:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

:visiteda:visited选择所有已访问的链接。

Q: CSS 选择器的权重是什么样的?

样式权重
!important权重最大
内联样式权重 1000
类选择器权重 10
id 选择器权重 100
派生选择器权重 1

3、常见规则

Q:position 的值有哪几种,布局方式是什么样的?

描述
static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative相对于其正常位置进行定位,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute元素框从文档流完全删除,相对于值不为 static 的第一个父元素进行定位。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

Q: 简单描述下 flex 布局?

使用 flex 布局的元素会成为容器(flex container),它内部的元素自动成为 flex 项目(flex item)。
容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。
此外,需注意使用 flex 容器内元素,即 flex item 的 float,clear、vertical-align 属性将失效。

flex 的各种属性:

1、flex-direction
属性决定主轴的方向(即项目的排列方向)。row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2、flex-wrap
默认情况下,项目都排在”轴线”上。本属性定义如果一条轴线排不下,如何换行。nowrap(默认值):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。

3、align-items
定义弹性盒子在交叉轴上如何对齐。flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。

4、justify-content
定义弹性盒子在主轴方向上的对齐方式。flex-start:容器开头对齐。
flex-end:容器终点对齐。
center:容器中点对齐。

4、常见概念

Q:FC 是什么?BFC 和 IFC 是什么?

FC:格式化模型。

FC 会根据 CSS 盒子模型将文档中的元素转换为一个个的盒子,每个盒子的布局由以下因素决定:
1、盒子的尺寸:精确指定、由约束条件指定或没有指定
2、盒子的类型:行内盒子(inline)、行内级盒子(inline-level)、原子行内级盒子(atomic inline-level)、块盒子(block)
3、定位方案:普通流定位、浮动定位或绝对定位
4、文档树中的其它元素:即当前盒子的子元素或兄弟元素
5、视窗尺寸与位置
6、包含的图片的尺寸
7、其他的某些外部因素

BFC:块级格式化上下文。

1、在 BFC 中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由它们的 margin 值所决定的。在一个 BFC 中,两个相邻的块级盒子的垂直外边距会产生折叠。
2、在 BFC 中,每一个盒子的左外边缘会触碰到容器的左边缘。
3、浮动元素、绝对定位元素,以及设置了 overflow 属性(除了 visible)的元素不是块级盒子的块容器,因此会为他们的内容创建新的 BFC。

IFC:行内级格式化上下文。

1、在 IFC 中,盒子一个接着一个地水平放置。这些盒子会通过不同的方式进行对齐,如底部对齐,顶部对齐,文字基线对齐。
2、矩形区域包含着来自一行的盒子叫做盒行盒(line box)。
3、line box 的宽度由浮动情况和它的包含块决定。line box 的高度由 line-height 计算决定(也就是说,由其内部的块撑开)。

Q:如何清除浮动?

浮动可以理解为让某个 div 元素脱离标准流,漂浮在标准流之上。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

清除浮动可以理解为打破横向排列。清除浮动的关键字是 clear,其取值有以下几种:
1、none,默认值。允许两边都可以有浮动对象
2、left,不允许左边有浮动对象
3、right,不允许右边有浮动对象
4、both,不允许有浮动对象
对于 CSS 的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

Q:什么是回流?什么是重绘?

当页面中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新绘制,这就称为回流。每个页面至少需要一次回流,就是在页面第一次加载的时候。

当页面中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如 background-color。则就叫称为重绘。

任何对页面中元素的操作都会引起回流或者重绘,比如:

1、添加、删除元素(回流+重绘)
2、隐藏元素,display:none(回流+重绘),visibility:hidden(只重绘,不回流)
3、移动元素,比如改变 top,left(重绘+回流)。
4、对 style 的操作(对不同的属性操作,影响不一样)。
5、还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)

Q:如何开启 GPU 加速?其优缺点是什么?

当页面中某个 DOM 元素应用了某些 CSS 规则时就会开启 GPU 加速,如 3D 变换:

.cube {-webkit-transform: translate3d(250px, 250px, 250px) rotate3d(250px, 250px, 250px, -120deg) scale3d(0.5, 0.5, 0.5);
}

如果不想对元素用 3D 变换但是还想要开 GPU 加速,就可以:

.cube {-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);
}

但是,一定要注意:不要随意使用 GPU 加速,如果的确能够显著提高性能,可以尝试使用 GPU 加速。但是另一方面,使用 GPU 可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。

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

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

相关文章

使用Go的encoding/asn1库处理复杂数据:技巧与最佳实践

使用Go的encoding/asn1库处理复杂数据:技巧与最佳实践 引言ASN.1 基础ASN.1与Go语言的关系ASN.1数据类型 encoding/asn1库概览主要功能和特性关键API应用场景 基本使用方法序列化(编码)反序列化(解码)处理复杂数据结构…

AAC ADTS格式

AAC⾳频格式:Advanced Audio Coding(⾼级⾳频解码),是⼀种由MPEG-4 标准定义的有损⾳频压缩格式,由Fraunhofer发展,Dolby, Sony和AT&T是主要的贡献者。 ADIF:Audio Data Interchange Format ⾳频数据交换格式。这…

算法---双指针练习-6(查找总价格为目标值的两个商品)

查找总价格为目标值的两个商品 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址:点这里 2. 讲解算法原理 算法的基本思想是首先初始化两个指针begin和end,分别指向数组的起始位置和末尾位置。 接下来,算法使用一个循环来移动e…

鸿蒙实战开发Camera组件:【相机】

相机组件支持相机业务的开发,开发者可以通过已开放的接口实现相机硬件的访问、操作和新功能开发,最常见的操作如:预览、拍照和录像等。 基本概念 拍照 此功能用于拍摄采集照片。 预览 此功能用于在开启相机后,在缓冲区内重复采集…

Axure Cloud如何给每个原型配置私有域名

需求 在原型发布之后,自动给原型生成一个独立访问的域名,类似http://u591bi.axshare.bushrose.cn,应该如何配置呢? 准备事项 已备案域名 如何备案?阿里云备案流程 已安装部署Axure Cloud 如何安装部署,请…

测试环境搭建整套大数据系统(九:docker学习)

一:为什么学习dockder? 对于组件的搭建和部署,可以简化。 二:什么是docker? docker是一个平台。 三:怎么使用docker? 1. 安装,切换仓库。 安装 curl -fsSL https://test.docke…

Java使用spire.doc操作word文档(合并、插入文字图片和表格、替换书签)

一、引入依赖 <dependency><groupId>e-iceblue</groupId><artifactId>spire.office</artifactId><version>7.5.4</version> </dependency> 二、word操作 1、合并word文档 import com.spire.doc.Document; import com.spir…

【YOLO v5 v7 v8 v9小目标改进】AFPN 渐进式特征金字塔网络:解决多尺度特征融合中,信息在传递过程丢失

AFPN 渐进式特征金字塔网络&#xff1a;解决多尺度特征融合中&#xff0c;信息在传递过程丢失 提出背景AFPN 多尺度特征金字塔 非邻近层次的直接特征融合 自适应空间融合操作 小目标涨点YOLO v5 魔改YOLO v7 魔改YOLO v8 魔改YOLO v9 魔改 提出背景 论文&#xff1a;https:…

Codesys.运动控制电子齿轮

文章目录 一. 电子齿轮概念应用 二. 电子齿轮耦合功能块 2.1. MC_GearIn 2.2. MC_GearInPos 2.3. MC_GearOut 三. 电子齿轮案例 3.1. 样例介绍 3.2. 引入虚轴 3.3. 程序框架 3.4. 程序编写 3.5. 程序监控 一. 电子齿轮概念应用 在很多应用场景中有多个牵引轴每个牵引…

低代码与AIGC技术:重塑软件开发的新篇章

随着信息技术的飞速发展&#xff0c;软件开发行业正经历这一场革命性的变革。而在这场变革中&#xff0c;低代码与AIGC技术不可避免成为了引领行业发展的两大中坚力量。他们的存在不仅改变了传统的软件开发模式&#xff0c;还极大地提高了开发效率和便捷性。本文将对低代码与AI…

npm 操作报错记录1- uninstall 卸载失效

npm 操作报错记录1- uninstall 卸载失效 1、问题描述 安装了包 vue/cli-plugin-eslint4.5.0 vue/eslint-config-prettier9.0.0 但是没有使用 -d &#xff0c;所以想重新安装&#xff0c;就使用 uninstall 命令卸载&#xff0c;结果卸载了没反应&#xff0c;也没有报错&#xf…

✅ Windows11 系统 I 卡独显 A770 安装 深度学习 Pytorch 环境

&#x1f4cb; 文献参考 这里非常感谢知乎上的 ‘丢丢’ 的[**Windows系统下英特尔独显Pytorch的历程**] 为我提供了一开始的 I 卡安装想法&#xff01;但是文中并未介绍如何进行额外的环境变量操作问题&#xff0c;导致很多软件直接安装至系统盘&#xff0c;占用系统盘空间&am…

备考银行科技岗刷题笔记(持续更新版)

银行考试计算机部分复习 IEEE 802.11的帧格式 1.1 IEEE 802.11是什么&#xff1f; 802.11是国际电工电子工程学会&#xff08;IEEE&#xff09;为无线局域网络制定的标准。目前在802.11的基础上开发出了802.11a、802.11b、802.11g、802.11n、802.11ac。并且为了保证802.11更…

EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测

EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测 目录 EI级 | Matlab实现GCN基于图卷积神经网络的数据多特征分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.GCN基于图卷积神经网络的数据分类预测 Matlab2023 2.多输入单输出的分类预测&#xf…

<商务世界>《第8课 Leads——MQL——SQL——商机——成交》

1 各种概念 英文缩写概念Traffic流量Leads潜在客户&#xff0c;销售线索&#xff1b;简称潜在线索MQLMarketing-Qualified Leads市场认可线索SQLSales-Qualified Leads销售认可线索OPPOpportunity商机Account成单客户 2 线索到商机 一般企业会把自身线索进行如下的划分&…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:LoadingProgress)

用于显示加载动效的组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 LoadingProgress() 创建加载进展组件。 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使…

运维知识点-Apache HTTP Server

Apache 介绍 介绍 Apache是一个开源的Web服务器软件&#xff0c;全称为Apache HTTP Server&#xff0c;由Apache软件基金会开发和维护。它是目前全球使用最广泛的Web服务器软件之一&#xff0c;占全球所有网络服务器的很大比例。Apache服务器具有跨平台的特性&#xff0c;可以…

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能。然而&#xff0c;对于非AI专家来说&#xff0c;制定高质量的提示来引导 LLMs 是目前AI应用领域的一项重要挑战。现有的提示…

【PyTorch][chapter 22][李宏毅深度学习]【无监督学习][ WGAN]【理论一】

简介&#xff1a; 2014年Ian Goodfellow提出以来&#xff0c;GAN就存在着训练困难、生成器和判别器的loss无法指示训练进程、生成样本缺乏多样性等问题。从那时起&#xff0c;很多论文都在尝试解决&#xff0c;但是效果不尽人意&#xff0c;比如最有名的一个改进DCGAN依靠的是对…

【嵌入式高级C语言】9:万能型链表懒人手册

文章目录 序言单向不循环链表拼图框架搭建 - Necessary功能拼图块1 创建链表头信息结构体 - Necessary2 链表头部插入 - Optional3 链表的遍历 - Optional4 链表的销毁 - Necessary5 链表头信息结构体销毁 - Necessary6 获取链表中节点的个数 - Optional7 链表尾部插入 - Optio…