CSS前端面试
文章目录
- rem、em、vh、px各自代表的含义?
- 盒模型
- poison 定位属性
- flex属性
- 让元素水平垂直居中
- 页面适配的方法有哪些
rem、em、vh、px各自代表的含义?
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值
rem:相对单位,可理解为root em, 相对根节点html的字体大小来计算
vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单
盒模型
盒模型由内而外分别是:width+height(html元素);padding(内边距);border(边框);margin(外边距)。
盒模型分为:
怪异盒模型(IE盒模型)
使用属性:
box-sizing:border-box;//怪异盒模型
//width + height = html + border + padding
标准盒模型
box-sizing:context-box;//标准盒模型
//width + height = width + height
弹性盒模型(flex)
display:flex;
poison 定位属性
相对定位 (position:relative;)
相较于原来的位置。相对定位会保留原来的位置,【不脱离文档流】。
绝对定位 (position:absolute;)
不保留原来的位置,【脱离文档流】。绝对定位若父级没有设置相对定位,则默认会以浏览器为基准变化,若父级设置了相对定位,则以父级为基准变化。
固定定位 (position:fixed;)
会一直固定在某个不位置,不随滚动条滚动而改变。【脱离文档流】
粘性定位 (position:sticky;)
会随着滚动条滚动,【脱离文档流】
flex属性
flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow: 定义元素的的放大比例
默认为0;即使存在剩余空间,也不会被放大
所有元素flex-grow都为1,等分所有空间,自动放大
当某个元素flex-grow为n,占的空间是flex-grow为1的n倍
我们通常将flex:1用作自适应布局,即flex:1 == flex-grow:1
flex-shrink: 定义元素的缩小比例
默认为1,即 如果空间不足,该元素将缩小;
所有元素的flex-shrink都为1:当空间不足时,缩小的比例相同;
flex-shrink为0:空间不足时,该元素不会缩小;
当某个元素flex-grow为n,空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis: 定义在分配多余空间之前,元素占的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值。
默认值为auto,即元素原本大小;
设置后元素将占据固定空间。(如flex-basis:100px;)
让元素水平垂直居中
1、定位 + margin
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom left right 都设置为0,margin设置为auto。
2、定位 + margin负值
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom 设置为50%,margin-left设置为子元素width的一半,margin-top设置为子元素height的一半。
以上两种方法都需要固定宽高,以下是几种不需要固定宽高的方法
3、定位 + transform
给父级设置相对定位。给子级设置绝对定位,并且给子级的top bottom 设置为50%,transform设置为translate(-50%,-50%)。
4、table布局
给父级设置display:table-cell;vertical-align:midlle;text-align:center;给子级设置display:inline-block;这样可以使所有为行内块元素的子级都可以水平垂直居中
5、flex布局
给父级设置display:flex;align-items:center;justify-content:center;
6、grid布局
给父级设置display:grid;align-items:center;justify-content:center;
页面适配的方法有哪些
1、根据不同根据不同的分辨率,加载不同的CSS样式文件
// 分辨率大于等于1680,大部分为1920的范围情况下,调用此css
if(window.screen.width >= 1680){document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
2、媒体查询
/* 大屏幕 */
@media (min-width:1200px) {.container:{width:1000px;}
}
相关文章:
CSS前端面试
文章目录 rem、em、vh、px各自代表的含义?盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义? px:绝对单位,页面按精确像素展示 em:相对单位,基准点为…...
VB+SQL餐饮管理系统设计与实现
第一章 前言 1.1 绪论 当今世界已进入了在计算机信息管理领域中激烈竞争的时代,应用计算机已经变得十分普遍了,如同我们离不开的自行车、汽车一样。我们应该承认,谁掌握的知识多,信息量大,信息处理速度快,批量大,谁的效率就高,谁就能够在各种竞争中立于不败之地。随着…...
React入门学习笔记2
jsx语法规则 定义虚拟DOM时,不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class,要用className。内联样式,要用style{{key:value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头…...
Palo Alto Networks® PA-220R 下一代防火墙 确保恶劣工况下的网络安全
一、主要安全功能 1、每时每刻在各端口对全部应用进行分类 • 将 App-ID 用于工业协议和应用,例如 Modbus、 DNP3、IEC 60870-5-104、Siemens S7、OSIsoft PI 等。 • 不论采用何种端口、SSL/SSH 加密或者其他规避技术,都会识别应用。 • 使用…...
架构训练营学习笔记:5-2 负载均衡架构
多级负载架构 设计关键点 性能需求、维护复杂度之间做取舍。 一可以去掉F5、LVS : F5 是成本较高,LVS 是复杂,对于性能没那么高需求,可以去掉。 二 去掉ng: 服务网关服务 适应于初创公司快速验证,内部的 小系统…...
二叉树的性质、前中后序遍历【详细】
1. 树概念2.二叉树的概念1.2二叉树的性质 3.二叉树遍历3.2前序遍历3.2 中序遍历3.3 后序遍历 1. 树概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合,有二叉树,N叉树等等。 子树…...
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果: 这个确实有点意思,但是这是 CSS 能够完成的? 没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现࿰…...
单片机中断系统
单片机中断系统 中断的概念: CPU在处理某一事件A时,发生了另一事件B请求CPU迅速去处理(中断发生);CPU暂时中断当前的工作,转去处理事件B(中断响应和中断服务);待CPU将事…...
二、JVM-深入运行时数据区
深入运行时数据区 计算机体系结构 JVM的设计实际上遵循了遵循冯诺依曼计算机结构 CPU与内存交互图: 硬件一致性协议: MSI、MESI、MOSI、Synapse、Firely、DragonProtocol 摩尔定律 摩尔定律是由英特尔(Intel)创始人之一戈登摩尔(Gordon Moore)提出来…...
随机验证码vue实现,登录验证码随机验证码数字和字母类型的
1、组件 <!--loginCode登录验证码组件--> <template> <canvas id"canvasCode" :width"contentWidth" :height"contentHeight" /> </template> <script> export default { name: LoginCode, props: { identif…...
xlrd与xlwt操作Excel文件详解
Python操作Excel的模块有很多,并且各有优劣,不同模块支持的操作和文件类型也有不同。下面是各个模块的支持情况: .xls.xlsx获取文件内容写入数据修改文件内容保存样式调整插入图片xlrd√√√xlwt√√√√√xlutils√√√√xlwings√√√√√…...
A Survey of Embodied AI: From Simulators to Research Tasks 论文阅读
论文信息: 题目:A Survey of Embodied AI: From Simulators to Research Tasks 作者:Jiafei Duan, Samson Yu 来源:arXiv 时间:2022 Abstract 通过评估当前的九个具体人工智能模拟器与我们提出的七个功能࿰…...
spark-sql数据重复之File Output Committer问题
前言 我们先来回顾下之前介绍过的三种Committer:FileOutputCommitter V1、FileOutputCommitter V2、S3A Committer,其基本代表了整体的演进趋势。 核心代码讲解详细参照:Spark CommitCoordinator 保证数据一致性 OutputCommitter commitTask…...
面试热题(前中序遍历构建树)
给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返回其根节点。 题目中是给定两个数组,一个是存放这颗树的前序遍历的数组,一个是存放这棵树的…...
美术:贴图
游戏模型制作流程,SP和BP根据情况来选择软件对UV进行处理 3Dmax 制作模型和动画(橘肉)RizomUV 对模型进行展UV(橘皮)Substance Painter 纹理手绘(给橘皮制定想要的皮肤)BodyPaint 3D 纹理手绘&a…...
[MAUI]模仿微信“按住-说话”的交互实现
今天使用这个控件,做一个模仿微信“按住-说话”的小功能,最终效果如下: 使用.NET MAUI实现跨平台支持,本项目可运行于Android、iOS平台。 创建页面布局 新建.NET MAUI项目,命名HoldAndSpeak MainPage.xaml中创建一个…...
windows开机运行jar
windows开机自启动jar包: 一、保存bat批处理文件 echo off %1 mshta vbscript:CreateObject("WScript.Shell").Run("%~s0 ::",0,FALSE)(window.close)&&exit java -jar E:\projects\ruoyi-admin.jar > E:\server.log 2>&1 &…...
使用DockerFile一键创建自定义linux开发环境
1,使用dcokerfile文件构建镜像,参考如下文件 # 使用ubuntu:20.04镜像作为基础 FROM ubuntu:20.04# 调整时区 ENV DEBIAN_FRONTENDnoninteractive TZAsia/Shanghai# build参数 ARG userxiang usergroupduo# 设置默认工作路径 WORKDIR /home/${user}# 拷贝…...
“深入探索JVM:解密Java虚拟机的工作原理“
标题:深入探索JVM:解密Java虚拟机的工作原理 摘要:本文将深入探索Java虚拟机(JVM)的工作原理,从字节码到实际执行过程,从内存管理到垃圾回收等方面进行解析,帮助读者更好地理解和优…...
【华为OD机试】数字最低位排序【2023 B卷|100分】
【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个非空数组(列表) 起元素数据类型为整型 请按照数组元素十进制最低位从小到大进行排序 十进制最低位相同的元素,相对位置保持不变 当数组元素为负值时,十进制最低为等同于去除符号…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
