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

css的简单问题

news 文章来源：https://blog.csdn.net/2301_79568779/article/details/142914462 2025/5/15 9:49:01

1.display:none;和visibility:hidden;的区别

相同点：都可以让元素不可见

区别：

display:none;可以让元素完成在渲染树中消失，渲染时不占任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。

修改元素的display通常会造成文档重排，修改isibility属性只会造成本元素的重绘

2.外边距折叠

相邻两个或多个普通流中的块元素在垂直方向上的margin会折叠。

浮动元素或行内块元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

创建了块级格式化上下文BFC的元素，不会和它的子元素发生margin折叠

3.z-index是什么？

z-index属性设置元素的堆叠顺序。仅在定位元素上有效果。在position的值是relative,absolute,fixed，sticky时候可以触发

4.盒模型

内容（Content）,内边距（Padding）,边框（Border）,外边距（Margin）

box-sizing:content-box|border-box|inherit;

CSS有两种不同的盒模型：

标准盒模型（W3C Box Model）（默认）：在这个模型中，元素的width和height只指内容区域的宽度和高度。内边距、边框和外边距会加在内容的宽度和高度上。
IE盒模型（也称为“怪异盒模型”）：在IE浏览器中，元素的width和height包括了内边距和边框的宽度。也就是说，设置的宽度和高度实际上是元素的外部尺寸。

5.移动端适配

a.meta viewport视口

b.图片适配

c.媒体查询

d.动态rem方案

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/05.css"><link rel="stylesheet" href="zuqiuFont/iconfont.css">
</head><body><header><div>热点</div><div>关注</div></header><nav><div>xx现场</div><div>xx生活</div><div>xx美女</div></nav><main><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure><figure><img src="img/1.jpg" alt=""><figcaption>小丸子啊</figcaption></figure></main><footer><div><span class="iconfont icon-shouye"></span> 首页</div><div><span class="iconfont icon-shouye"></span> 首页</div><div><span class="iconfont icon-xiangji"></span></div><div><span class="iconfont icon-shouye"></span> 首页</div><div><span class="iconfont icon-shouye"></span> 首页</div></footer>
</body>
</html>
<!-- 1.该项目的设计稿总宽度是640px,所以对应在iPhone5上做,该设备的真实大小是320,所以dpr = 22.改视口3.考虑适配(vw+rem实现实时适配)假设基准字号为100pxhtml的字号需要写vw,就需要把100px转成vw如果我们基于iPhone5做,100vw=320px 1vw=3.2px 100px=100/3.2=31.25vw记住:改工具里面的设置4.在body里面让字号回归为默认字号16px5.正常书写布局代码-->

html {font-size: 31.25vw;
}html,
body {height: 100%;
}body {font-size: 16px;display: flex;flex-direction: column;
}/* =====================header */header {height: .44rem;background-color: green;display: flex;justify-content: center;align-items: center;
}header div:nth-child(1) {width: .6rem;height: .24rem;background-color: #63d985;border-radius: .12rem 0 0 .12rem;text-align: center;line-height: .24rem;color: white;font-size: .12rem;
}header div:nth-child(2) {width: .6rem;height: .24rem;background-color: #54cc76;border-radius: 0 .12rem .12rem 0;text-align: center;line-height: .24rem;color: white;font-size: .12rem;
}nav {height: .35rem;border-bottom: 1px solid gray;display: flex;/* justify-content: space-around; */
}nav div {width: 33.33%;text-align: center;line-height: .35rem;
}nav div:hover {border-bottom: 2px solid green;color: green;
}main {flex: 1;background-color: pink;display: flex;flex-wrap: wrap;justify-content: space-between;overflow: auto;
}main figure {border: 1px solid gray;width: 48%;margin-top: .1rem;
}main figure img {width: 100%;vertical-align: middle;
}main figure figcaption {border-top: 1px solid gray;padding: .05rem 0 .05rem .1rem;
}footer {height: .44rem;display: flex;justify-content: space-around;align-items: center;
}footer div {display: flex;flex-direction: column;align-items: center;
}footer div:nth-child(3) {border: 1px solid gray;width: .52rem;height: .52rem;border-radius: 50%;text-align: center;line-height: .52rem;/* margin-top: -8px; *//* position: relative;top: -7px; */transform: translateY(-0.05rem);background-color: #fff;
}footer div:nth-child(3) .icon-xiangji {font-size: .3rem;
}

6.css3的transform，transition过渡,animation动画

transform属性用于在2D或3D空间中对元素进行变换。可以通过旋转、缩放、倾斜和移动等效果来改变元素的形状和位置。

.box {width: 100px;height: 100px;background-color: blue;transform: translate(50px, 50px) rotate(45deg);
}

transition用于创建平滑的变化效果，使CSS属性的变化更加自然。它定义了当元素状态变化时，过渡效果的持续时间、效果和延迟。从一种效果逐渐改变为另一宗效果。通常需要由事件来触发。transition是一次性的，不能重复发生，除非再次触发。

属性：

transition-property: 指定需要应用过渡效果的CSS属性。
transition-duration: 定义过渡效果的持续时间。
transition-timing-function: 定义过渡效果的速度曲线（如ease、linear、ease-in等）。
transition-delay: 定义过渡效果的延迟时间。

.box {width: 100px;height: 100px;background-color: blue;transition: background-color 0.5s ease, transform 0.5s ease;
}.box:hover {background-color: red;transform: scale(1.2);
}

animation用于创建更复杂的动画效果。与transition不同，animation可以控制关键帧，允许在多个状态之间进行变化。

属性：

animation-name: 指定动画的名称，通常与@keyframes一起使用。
animation-duration: 定义动画的持续时间。
animation-timing-function: 定义动画的速度曲线。
animation-delay: 定义动画的延迟时间。
animation-iteration-count: 指定动画的循环次数（如infinite）。
animation-direction: 定义动画的播放方向（如normal、reverse、alternate等）。

@keyframes slide {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);}
}.box {width: 100px;height: 100px;background-color: blue;animation: slide 2s infinite;
}

7.父元素和子元素宽高不固定，如何实现水平处置居中

方法一：使用 Flexbox

    <style>.parent {display: flex; /* 启用 Flexbox */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中（可选） */height: 100vh; /* 高度设为 100% 视口高度，便于查看效果 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {padding: 20px;background-color: lightblue;border: 1px solid #007bff; /* 添加子元素的边框 */}</style>

方法二：使用绝对定位

    <style>.parent {position: relative; /* 使父元素成为定位上下文 */height: 100vh; /* 高度设为 100% 视口高度 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {position: absolute; /* 使用绝对定位 */left: 50%; /* 移动到父元素的 50% */top: 50%; /* 移动到父元素的 50% */transform: translate(-50%, -50%); /* 将元素中心移动到该点 */padding: 20px;background-color: lightcoral;border: 1px solid #007bff; /* 添加子元素的边框 */}</style>

方法三：使用 Margin 自动设置

    <style>.parent {width: 80%; /* 设置父元素宽度 */margin: 0 auto; /* 使父元素居中 */height: 100vh; /* 高度设为 100% 视口高度 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {width: fit-content; /* 宽度根据内容自适应 */margin: 0 auto; /* 子元素水平居中 */padding: 20px;background-color: lightgoldenrodyellow;border: 1px solid #007bff; /* 添加子元素的边框 */}</style>

8.假设默认高度100px，写三栏布局，左右栏300px,中间自适应

<style>.container {display: flex; /* 使用Flexbox布局 */height: 100px; /* 设置容器高度 */}.left-column, .right-column {width: 300px; /* 左右栏固定宽度 */background-color: #f0f0f0; /* 背景色 */padding: 10px; /* 内边距 */text-align: center; /* 居中对齐文本 */}.center-column {flex: 1; /* 自适应宽度 */background-color: #d0e0f0; /* 背景色 */padding: 10px; /* 内边距 */text-align: center; /* 居中对齐文本 */}</style>

css的简单问题

1.display:none;和visibility:hidden;的区别相同点：都可以让元素不可见区别： display:none;可以让元素完成在渲染树中消失，渲染时不占任何空间；visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间&a…...

编程日记 2024/10/17 17:39:26

使⽤ Override 和 New 关键字进⾏版本控制（C#）

文章目录 1. 基础概念1.1 override1.2 new 2. 示例代码1. override 关键字2. new 关键字 3.完整示例测试3.1 基类和派生类的定义3.2 测试代码3.3 运行结果结论在 C# 中，override 和 new 关键字用于控制类之间的成员方法的隐藏和重写。理解它们之间的差异和使用场景…...

编程日记 2024/10/17 17:37:24

JavaScript 15章：模块化编程

在现代软件开发中，模块化编程是一种非常重要的实践，它可以帮助开发者组织代码，提高代码的复用性和可维护性。以下是关于模块化编程的一些关键知识点和实战案例： 第15章：模块化编程模块的概念模块是指将一组相关的…...

编程日记 2024/10/17 17:35:20

qt creator 开发环境的安装

1.找官网官网地址：Installation | Qt Creator Documentation 点 Parent Directory 继续点 Parent Directory 点 archive/ 2.下载在线安装器点 online_ainstallers 选择在线安装器版本选择对应版本后进入下载列表，根据自己的系统选择下载。下载后…...

编程日记 2024/10/17 17:31:16

Xilinx远程固件升级（二）——STARTUPE2原语的使用

通过（一）可以看出，对于远程固件升级实际上是通过调用flash不同区域的bit实现，通过golden image和update image共同保障了系统的稳定性。在项目中如果将flash的时钟直接绑定FPGA后进行约束，在综合编译时是无法通过的。这…...

编程日记 2024/10/17 17:30:15

DynamicExpresso

DynamicExpresso 动态Expression 安装包：DynamicExpresso.Core Student.cs public class Student { public int Age { get; set; } public string Name { get; set; } public void Hello() { Con…...

编程日记 2024/10/17 17:25:10

从Naive RAG到Agentic RAG：基于Milvus构建Agentic RAG

检索增强生成（Retrieval-Augmented Generation, RAG）作为应用大模型落地的方案之一，通过让 LLM 获取上下文最新数据来解决 LLM 的局限性。典型的应用案例是基于公司特定的文档和知识库开发的聊天机器人，为公司内部人员快速检索内部…...

编程日记 2024/10/17 17:24:09

Linux 环境chrony设置服务器间时间同步一致

服务器： master01: slave02: slave03: 安装chrony安装： yum -y install chrony 设置以master01为时间服务器，其他服务器同步master01时间 master01的chrony.conf配置: server ntp1.aliyun.com iburst allow all local stratum 10重启ch…...

编程日记 2024/10/17 17:23:07

MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中

MetaCTO确认将放弃QuestPro2及轻量化头显正在开发中随着虚拟现实(VR)和增强现实(AR)技术的不断发展，越来越多的公司开始关注这个领域。其中，QuestPro2是一款备受关注的头戴式显示器，由MetaCTO公司开发。然而，最近MetaCTO公司宣布…...

编程日记 2024/10/17 17:21:04

深度学习 .exp()

在 MXNet 中，.exp() 是 ndarray 对象的方法，用于计算数组中每个元素的指数（e 的幂）。此方法适用于所有类型的 ndarray，并返回一个新的数组，其中每个元素都是相应输入元素的指数。语法 ndarray.exp() 参…...

编程日记 2024/10/17 17:20:02

从数据管理到功能优化：Vue+TS 项目实用技巧分享

引言在项目开发过程中，优化用户界面和完善数据处理逻辑是提升用户体验的重要环节。本篇文章将带你一步步实现从修改项目图标、添加数据、优化日期显示，到新增自定义字段、调整按钮样式以及自定义按钮跳转等功能。这些操作不仅提升了项目的可视化效果&am…...

编程日记 2024/10/17 17:19:01

SSD |（六）FTL详解（上）

文章目录 📚FTL综述📚映射管理🐇映射的种类🐇映射的基本原理🐇HMB🐇映射表写入 📚FTL综述当SSD所使用的主控和闪存确定后，FTL算法的好坏将直接决定SSD在性能、可靠性、耐用性等方面…...

编程日记 2024/10/17 17:15:59

程序报错：ModuleNotFoundError: No module named ‘code.utils‘； ‘code‘ is not a package

程序报错内容： Traceback (most recent call last): File "code/nli_inference/veracity_prediction.py", line 10, in <module> from code.utils.data_loader import read_json ModuleNotFoundError: No module named code.utils; code is …...

编程日记 2024/10/17 17:13:57

【closerAI ComfyUI】电商模特一键换装解决方案来了！细节到位无瑕疵！再加上flux模型加持，这个工作流不服不行！

不得了了兄弟们。这应该是电商界的福音，电商模特一键换装解决方案来了！细节到位无瑕疵！再加上flux模型加持，这个工作流不服不行！ 这期我们主要讨论如何使用stable diffusion comfyUI 制作完美无瑕疵的换装工作流。** …...

编程日记 2024/10/17 17:11:55

【优选算法篇】编织算法的流动诗篇：滑动窗口的轻盈之美

文章目录 C 滑动窗口详解：基础题解与思维分析前言第一章：热身练习1.1 长度最小的子数组解法一（暴力求解）解法二（滑动窗口）滑动窗口的核心思想图解分析滑动窗口的有效性时间复杂度分析易错点提示 1.2 无重复…...

编程日记 2024/10/17 17:08:49

Linux 常用打包和压缩格式命令（tar tar.gz tar.bz2 tar.xz zip）

Linux 常用打包和压缩格式命令（tar tar.gz tar.bz2 tar.xz zip） 常用压缩包： tar 仅打包，不压缩。 gzip 使用DEFLATE算法进行压缩,通常用于.gz或.tar.gz文件。 bzip2 使用Burrows-Wheeler算法进行压缩,通常用于.bz2或.tar.bz2文件…...

编程日记 2024/10/17 17:07:48

Scala入门基础（12）抽象类

抽象类，制定标准，不要求去具体实现包含了抽象方法的类就是抽象类。抽象方法只是有方法名，没有具体方法体的方法定义抽象类要用abstract（抽象）关键字用智能驾驶技术举例：演示&#xff09…...

编程日记 2024/10/17 17:06:47

unity静态批处理

unity静态批处理静态批处理要求和兼容性渲染管线兼容性使用静态批处理在构建时进行静态批处理在构建时执行静态批处理的步骤： 在运行时进行静态批处理性能影响静态批处理静态批处理是一种绘制调用批处理方法，它将不移动的网格组合在一起&#xff0c…...

编程日记 2024/10/17 16:59:39

python项目实战——下载美女图片

python项目实战——下载美女图片文章目录 python项目实战——下载美女图片完整代码思路整理实现过程使用xpath语法找图片的链接检查链接是否正确下载图片创建文件夹获取一组图片的链接获取页数获取目录页的链接完善代码注意事项完整代码 import requests import re import…...

编程日记 2024/10/17 16:58:38

git分布式版本控制系统命令介绍、功能作用案例、子模块等知识点总结

Git是一个分布式版本控制系统，广泛用于软件开发中。以下是Git的常用命令、功能、作用以及一些使用案例的详细介绍。 Git 基本命令配置 git config: 配置用户信息，如用户名和电子邮件。 git config --global user.name "Your Name"git confi…...

编程日记 2024/10/17 16:56:36

第八课：Python学习之循环

循环目标程序的三大流程while 循环基本使用break 和 continuewhile 循环嵌套 01. 程序的三大流程在程序开发中，一共有三种流程方式： 顺序 —— 从上向下，顺序执行代码分支 —— 根据条件判断，决定执行代码的分支循环 —— …...

编程日记 2024/10/17 16:55:31

设计模式——建造者模式（5）

一、写在前面创建型模式单例模式工厂方法模式抽象工厂模式原型模式建造者模式结构型模式行为型模式二、介绍建造者模式主要在以下场景中得到应用： 当需要创建的对象具有复杂的内部结构，且包含多个属性时，建造者模式可以将对象的构建…...

编程日记 2024/10/17 16:53:28

java面向对象编程--高级（二）

目录一、内部类 1.1 成员内部类 1.1.1 静态和非静态 1.1.2 调用外部类的结构 1.2 局部内部类 1.2.1 非匿名和匿名 1.2.2 比较 1.2.3 练习二、枚举类 2.1 枚举类讲解 2.2 代码实现三、包装类 3.1 包装类与基本数据类型 3.2 练习 3.3 补充四、自动生成单元测试…...

编程日记 2024/10/17 16:52:28

定时发送邮件

一、实验内容在linux主机通过定时任务指定在每天12:12分定时发送邮件；邮件内容自定。二、实验步骤 1.安装s-nali 2.编辑/etc/s-nail.rc 文件 3.配置文件授权码获取：点击POP3/SMTP/IMAP，并且启用IMAP/SMTP服务 4、编辑任务定时器三、…...

编程日记 2024/10/17 16:51:26

基于Java的免税商品优选购物商城设计与实现代码(论文+源码)_kaic

目录摘要 Abstract 第一章绪论 1.1 课题开发的背景 1.2 课题研究的意义 1.3 研究内容第二章系统开发关键技术 2.1 JAVA技术 2.2 MyEclipse开发环境 2.3 Tomcat服务器 2.4 Spring Boot框架 2.5 MySQL数据库第三章系统分析 3.1 系统可行性研究…...

编程日记 2024/10/17 16:50:25

解决selenium启动慢问题

新版本selenium启动缓慢，等半天才启动的问题 MacOS 暂略 Windows 解决selenium新版启动缓慢 (卡住) 的问题_webdriver.chrome()很慢-CSDN博客...

编程日记 2024/10/17 16:49:23

Springboot + zset + lua 实现滑动窗口

Component public class RedisRateLimiter {Autowiredprivate RedisTemplate<String, String> redisTemplate;private String luaScript() {return "redis.call(zremrangebyscore, KEYS[1], 0, tonumber(ARGV[1]) - tonumber(ARGV[2]) * 1000) " // 移除过期的…...

编程日记 2024/10/17 16:48:23