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

css的简单问题

news 2026/3/29 1:37:55

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

终极指南：如何用VideoDownloadHelper快速下载网页视频

终极指南：如何用VideoDownloadHelper快速下载网页视频【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 还在为无法保存网页视频而烦…...

编程新知 2026/3/29 1:15:20

全新升级：基于Vue3新标准的企业级后台综合解决方案实战（附源码课件）

先放资源：https://pan.quark.cn/s/a99f364f3e28 引言：后台前端开发的工程化跃迁之路在当前互联网行业的技术迭代周期中，Web前端大厂工程师的能力模型正在经历从"页面仔"到"工程架构师"的深刻变革。单纯掌握Vue2选项式API和基础CRUD开发已无法满足阿里…...

编程新知 2026/3/29 0:57:15

yatest：Arduino主机端单元测试与API模拟框架

1. yatest：面向Arduino生态的轻量级主机端单元测试框架在嵌入式开发实践中，Arduino平台因其易用性与丰富生态广受硬件工程师、教育工作者及电子爱好者青睐。然而，其传统开发流程长期面临一个根本性工程瓶颈：缺乏可落地的、与硬件解…...

编程新知 2026/3/29 0:15:03

Spring Boot 与 Prometheus 监控实战

Spring Boot 与 Prometheus 监控实战引言大家好，今天想和大家聊聊 Spring Boot 与 Prometheus 的监控实践。作为一名 Java 架构师，我深知监控对于生产环境的重要性。Prometheus 作为云原生监控的事实标准，与 Spring Boot 的集成非常顺畅。让…...

编程新知 2026/3/28 22:32:13

5分钟掌握WaveTools：让你的《鸣潮》游戏体验提升200%

5分钟掌握WaveTools：让你的《鸣潮》游戏体验提升200% 【免费下载链接】WaveTools 🧰鸣潮工具箱项目地址: https://gitcode.com/gh_mirrors/wa/WaveTools 还在为《鸣潮》的卡顿和掉帧烦恼吗？无论你是刚入坑的新手还是追求极致体验的资…...

编程新知 2026/3/28 22:20:05

OpenLiteSpeed实战踩坑记录：为什么我最终回归了LNMP环境？

OpenLiteSpeed实战反思：为什么复杂WordPress环境更适合LNMP？ 最近在技术社区里，OpenLiteSpeed被频繁提及，尤其是它宣称的高性能PHP处理能力吸引了不少WordPress站长的注意。作为一个长期使用LNMP环境的开发者，我也被这…...

编程新知 2026/3/28 22:06:02

终极AI图像增强神器Upscayl：让每一张照片重获新生

终极AI图像增强神器Upscayl：让每一张照片重获新生【免费下载链接】upscayl 🆙 Upscayl - Free and Open Source AI Image Upscaler for Linux, MacOS and Windows built with Linux-First philosophy. 项目地址: https://gitcode.com/GitHub_Trending…...

编程新知 2026/3/28 21:56:00

Sinkhorn算法实战：用Python手把手教你解决最优传输问题（附完整代码）

Sinkhorn算法实战：用Python手把手教你解决最优传输问题（附完整代码） 最优传输理论在机器学习领域正掀起一场静默的革命。想象一下这样的场景：你需要将一组资源从A地运往B地，同时希望运输成本最低；或者你需要…...

编程新知 2026/3/28 21:51:59

Webcam-Pulse-Detector实战应用：构建远程健康监测系统

Webcam-Pulse-Detector实战应用：构建远程健康监测系统【免费下载链接】webcam-pulse-detector A python application that detects and highlights the heart-rate of an individual (using only their own webcam) in real-time. 项目地址: https://gitcode.com…...