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

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-growflex-shrinkflex-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各自代表的含义&#xff1f;盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义&#xff1f; px&#xff1a;绝对单位&#xff0c;页面按精确像素展示 em&#xff1a;相对单位&#xff0c;基准点为…...

VB+SQL餐饮管理系统设计与实现

第一章 前言 1.1 绪论 当今世界已进入了在计算机信息管理领域中激烈竞争的时代,应用计算机已经变得十分普遍了,如同我们离不开的自行车、汽车一样。我们应该承认,谁掌握的知识多,信息量大,信息处理速度快,批量大,谁的效率就高,谁就能够在各种竞争中立于不败之地。随着…...

React入门学习笔记2

jsx语法规则 定义虚拟DOM时&#xff0c;不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class&#xff0c;要用className。内联样式&#xff0c;要用style{{key&#xff1a;value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头&#xf…...

Palo Alto Networks® PA-220R 下一代防火墙 确保恶劣工况下的网络安全

一、主要安全功能 1、每时每刻在各端口对全部应用进行分类 • 将 App-ID 用于工业协议和应用&#xff0c;例如 Modbus、 DNP3、IEC 60870-5-104、Siemens S7、OSIsoft PI 等。 • 不论采用何种端口、SSL/SSH 加密或者其他规避技术&#xff0c;都会识别应用。 • 使用…...

架构训练营学习笔记:5-2 负载均衡架构

多级负载架构 设计关键点 性能需求、维护复杂度之间做取舍。 一可以去掉F5、LVS &#xff1a; F5 是成本较高&#xff0c;LVS 是复杂&#xff0c;对于性能没那么高需求&#xff0c;可以去掉。 二 去掉ng: 服务网关服务 适应于初创公司快速验证&#xff0c;内部的 小系统…...

二叉树的性质、前中后序遍历【详细】

1. 树概念2.二叉树的概念1.2二叉树的性质 3.二叉树遍历3.2前序遍历3.2 中序遍历3.3 后序遍历 1. 树概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;有二叉树&#xff0c;N叉树等等。 子树…...

涨姿势了,有意思的气泡 Loading 效果

今日&#xff0c;群友提问&#xff0c;如何实现这么一个 Loading 效果&#xff1a; 这个确实有点意思&#xff0c;但是这是 CSS 能够完成的&#xff1f; 没错&#xff0c;这个效果中的核心气泡效果&#xff0c;其实借助 CSS 中的滤镜&#xff0c;能够比较轻松的实现&#xff0…...

单片机中断系统

单片机中断系统 中断的概念&#xff1a; CPU在处理某一事件A时&#xff0c;发生了另一事件B请求CPU迅速去处理&#xff08;中断发生&#xff09;&#xff1b;CPU暂时中断当前的工作&#xff0c;转去处理事件B&#xff08;中断响应和中断服务&#xff09;&#xff1b;待CPU将事…...

二、JVM-深入运行时数据区

深入运行时数据区 计算机体系结构 JVM的设计实际上遵循了遵循冯诺依曼计算机结构 CPU与内存交互图&#xff1a; 硬件一致性协议&#xff1a; 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的模块有很多&#xff0c;并且各有优劣&#xff0c;不同模块支持的操作和文件类型也有不同。下面是各个模块的支持情况&#xff1a; .xls.xlsx获取文件内容写入数据修改文件内容保存样式调整插入图片xlrd√√√xlwt√√√√√xlutils√√√√xlwings√√√√√…...

A Survey of Embodied AI: From Simulators to Research Tasks 论文阅读

论文信息&#xff1a; 题目&#xff1a;A Survey of Embodied AI: From Simulators to Research Tasks 作者&#xff1a;Jiafei Duan, Samson Yu 来源&#xff1a;arXiv 时间&#xff1a;2022 Abstract 通过评估当前的九个具体人工智能模拟器与我们提出的七个功能&#xff0…...

spark-sql数据重复之File Output Committer问题

前言 我们先来回顾下之前介绍过的三种Committer&#xff1a;FileOutputCommitter V1、FileOutputCommitter V2、S3A Committer&#xff0c;其基本代表了整体的演进趋势。 核心代码讲解详细参照&#xff1a;Spark CommitCoordinator 保证数据一致性 OutputCommitter commitTask…...

面试热题(前中序遍历构建树)

给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 题目中是给定两个数组&#xff0c;一个是存放这颗树的前序遍历的数组&#xff0c;一个是存放这棵树的…...

美术:贴图

游戏模型制作流程&#xff0c;SP和BP根据情况来选择软件对UV进行处理 3Dmax 制作模型和动画&#xff08;橘肉&#xff09;RizomUV 对模型进行展UV&#xff08;橘皮&#xff09;Substance Painter 纹理手绘&#xff08;给橘皮制定想要的皮肤&#xff09;BodyPaint 3D 纹理手绘&a…...

[MAUI]模仿微信“按住-说话”的交互实现

今天使用这个控件&#xff0c;做一个模仿微信“按住-说话”的小功能&#xff0c;最终效果如下&#xff1a; 使用.NET MAUI实现跨平台支持&#xff0c;本项目可运行于Android、iOS平台。 创建页面布局 新建.NET MAUI项目&#xff0c;命名HoldAndSpeak MainPage.xaml中创建一个…...

windows开机运行jar

windows开机自启动jar包&#xff1a; 一、保存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&#xff0c;使用dcokerfile文件构建镜像&#xff0c;参考如下文件 # 使用ubuntu:20.04镜像作为基础 FROM ubuntu:20.04# 调整时区 ENV DEBIAN_FRONTENDnoninteractive TZAsia/Shanghai# build参数 ARG userxiang usergroupduo# 设置默认工作路径 WORKDIR /home/${user}# 拷贝…...

“深入探索JVM:解密Java虚拟机的工作原理“

标题&#xff1a;深入探索JVM&#xff1a;解密Java虚拟机的工作原理 摘要&#xff1a;本文将深入探索Java虚拟机&#xff08;JVM&#xff09;的工作原理&#xff0c;从字节码到实际执行过程&#xff0c;从内存管理到垃圾回收等方面进行解析&#xff0c;帮助读者更好地理解和优…...

【华为OD机试】数字最低位排序【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个非空数组(列表) 起元素数据类型为整型 请按照数组元素十进制最低位从小到大进行排序 十进制最低位相同的元素,相对位置保持不变 当数组元素为负值时,十进制最低为等同于去除符号…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

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

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…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...