当前位置: 首页 > 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问题,当你想要私有到类而不是私有到模块时,可为类提供它,因为语…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...