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

面试题---CSS

news 2025/7/7 7:34:30

面试题---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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/6 6:27:41

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/21 9:48:10

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/7/7 6:14:26

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/6/17 7:54:42

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/6 13:15:09

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/7/6 14:51:35

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

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

编程新知 2025/7/6 12:28:30

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/6/19 20:48:48