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

面试题---CSS

news 2026/2/5 6:23: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

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/1/26 19:25:32

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

编程新知 2026/2/2 21:55:02

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2026/1/22 13:22:59

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22