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

面试题---CSS

news 文章来源：https://blog.csdn.net/sugerfle/article/details/129333828 2025/5/8 12:53:54

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

python 操作word库docx 增强接口

前言用python 的docx 库操作word完成一些自动化的文档生成工作&#xff0c;但有时候会遇到docx库提供的操作无法直接满足业务上的需求&#xff0c;需要对其进行一些扩展。接口完善实现在指定的文字后面插入指定的文字任务&#xff1a;以下示例需要在文档中的所有 "人生苦短…...

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

ARM uboot 源码分析9 - uboot的硬件驱动部分

一、uboot 与 linux 驱动 1、uboot 本身是裸机程序 (1) 裸机本来是没有驱动的概念的&#xff08;狭义的驱动的概念就是&#xff0c;操作系统中用来具体操控硬件的那部分代码叫驱动&#xff09; (2) 裸机程序中是直接操控硬件的&#xff0c;操作系统中必须通过驱动来操控硬件…...

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

Mybatis动态sql语句foreach中拼接正则表达式字符串注意事项

今天要说到的查询情况&#xff0c;平时项目里边其实用到的并不是很多&#xff0c;使用正则表达式无非是为了匹配结果比较灵活&#xff0c;最常见的&#xff0c;我们的查询条件一般一个参数仅仅只是一种情况的筛选&#xff0c;对于如何选择查询方式&#xff0c;主要还是要看前端…...

编程日记 2023/5/20 13:11:40

JVM内置锁synchronized关键字详解

目录 JVM内置锁synchronized关键字详解 设计同步器的意义 如何解决线程并发安全问题&#xff1f; synchronized原理详解 synchronized底层原理 synchronized在jdk1.6前后的变化【重点】 jdk小于1.6时 jdk>1.6时 轻量级锁何时升级为重量级锁&#xff1f;&#xff1f;…...

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

【2021.12.25】xv6系统入门学习

【2021.12.28】为xv6系统添加一个开机密码 文章目录【2021.12.28】为xv6系统添加一个开机密码0、说明1、Ubuntu20上安装xv62、测试指令3、修改系统代码4、添加自己的程序命令0、说明 xv6 是 MIT 设计的一个教学型操纵系统。 记录Ubuntu上安装x86版本的xv6系统&#xff0c;为其…...

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

Linux内核4.14版本——drm框架分析(4)——crtc分析

目录 1. struct drm_crtc结构体 2. crtc相关的API 2.1 drm_crtc_init_with_planes 2.5 drm_mode_setcrtc 3. func的一些介绍 3.1 struct drm_crtc_helper_funcs 3.2 struct drm_crtc_funcs 4. 应用层的调用 4.1 drmModeSetCrtc &#xff08;drmlib库里&#xff09;---…...

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

用原生js手写分页功能

分页功能如下&#xff1a; 数据分页显示&#xff0c;每页显示若干条数据&#xff0c;默认当前页码为第一页。例如&#xff1a;每页5条数据&#xff0c;则第一页显示 1-5 条&#xff0c;第二页显示 6-10 条&#xff0c;依此类推。当页码为第一页时&#xff0c;上一页为禁用状态…...

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

CornerNet介绍

CornerNet: Detecting Objects as Paired Keypoints ECCV 2018 Paper&#xff1a;https://arxiv.org/pdf/1808.01244v2.pdf Code&#xff1a;GitHub - princeton-vl/CornerNet 摘要&#xff1a; 提出了一种single-stage的目标检测算法CornerNet&#xff0c;它把每个目标检…...

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

【SpringBoot】日志使用

默认配置 Spring Boot默认帮我们配置好了日志 //记录器Logger logger LoggerFactory.getLogger(getClass());Testpublic void contextLoads() {//System.out.println();//日志的级别&#xff1b;//由低到高 trace<debug<info<warn<error//可以调整输出的日志级…...

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

关于slice扩容性能损耗的探究

背景 ​ 如果让我评选最伟大的数据结构&#xff0c;在我心中答案只有两个&#xff0c;数组和哈希表&#xff0c;这两个是我的程序的重要组成部分&#xff0c;同时也是我饭碗的重要组成部分。slice和map简洁明了的API很容易让我们有一种他们提供了无限大的空间&#xff0c;可以…...

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