HTML及CSS面试题4

1、BFC

1.1、介绍BFC及其应用

补充——触发BFC的方式,常见的有:

  • 设置浮动
  • overflow设置为:auto、scroll、hidden
  • positon设置为:absolute、fixed
  1. 介绍:
    ○ 所谓BFC,指的是:一个独立的布局环境,BFC内部的元素布局与外部互不影响
  2. 常见的BFC应用有:
    a. 解决:浮动元素令父元素高度坍塌的问题
    b. 解决:非浮动元素被浮动元素覆盖问题
    c. 解决:外边距垂直方向重合的问题

2.2、介绍BFC/IFC/GFC/FFC

  1. BFC:块级格式化上下文,指的是:一个独立的布局环境,BFC内部的元素布局与外部互不影响
  2. IFC:行内格式化上下文,将一块区域以行内元素的形式来格式化。
  3. GFC:网格布局格式化上下文,将一块区域以grid网格的形式来格式化
  4. FFC:弹性格式化上下文,将一块区域以弹性盒的形式来格式化

2、css中属性的计算(实现)过程是怎样的?

注意:

  • 每个属性都是有默认值的,即使只设置一个属性,其它的属性的值也是存在的(默认值)
  • 总的来讲,属性值的计算方法有下面4种,这也是属性值的计算顺序:
  1. 确定声明值
    ○ 参考样式表中如果没有冲突的声明,则作为CSS属性值,也就是:我们自己写的样式
  2. 层叠冲突
    ○ 对样式表有冲突的声明使用层叠规则,确定CSS属性值,也就是:根据权重来设置样式
  3. 使用继承
    ○ 对仍然没有值的属性,若可以继承则继承父元素的值,也就是:根据是否有继承关系来设置
  4. 使用默认值
    ○ 对仍然没有值的属性,全部使用默认属性值,也就是:以上都不存在,则使用默认值

3、css中的计算属性是什么

  1. calc()函数,主要用于:指定元素的长度,支持所有CSS长度单位,运算符前/后都要保留一个空格
  2. 比如:width:calc(100% - 50px)

4、媒体查询

  1. 问题
    ○ 如何使用媒体查询实现:视口宽度大于320px小于640px时,div元素宽度变成30%?
  2. 回答
@media screen and(min-width : 320px) and (max-width:640px){div{width:30px;}
}

5、过渡和动画

5.1、CSS3中transition和animation的属性分别有哪些

  1. transition过渡动画
    a. transition-property:指定过渡的 CSS 属性
    b. transition-duration:指定过渡所需的完成时间
    c. transition-timing-function:指定过渡函数
    d. transition-delay:指定过渡的延迟时间
  2. animation关键帧动画
    a. animation-name:指定要绑定到选择器的关键帧的名称
    b. animation-duration:动画指定需要多少秒或毫秒完成
    c. animation-timing-function:设置动画将如何完成一个周期
    d. animation-delay:设置动画在启动前的延迟间隔
    e. animation-iteration-count:定义动画的播放次数
    f. animation-direction:指定是否应该轮流反向播放动画
    g. animation-fi-mode:规定动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
    h. animation-play-state:指定动画是否正在运行或已暂停

5.2、CSS动画如何实现?

  1. transition方式,实现简单动画
    a. 定义过渡属性ransition-property:指定需要动画的CSS属性(如宽度、颜色)
    b. 设置过渡时间transition-duration:定义过渡的持续时间
    c. 设置速度曲线transition-timing-function:定义过渡的速度变化(如线性、缓出、缓入)
    d. 设置延迟时间transition-delay:定义过渡的开始延迟时间
  2. animation方式,实现复杂动画
    a. 定义关键帧@keyframes:使用规则指定动画的关键帧,描述动画过程中不同时间点的状态。
    b. 指定动画名称animation-name:将 @keyframes 定义的动画应用到元素上。
    c. 设置持续时间animation-duration:定义整个动画的运行时间。
    d. 设置速度曲线animation-timing-function:定义动画的速度变化。
    e. 设置延迟时间animation-delay:定义动画开始前的延迟时间。
    f. 定义播放次数animation-iteration-count:指定动画播放的次数(如一次、无限次)。
    g. 设置播放方向animation-direction:定义动画播放的方向(正向、反向、交替)。
    h. 设置填充模式animation-fill-mode:定义动画结束后元素的状态(如保持最后状态)。

6、简述CSS3中的变形(translate)如何使用?

补充——还有一些重要的变形属性,例如:

  • transform:它所对应的属性值就是一系列的变形函数,如:transform:scale(1.5)
  • transform-origin:用于设置元素的中心点位置
  • transform-style:指定嵌套元素如何在3D空间中呈现
  • perspective:用于设置查看者的位置,简单理解,就是视距,用来设置用户和元素 3D 空间Z平面之间的距离,越小,用户与3D空间Z平面距离越近,值越大,用户与3D空间Z平面距离越远,视觉效果就很小
  • perspective-origin:设置视距的角度,从left/center/right/length/%等
  • backface-visibility:用于:设置元素旋转背面是否可见
  1. 在CSS3中的变形整体分为:2D变形3D变形
  2. 整体可以划分出以下几类:
    • 2D变形
      ■ 基本用法:translate 用于在平面上移动元素的位置。
      ■ translateX:沿X轴水平移动元素。
      ■ translateY:沿Y轴垂直移动元素。
      ■ translate:同时沿X轴和Y轴移动元素,接受两个参数。
    • 3D变形
      ■ translateZ:沿Z轴移动元素,影响深度感,使元素看起来向前或向后移动
      ● 需要配合transform-style: preserve-3d
      ■ translate3d:同时沿X轴、Y轴和Z轴移动元素,接受三个参数。
    • 百分比单位
      ■ 在translate中使用百分比时,相对于元素的自身尺寸进行移动。
    • 组合变形
      ■ translate可以与其他变形函数,如:rotate、scale一起使用,创建复杂的变形效果

7、渐进式渲染

  1. 渐进式渲染,也称为惰性渲染,是指:为了提高用户感知的加载速度,以尽快的速度来呈现页面的技术。
  2. 但是,这并不是某一项技术的特指,而是一系列技术的集合。
  3. 例如:
    a. 骨架屏:其实就是一个转圈圈的loding动画之类的,让用户感觉快加载完了
    b. 图片懒加载:先加载部分图片,其它等需要的时候在进行加载
    c. 图片占位符:还未请求回数据时,临时找个图片代替占位,请求完了之后在替换
    d. 资源拆分:将内容分块拆分

8、总结如何提升/优化CSS的渲染性能

CSS渲染性能的优化来自方方面面,这里列举一些常见的方式:

  1. 使用id选择器,因为id是唯一的
  2. 避免深层次的选择器嵌套
  3. 尽量避免使用属性选择器,因为匹配速度慢
  4. 使用渐进增强的方案
  5. 遵守CSSLint规则——书写css的编码规范
  6. 不要使用@import
  7. 避免过分使用(少用)重排(Reflow)——浏览器重新计算布局位置与大小
  8. 依赖继承——有些属性可以继承,就没有必要再写一遍
  9. 值缩写—属性值可以缩写就缩写
  10. 避免耗性能的属性
  11. 背景图优化合并
  12. 文件压缩

9、层叠上下文

补充:层叠上下文触发条件

  1. HTML中的根元素HTML本身就具有层叠上下文,称为“根层叠上下文”
  2. 普通元素设置position属性为:非static值,并设置z-index属性为具体数值,产生层叠上下
  3. CSS3中的新属性也可以产生层叠上下文

9.1、什么是层叠上下文

  1. 层叠上下文是CSS中的一个概念,用于确定元素在页面上的显示顺序,它决定了哪些元素在其他元素的上方或下方显示
  2. 层叠上下文是一个容器,它里面的元素会按一定顺序堆叠,如:z-index、文档流中的顺序,影响元素的重叠关系

9.2、什么是层叠等级

  1. 如果两个元素在同一个层叠上下文中,那么层叠等级越大的元素,就越靠前。
  2. 层叠等级是一个概念,层叠等级的大小可以根据层叠顺序来进行判断。

9.3、什么是层叠顺序

  1. 层叠顺序表示:元素发生层叠时按照特定的顺序规则在Z轴上垂直显示
  2. 说简单一点就是:当元素处于同一层叠上下文内时如何进行层叠判断。
    a. 查看父级是否有设置定位+z-index
    b. 父级没有的话,就找到根层叠上下文html

10、补充CSS3遮罩及遮罩属性介绍——了解即可

  1. 介绍
    ○ CSS3遮罩(mask)允许通过定义图像或渐变来部分或全部隐藏HTML元素的特定部分,从而实现复杂的视觉效果
  2. 属性
    a. mask-image:设置遮罩图片,根据图片来显示对应的遮罩效果
    b. mask-mode:用于指定遮罩图像的混合模式,决定遮罩图像与背景如何组合显示
    c. mask-repeat:表示遮罩层是否允许重复,选值和background-repeat相同
    d. mask-position:设置遮罩层的位置,选值和background-position相同
    e. mask-clip:用于定义遮罩图像的可见区域,决定遮罩图像在哪些部分被裁剪或显示
    f. mask-origin:用于指定遮罩图像的位置区域,可以是边框框、填充框或内容框,以控制遮罩图像的应用范围
    g. mask-size:设置遮罩层的大小
    h. mask-type:用于指定遮罩是使用亮度(luminance)还是透明度(alpha)来确定遮罩区域的显示
    i. mask-composite:用于定义多个遮罩层之间的组合方式,决定它们如何彼此叠加和混合
  3. 示例代码
    在这里插入图片描述
  4. 效果展示
    在这里插入图片描述

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

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

相关文章

集合的知识点

一、集合的简介 1.1 什么是集合 集合(Collection),也是一个数据容器,类似于数组,但是和数组是不一样的。集合是一个可变的容器,可以随时向集合集合中添加元素,也可以随时从集合中删除元素。另外,集合还提…

鸿蒙(API 12 Beta3版)【录像流二次处理(C/C++)】媒体相机开发指导

通过ImageReceiver创建录像输出,获取录像流实时数据,以供后续进行图像二次处理,比如应用可以对其添加滤镜算法等。 开发步骤 导入NDK接口,接口中提供了相机相关的属性和方法,导入方法如下。 // 导入NDK接口头文件#in…

使用python实现3D聚类图

实验记录,在做XX得分预测的实验中,做了一个基于Python的3D聚类图,水平有限,仅供参考。 一、以实现三个类别聚类为例 代码: import pandas as pd import numpy as np from sklearn.decomposition import PCA from sk…

开源版最新LoveCardsV2表白墙源码下载

源码亮点 模板系统,给你无限可能 卡片不限字数,支持多图片上传 支持评论,点赞,让互动性拉满 管理后台可添加多个管理员 卡片一键分享至多平台 卡片浏览次数统计 发行版开箱即用 部署教程 1. 环境(参考开发环境&…

XSS- DOMclobbering与svg深度利用

目录 源码展示 解法一&#xff1a;绕过过滤-DOM clobbering 什么是DOM clobbering DOM clobbering原理 全局变量自动创建 属性名冲突 影响脚本执行 逐过程分析 源码展示 <script>const data decodeURIComponent(location.hash.substr(1));;const root documen…

图像处理之:Video Processing Subsystem(三)

免责声明&#xff1a; 本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下&#xff0c;作者不对因使用本文内容而导致的任何直接或间接损失承担责任&#xff0c;包括但不限于数据丢失、业务中断或其他经济…

【硬件模块】震动传感器模块

震动传感器模块实物图 DO&#xff1a;数字信号量输出&#xff0c;接单片机管脚&#xff1b; AO&#xff1a;模拟输出&#xff0c;无效&#xff0c;一般不接。 无震动&#xff0c;DO输出高电平&#xff0c;信号指示灯灭&#xff1b; 有震动&#xff0c;DO输出低电平&#xff0c;…

DHCP的原理与配置

目录 DHCP的原理 DHCP是什么 DHCP的好处 DHCP的分配方式 DHCP的工作原理 DHCP的配置 环境设置 DHCP配置 验证配置是否成功 DHCP的原理 DHCP是什么 DHCP:Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议。由Internet工作小组开发&#xff0c;专门用…

牛客网习题——通过C++实现

一、目标 实现下面4道练习题增强C代码能力。 1.求123...n_牛客题霸_牛客网 (nowcoder.com) 2.计算日期到天数转换_牛客题霸_牛客网 (nowcoder.com) 3.日期差值_牛客题霸_牛客网 (nowcoder.com) 4.打印日期_牛客题霸_牛客网 (nowcoder.com) 二、对目标的实现 1.求123...n_…

【unity小技巧】下载原神模型,在Blender中PMX模型转FBX模型,导入到Unity中实现基于光照模型的内置和URP卡通渲染

最终效果 前言 最近在研究人物模型的使用和卡通渲染效果&#xff0c;这里我们就使用原神的模型来演示。 一、原神模型下载 原神的模型可以在官网直接下载到。 1、第一期模型 官网&#xff1a;https://ys.biligame.com/gczj/ 2、第二期模型 官网&#xff1a;http://ys.bi…

Axure高端交互元件库:助力产品与设计

用户体验&#xff08;UX&#xff09;和用户界面&#xff08;UI&#xff09;设计对于任何产品的成功都至关重要。为了在这个竞争激烈的市场中脱颖而出&#xff0c;设计师和产品开发团队需要依赖强大的工具来创造引人注目且功能丰富的交互界面。下面介绍一款Axure精心制作的"…

背包问题的模板及各个等价变形

目录 0-1背包 —— 二维二重循环 01背包 —— 一维二重循环 完全背包 —— 二维三重循环 完全背包 —— 二维二重循环 完全背包 —— 一维二重循环 0-1背包 —— 二维二重循环 #include <bits/stdc.h> using namespace std; const int N 1010; int dp[N][N]; int v…

鸿蒙内核源码分析——(自旋锁篇)

本篇说清楚自旋锁 读本篇之前建议先读系列篇 进程/线程篇. 内核中哪些地方会用到自旋锁?看图: 概述 自旋锁顾名思义&#xff0c;是一把自动旋转的锁&#xff0c;这很像厕所里的锁&#xff0c;进入前标记是绿色可用的&#xff0c;进入格子间后&#xff0c;手一带&#xff0c…

Github 2024-08-19 开源项目周报Top15

根据Github Trendings的统计,本周(2024-08-19统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目7JavaScript项目3TypeScript项目3Dart项目2HTML项目1PowerShell项目1Clojure项目1C++项目1Rust项目1Bootstrap 5: Web上开发响应式、…

嵌入式软件--模电基础 DAY 2

强电和弱电&#xff0c;简单一点是以电死人为标准的&#xff0c;交流电36伏特以下&#xff0c;直流电24V以下&#xff0c;为安全电压&#xff0c;是为弱电&#xff0c;反则强电。 市电进入家庭&#xff0c;连接你的电脑&#xff0c;220V的电压为什么没有让你感到危险&#xff…

YOLO知识点总结:

分类&#xff1a; 即是将图像结构化为某一类别的信息&#xff0c;用事先确定好的类别(category)或实例ID来描述图片。这一任务是最简单、最基础的图像理解任务&#xff0c;也是深度学习模型最先取得突破和实现大规模应用的任务。其中&#xff0c;ImageNet是最权威的评测集&…

【区块链+金融服务】基于区块链的一站式绿色金融开放平台 | FISCO BCOS应用案例

科技的进步为绿色金融发展提供了新的机遇&#xff0c;但银行、企业、第三方金融机构等在进行绿色金融业务操作过程中&#xff0c; 存在着相关系统和服务平台建设成本高、迭代难度大、数据交互弱、适配难等痛点。 基于此&#xff0c;中碳绿信采用国产开源联盟链底层平台 FISCO …

【Android 远程数据库操作】

按正常情况下&#xff0c;前端不应该直接进行远程数据库操作&#xff0c;这不是一个明智的方式&#xff0c;应该是后端提供对应接口来处理&#xff0c;奈何公司各方面原因需要前端这样做。 对此&#xff0c;我对远程数据库操作做了总结&#xff0c;便于自己复盘&#xff0c;同…

【Qt】常用控件QCheckBox

常用控件QCheckBox QCheckBox表示复选按钮&#xff0c;可以允许选中多个。 QCheckBox继承自QAbstractButton 例子&#xff1a;获取复选按钮的取值 使用Qt Designer先大体进行设计 代码实现&#xff1a; #include "widget.h" #include "ui_widget.h"Widge…

【网络】套接字(socket)编程——TCP版

接着上一篇文章&#xff1a;http://t.csdnimg.cn/GZDlI 在上一篇文章中&#xff0c;我们实现的是UDP协议的&#xff0c;今天我们就要来实现一下TCP版本的 接下来接下来实现一批基于 TCP 协议的网络程序&#xff0c;本节只介绍基于IPv4的socket网络编程 基于 TCP 的网络编程开…