当前位置: 首页 > news >正文

前端遇到的面试题

1.水平垂直居中

  • 绝对定位 + transform
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
  • 绝对定位 + margin(子元素宽高知道的情况下)
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
  • 绝对定位 + margin:auto
 position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
  • flex布局
display:flex;
justify-content:center;
align-items:center;
  • table-cell(父元素宽高知道的情况下)
height:500px;
width:500px;
display:table-cell;
text-align:center;display:inline-block;
  • grid布局(父元素高知道的情况下)
height:500px;
display:grid;align-self:center;
justify-self:center;

2.如何设置左边固定宽度,右边自适应

  • calc计算宽度
.left{ float:left;width:100px; } 
.right{ float:right;width:calc(100% - 100px); }
  • float + margin
.left{ float:left;width:100px; 
} .right{ float:right; margin-left:100px;}
  • float + overflow
.left{ float:left;width:100px; 
} .right{ float:right; overflow:hidden;}
  • flex布局
display: flex;
子 
.left{ width:100px; } 
.right{ flex:1 }
display: flex;
子 
left{ flex:0 0 100px; } 
.right{ flex:1 } 

3.三种定位的区别

  • static 静态定位
    默认值,设置 top,right,bottom,left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。
  • relative 相对定位
    元素相对自身偏移某个位置,元素保持其未定位的形状,它原本所占用的空间依旧保留,可以通过 z-index 进行层次分级,子元素可相对该元素进行绝对定位;left,top,right,bottom是相对于当前自身进行偏移的,不能独立存在,必须配合定位使用。
  • absolute 绝对定位
    使元素完全脱离文档流;相对于其最近的父级块元素(如果父级元素 position 为 static 时,absolute 元素将继续向上级查找,直到找到 body,以 body 坐标原点进行定位);元素原先在正常文档流中所占的空间会关闭,元素定位后生成一个块级框。
    4.css设置半透明
  • 使用rgba()函数
  • 使用opacity属性
    5.rem和px的区别
  • px它是相对于显示器屏幕分辨率而言的;作为单位是固定不变的,不能适应浏览器缩放时产生的变化
  • rem是css3中新增的相对单位,相对于html根元素,当在根元素中使用rem设置font-size时,此时的1rem等于浏览器默认字体大小,大多数浏览器默认大小为16px

相关文章:

前端遇到的面试题

1.水平垂直居中 绝对定位 transform position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);绝对定位 margin(子元素宽高知道的情况下) position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px;绝对定位 margin:auto position:a…...

abbitmq启动访问不了http://localhost:15672 通过修改服务登录admin

abbitmq默认的对Administration授权,而我的用户不是默认的Administration,所以后来打开服务,找到rabbitmq服务,属性,登陆,将本地系统账户修改为此账户,修改完成之后再重启服务,这时候…...

换架 3D 飞机,继续飞呀飞

相信大多数图扑 HT 用户都曾见过这个飞机的 Demo,在图扑发展的这十年,这个 Demo 是许多学习 HT 用户一定会参考的经典 Demo 之一。 这个 Demo 用简洁的代码生动地展示了 OBJ 模型加载、数据绑定、动画和漫游等功能的实现。许多用户参考这个简单的 Demo 后…...

js ?? || 使用方法

平时很常用的就是||,比如调用接口的时候,接口报错了需要给个默认值 const data(await getData())||{};今天遇到了一个场景,正常后端返回的就是false,如果接口报错要默认设置成true,但如果用了 || ,如下,那…...

i茅台自动申购算法协议分析

首发地址:http://zhuoyue360.com/crack/104.html 一、引言 今日看到有人分享了i茅台自动申购的文章。但是它酷似引流文章,全文一张图,呜呜呜。无法白嫖。太可恶了,因此,我来啦~ 我来整一整,我也要抢茅子! …...

【HarmonyOS】Java如何引用外部jar包

【关键字】 Java、引用jar包​ 【写在前面】 使用API6和API7开发HarmonyOS应用时,因为应用中只能引用SDK中开放的功能接口,但是部分jdk自带的接口功能在SDK中并未封装,要想在工程中使用jdk开放的接口功能,需要将jdk中的jar包通过…...

vue在线编辑表格导入导出

npm i file-saver npm i exceljs npm i luckyexcelindex.html &#xff08;方式一在html中引入&#xff09; <link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /><link relstylesheet hrefhttps://cdn.jsde…...

监控Kafka的关键指标

Kafka 架构 上面绿色部分 PRODUCER&#xff08;生产者&#xff09;和下面紫色部分 CONSUMER&#xff08;消费者&#xff09;是业务程序&#xff0c;通常由研发人员埋点解决监控问题&#xff0c;如果是 Java 客户端也会暴露 JMX 指标。组件运维监控层面着重关注蓝色部分的 BROKE…...

React18 hook学习笔记

useState useState用于在函数组件中声明和管理状态 它接受初始状态&#xff0c;并返回一个状态变量和一个更新状态的函数 通过调用更新状态的函数&#xff0c;可以改变状态的值并触发组件的重新渲染 import { useState } from "react"function App() {const [obj, …...

Java038——正则表达式

一、认识正则表达式 正则表达式通常被用于判断语句中&#xff0c;用来检查某一字符串是否满足某一格式。正则表达式是含有一些具有特殊意义字符的字符串&#xff0c;这些特殊字符称为正则表达式的元字符。例如&#xff0c;“\d”表示数字 0~9 中的任何一个&#xff0c;“d”就…...

JavaScript元素选择器

目录 一、getElementsByTagName1.说明2.用法示例 二、getElementsByName1.说明2.用法示例 三、getElementById1.说明2.用法示例 四、getElementsByClassName1.说明2.用法示例 五、querySelector1.说明2.用法示例 六、querySelectorAll1.说明2.用法示例 七、综合示例 一、getEle…...

Docker安装 elasticsearch-head

目录 前言安装elasticsearch-head步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 步骤2&#xff1a;拉取elasticsearch-head镜像拉取镜像查看已拉取的镜像 步骤3&#xff1a;创建容器创建容器方式1&#…...

交换排序——选择排序和冒泡排序的区别是什么?

今天重温一下算法&#xff0c;其实刚开始我觉得冒泡排序和选择排序是一样的&#xff0c;因为他们排序过程中都是通过相邻的数据比较找到最小/最大的数据&#xff0c;通过不断思考和学习才明白&#xff0c;两者还是有区别的。 冒泡排序 概念 冒泡排序(Bubble Sort)&#xff0…...

吉他谱:Melodies of Life - Final Fantasy Solo Guitar Collections

原始出处&#xff1a; Final Fantasy Solo Guitar Collections - 南泽大介改编的最终幻想9主题曲吉他谱 更多吉他谱&#xff1a; https://github.com/NaisuXu/Guitar_Sheet_Music_Collection...

微信小程序下拉刷新

小程序中的下拉刷新 - 掘金...

TX2 NX 修改设备树--GPIO

确认模组内使用的是哪个设备树文件 模组上电输入如下指令,查看返回值:cat /proc/device-tree/nvidia,dtsfilename找到相应的设备树文件设备树存放路径 /public_sources/Linux_for_Tegra/source/public/kernel_src/hardware/nvidia/platform/t18x/lanai/kernel-dts 确认设备树…...

.NET对象的内存布局

在.NET中&#xff0c;理解对象的内存布局是非常重要的&#xff0c;这将帮助我们更好地理解.NET的运行机制和优化代码&#xff0c;本文将介绍.NET中的对象内存布局。 .NET中的数据类型主要分为两类&#xff0c;值类型和引用类型。值类型包括了基本类型(如int、bool、double、cha…...

Hybrid App 可以从哪些技术路径实现性能优化

说到 Hybrid App&#xff08;混合应用&#xff09;大家都不陌生&#xff0c;因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用&#xff0c;为什么大家对这种「Native HTML5」的开发模式额外偏爱呢&#xff1f; 因为一方面在一定程度上兼顾了原生应用的优质体验…...

C++入门篇7---string类

所谓的string类&#xff0c;其实就是我们所说的字符串&#xff0c;本质和c语言中的字符串数组一样&#xff0c;但是为了更符合C面向对象的特性&#xff0c;特地将它写成了一个单独的类&#xff0c;方便我们的使用 对其定义有兴趣的可以去看string类的文档介绍&#xff0c;这里…...

2308d的静态构造函数循环依赖示例

原文 //Steve: __gshared string[string] dict; shared static this() {dict ["a" : "b"]; }这里有两个论点:这不能是CRT构造器,因为它依赖于D运行时,并且认为它应该进入自己的模块是一个QoL问题,当你想要私有到类而不是私有到模块时,可为类提供它,因为语…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...