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

面试题---CSS

news 2026/4/2 18:39:09

面试题---CSS

  • 子绝父相下，子百分比的问题
  • 两栏布局问题
  • 三栏布局问题---圣杯问题(三栏，左右固定，中间自适应)。
  • 内联样式与块级样式的区别
  • 怎么让一个 div 水平垂直居中
  • 分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景
  • css中min-width与max-width

子绝父相下，子百分比的问题

1 父元素相对定位，子元素绝对定位(子绝父相)的前提下，子元素宽高若设为百分比，是相对父元素的content + padding的值, 注意不含border

如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content(IE盒模型是content+padding+border。)

两栏布局问题

2 两栏布局问题：需求是左边固定，右边自适应
下面介绍常用的两种方式：

  1. 利用绝对定位
  2. 利用flex布局
// 利用绝对定位，让左侧div,成为BFC
<body><div id="parent"><div id="left">左列定宽</div><div id="right">右列自适应</div></div>
</body>
// css
#parent{position: relative; /*子绝父相*/
}
#left {position: absolute;top: 0;left: 0;width: 100px;height: 500px;
}
#right {marin-left:100px;width:calc(100%-100px);height: 500px;
}

<body><div id="parent"><div id="left">左列定宽</div><div id="right">右列自适应</div></div>
</body>
// css
#parent{width: 100%;height: 500px;display: flex;
}
#left {width: 100px;
}
#right {flex: 1; /*均分了父元素剩余空间*/
}

三栏布局问题—圣杯问题(三栏，左右固定，中间自适应)。

  1. 利用绝对定位
  2. 利用flex布局
// 利用绝对定位
1.父元素使用相对定位
2.两侧子元素使用绝对定位
3.中间元素不做定位处理，只留出空间就好<div class="container"><div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>
</div>
// css
body,html,.container{height: 100%;padding: 0;margin: 0;overflow: hidden;
}.left,.right{position: absolute;height:100%;top: 0;
}.left{left: 0;width: 200px;
}.right{right: 0;width: 200px;
}.main{height:100%;margin: 0 200px;
}

<div class="container"><div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>
</div>// css
.container{display: flex;
}.left{width:200px;
}.main{flex: 1;/*均分了父元素剩余空间*/
}.right{width:200px;
}

内联样式与块级样式的区别

常见的块级元素：div、h1-h6、address、p等等。
常见的内联元素：span、strong等等。

在这里插入图片描述

怎么让一个 div 水平垂直居中

<div class="parent"><div class="child"></div>
</div>// 第一种做法是：直接在父级元素设置flex。通过设置父级的flex，让子级元素水平垂直居中。
.parent {display: flex;justify-content: center;align-items: center;
}// 第二种做法：父元素dispaly:flex;子元素margin:auto;
.parent {display: flex;
}
.child{margin:auto;
}// 第三种做法：transform + absolute + relative
.parent {position: relative;
}
.child {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%); 
}

分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击。
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承方面：

  • display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
  • visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能方面：

  • display:none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
  • visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容，性能消耗较一般
  • opacity: 0 ： 修改元素会造成重绘，性能消耗较少

css中min-width与max-width

max-width(最大宽度属性)：用来定义宽度显示的最大值
min-width(最小宽度属性)：用来定义宽度显示的最小值

<div class="min-width"> <img src="url10" /> //宽为100px 
</div> 
<div class="max-width"> <img src="url11" />  //宽度为400px 
</div> .max-width img{...}{ max-width:300px;} 
.min-width img{...}{ min-width:300px} “min-width”里的img图片最小宽度为300px，而实际图片只有100px ，所以图片被拉伸到300px；
“max-width”里的img图片最大宽度为300px，而实际图片宽度是400px ，所以图片被缩小到300px；

如何修改才能让图片宽度为 300px?
<img src="1.jpg" style="width:480px!important;”>方法一：
max-width:300px;覆盖其样式；
方法二：
transform: scale(0.625)；按比例缩放图片；

相关文章：

面试题---CSS

面试题---CSS子绝父相下&#xff0c;子百分比的问题两栏布局问题三栏布局问题---圣杯问题(三栏&#xff0c;左右固定&#xff0c;中间自适应)。内联样式与块级样式的区别怎么让一个 div 水平垂直居中分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景css…...

编程日记 2023/5/23 12:56:48

【C++】vector

目录 vector 1. vector的成员函数 1.1 构造、析构和赋值运算符重载 1.1.1 构造函数 1.1.2 析构函数 1.1.3 赋值运算符重载 1.2 迭代器 1.3 容量 1.4 元素访问 1.4.1 遍历方法 1.5 修改器 1.6 配置器 2. vector的非成员函数 vector 1. vector的成员函数 1.1 构造…...

编程日记 2023/5/23 12:56:45

RocketMQ安装

RocketMQ安装 安装前准备 1.RocketMQ是使用Java语言编写的所以在安装该MQ前需要Java环境。 2.准备好RocketMQ ​ RocketMQ运行版本下载地址&#xff1a; https://www.apache.org/dyn/closer.cgi?pathrocketmq/4.7.1/rocketmq-all-4.7.1-bin-release.zip ​ RocketMQ源码版…...

编程日记 2023/5/23 12:56:43

Spring——什么是IOC？

一、原则高内聚、低耦合二、什么是IOC&#xff1f;控制反转&#xff0c;把对象创建和对象之间的调用过程&#xff0c;交给spring进行管理三、使用IOC的目的是什么&#xff1f;降低耦合&#xff08;谁和谁的耦合&#xff1f;&#xff1f;如何降低的&#xff1f;&#xff09;原来…...

编程日记 2023/5/23 12:56:41

力扣（LeetCode）430. 扁平化多级双向链表（2023.03.04）

你会得到一个双链表&#xff0c;其中包含的节点有一个下一个指针、一个前一个指针和一个额外的 子指针 。这个子指针可能指向一个单独的双向链表&#xff0c;也包含这些特殊的节点。这些子列表可以有一个或多个自己的子列表&#xff0c;以此类推&#xff0c;以生成如下面的示例…...

编程日记 2023/5/23 12:56:39

条款13：优先考虑const_iterator而非iterator

STL const_iterator等价于指向常量的指针&#xff08;pointer-to-const&#xff09;。它们都指向不能被修改的值。标准实践是能加上const就加上&#xff0c;这也指示我们需要一个迭代器时只要没必要修改迭代器指向的值&#xff0c;就应当使用const_iterator。 上面的说法对C11…...

编程日记 2023/5/23 12:56:36

23考研 长安大学846计算机考研复试《数据库》

长安大学846计算机考研，复试历年真题《数据库》。 目录： （1）数据库复习 （2）专业面试 （3）2017-2020年历年复试题 （4）复试的一些心得 数据库复习： 刚开始复试的时候，先把教材学习一遍（《数据库系统概念》 王珊 第五版），课后习题自己做一遍，网上有卖这本书的 配套…...

编程日记 2023/5/23 12:56:34

Android 9.0 系统去掉省电模式

1.概述 在9.0的系统rom开发定制化工作中，在系统中系统设置里面省电模式的选择中，有智能省电模式 省电模式 和超级省电模式三种 由于对rom系统做了大量定制功能开发，所以会在进入省电模式的时候 会出现某些不必要的问题，由于产品开发需求， 就要求去掉省电模式 不让平板进入…...

编程日记 2023/5/23 12:56:29

3 mmmmm

全部 答对 答错 单选题 7. 项目经理通知敏捷团队成员&#xff0c;由于意外的个人问题&#xff0c;产品负责人将不能参加即将到来的冲刺审查。这种情况下最可能的结果是什么&#xff1f; A project manager informs the agile team members that, due to unexpected personal …...

编程日记 2023/5/23 12:56:25

nvidia Jetson nano Linux内核编译

今天编译了nvidia 的jetson nano的内核。在网上找到的资料都比较老了。现在官网的最新版本是35.1.结合之前看到的博客的内容。关键是内核源码和交叉编译器的下载。找到官方文档后，编译成功！并且官方的文档是有一个编译脚本的。看之前的资料都是给出的命令，不知道这个nvbuild…...

编程日记 2023/5/23 12:56:23

理想汽车2023年销量冲击30万辆有戏吗？

出品 | 何玺 排版 | 叶媛 2月27日理想汽车发布财报&#xff0c;数据表明&#xff0c;2022年理想营收和销量双双大涨。在财报会议上&#xff0c;理想汽车CEO李想表示&#xff0c; 2023年的销量预期为30万辆。 那么&#xff0c;理想汽车2023年销量冲击30万辆的目标能实现吗&…...

编程日记 2023/5/23 12:56:20

借助CatGPT让turtlesim小乌龟画曲线

注意这里是CatGPT&#xff0c;不等同OpenAI的ChatGPT&#xff0c;但是用起来十分方便&#xff0c;效果也还行。详细说明ROS机器人turtlesim绘制曲线需要注意哪些ROS机器人turtlesim绘制曲线需要注意以下几点&#xff1a;绘制曲线前需要设置好turtlesim的初始位置和方向&#xf…...

编程日记 2023/5/23 12:56:18

Java面试总结（四）

synchroize的实例、静态、代码块的锁对象 修饰实例方法 修饰静态方法 修饰代码块 1、修饰实例方法 &#xff08;锁当前对象实例&#xff09; 给当前对象实例加锁&#xff0c;进入同步代码前要获得 当前对象实例的锁 。 synchronized void method() {//业务代码 }2、修饰静…...

编程日记 2023/5/23 18:29:41

强强联合，再强的英伟达NVIDIA也不落俗套

强强联合&#xff0c;全球科技领域永恒的话题【科技明说 &#xff5c; 每日看点】前些天&#xff0c;我看到GPU领域的英伟达(Nvidia)与微软(Microsoft)做了一项十年期的云计算协议&#xff0c;起初我以为微软Microsoft Azure与英伟达GPU方面有所合作&#xff0c;其实不然&#…...

编程日记 2023/5/23 12:56:15

maven使用心得

maven 配置文件默认在 ~/.m2/settings.xml maven命令行 mvn clean install -Dmaven.test.skiptrue -s ~/.m2/settings.xml 往本地仓库加jar包 命令形如&#xff1a; mvn install:install-file -DgroupIdcom.lee.net -DartifactIdMyToolIdl -Dversion1.0.0-SNAPSHOT -Dpac…...

编程日记 2023/5/23 12:56:13

【算法题】1958. 检查操作是否合法

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个下标从 0 开始的 8 x 8 网…...

编程日记 2023/5/23 12:56:09

十一、GoF之代理模式

1 对代理模式的理解 【在程序中&#xff0c;对象A和对象B无法直接交互时。】 【在程序中&#xff0c;功能需要增强时。】 【在程序中&#xff0c;目标需要被保护时】 业务场景&#xff1a;系统中有A、B、C三个模块&#xff0c;使用这些模块的前提是需要用户登录&#xff0c;也…...

编程日记 2023/5/23 12:56:03

MySQL5.6和JVM(1.6)调优

MySQL5.6调优 目标了解什么是优化掌握优化查询的方法掌握优化数据库结构的方法掌握优化MySQL服务器的方法什么是优化？合理安排资源、调整系统参数使MySQL运行更快、更节省资源。<...

编程日记 2023/5/23 12:56:01

【汇编】三、寄存器（一只 Assember 的成长史）

嗨~你好呀&#xff01; 我是一名初二学生&#xff0c;热爱计算机&#xff0c;码龄两年。最近开始学习汇编&#xff0c;希望通过 Blog 的形式记录下自己的学习过程&#xff0c;也和更多人分享。 上篇系列文章链接&#xff1a;【汇编】二、预备知识&#xff08;一只 Assember 的…...

编程日记 2023/5/22 11:18:57

TFT通信协议解析与应用

TFTP&#xff08;Trivial File Transfer Protocol&#xff09;是一种简单的文件传输协议&#xff0c;常用于在本地网络上的设备之间传输小型文件。 通信大致过程 TFTP通信过程如下&#xff1a; TFTP通信双方建立连接&#xff1a;TFTP客户端与TFTP服务器建立连接。TFTP服务器监…...

编程日记 2023/5/23 12:55:58

解锁Unity游戏插件开发：从概念到实战的MelonLoader全攻略

解锁Unity游戏插件开发&#xff1a;从概念到实战的MelonLoader全攻略 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 一、认知篇…...

编程新知 2026/4/2 18:10:15

利用trl库实现DeepSeek-R1的GRPO训练：从数据处理到模型验证全流程解析

1. 理解GRPO训练与trl库的核心价值 GRPO&#xff08;Generalized Reinforcement Policy Optimization&#xff09;是近年来在强化学习领域兴起的一种训练方法&#xff0c;它通过多维度奖励机制来优化大语言模型的输出质量。我在实际项目中发现&#xff0c;相比传统的PPO&#x…...

编程新知 2026/4/2 16:36:17

课灵h5p-标签页 (Tabs)教程

标签页 (Tabs)教程 标签页 (Tabs) 是一种高效的内容容器&#xff0c;通过水平切换的选项卡界面来组织信息。它允许你在同一页面空间内并行展示多个同层级的主题&#xff08;如不同类别的资源、不同语言的版本&#xff09;&#xff0c;帮助学习者按需浏览&#xff0c;保持界面整…...

编程新知 2026/4/2 16:11:37

机械视觉入门：9点法手眼标定实战指南（附Halcon代码示例）

机械视觉入门&#xff1a;9点法手眼标定实战指南&#xff08;附Halcon代码示例&#xff09; 在工业自动化领域&#xff0c;机械视觉系统正逐渐成为智能制造的核心组件。当机械臂需要精准抓取或放置物体时&#xff0c;如何让"眼睛"&#xff08;相机&#xff09;看到的…...

编程新知 2026/4/2 15:04:32

SOLIDWORKS自定义属性模板制作全攻略：从零开始驱动模型参数

SOLIDWORKS自定义属性模板制作全攻略&#xff1a;从零开始驱动模型参数 在机械设计领域&#xff0c;SOLIDWORKS作为主流的三维CAD软件&#xff0c;其自定义属性功能往往被初学者低估。想象一下这样的场景&#xff1a;当你需要批量修改上百个零件的材料规格时&#xff0c;是否还…...

编程新知 2026/4/2 14:54:28

FastAPI 2.0流式响应性能翻倍的4个隐藏配置：uvloop优化、httpx异步客户端复用、response_model_exclude_unset调优、asyncpg连接池预热

第一章&#xff1a;FastAPI 2.0流式响应性能翻倍的全景认知FastAPI 2.0 引入了原生异步流式响应&#xff08;StreamingResponse&#xff09;的底层重构&#xff0c;通过移除中间层缓冲、直接对接 ASGI 服务器的 send 协议&#xff0c;并支持零拷贝字节流分块推送&#xff0c;显…...

编程新知 2026/4/2 14:21:54

Python AI推理延迟骤降62%的秘密：一张未公开的Cuvil架构设计图，含3大专利级调度模块

第一章&#xff1a;Python AI推理延迟骤降62%的秘密&#xff1a;一张未公开的Cuvil架构设计图&#xff0c;含3大专利级调度模块Cuvil 架构并非传统加速器堆叠方案&#xff0c;而是一种面向 Python 原生执行栈深度协同的异构推理引擎。其核心突破在于绕过 PyTorch/TensorFlow 的…...

编程新知 2026/4/2 10:03:48

Phi-4-mini-reasoning部署案例：科研团队构建内部逻辑验证辅助工具链

Phi-4-mini-reasoning部署案例&#xff1a;科研团队构建内部逻辑验证辅助工具链 1. 项目背景与模型介绍 Phi-4-mini-reasoning 是一款专注于推理任务的文本生成模型&#xff0c;特别适合处理数学题、逻辑题、多步分析和简洁结论输出等场景。与通用聊天模型不同&#xff0c;它…...

编程新知 2026/4/2 9:22:59

如何在5分钟内免费激活Windows和Office？KMS_VL_ALL_AIO智能脚本终极指南

如何在5分钟内免费激活Windows和Office&#xff1f;KMS_VL_ALL_AIO智能脚本终极指南 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 还在为Windows系统激活和Office办公软件激活而烦恼吗&#x…...

编程新知 2026/4/2 9:08:43

效率倍增：用快马平台自动化生成类qoderwork官网的高质量模板

在开发企业级工具类官网时&#xff0c;效率往往是团队最关注的核心指标之一。最近尝试用InsCode(快马)平台自动化生成类似qoderwork官网的模板&#xff0c;发现它能将传统需要数天的手动搭建过程压缩到几分钟内完成&#xff0c;这种效率提升对中小团队尤其有价值。以下是具体实…...

编程新知 2026/4/2 8:46:11