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

css的简单问题

news 2026/2/10 22:38:21

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

LLM基础1_语言模型如何处理文本

基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器理解词嵌入：给词语画"…...

编程新知 2025/9/25 5:16:24

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...

编程新知 2026/1/26 12:37:40

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录前言操作系统与驱动程序是什么，为什么怎么做 system call 用户操作接口总结前言日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/2/6 5:39:10

数据结构：递归的种类（Types of Recursion）

目录尾递归（Tail Recursion） 什么是 Loop（循环）？ 复杂度分析头递归（Head Recursion） 树形递归（Tree Recursion） 线性递归（Linear Recursion）…...

编程新知 2026/2/7 2:25:07

python打卡day49@浙大疏锦行

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...

编程新知 2026/1/13 23:29:26

react-pdf（pdfjs-dist）如何兼容老浏览器（chrome 49）

之前都是使用react-pdf来渲染pdf文件，这次有个需求是要兼容xp环境，xp上chrome最高支持到49，虽然说iframe或者embed都可以实现预览pdf，但为了后续的定制化需求，还是需要使用js库来渲染。 chrome 49测试环境能用的测试…...

编程新知 2026/2/9 6:18:09

【自然语言处理】大模型时代的数据标注（主动学习）

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构D 实验设计E 个人总结 A 论文出处论文题目：FreeAL: Towards Human-Free Active Learning in the Era of Large Language Models发表情况：2023-EMNLP作者单位：浙江大…...

编程新知 2026/2/5 3:53:34

node 进程管理工具 pm2 的详细说明 —— 一步一步配置 Ubuntu Server 的 NodeJS 服务器详细实录 7

前言我以 Ubuntu Server 打造的 NodeJS 服务器为主题的系列文章，经过五篇博客，我们顺利的安装了 ubuntu server 服务器，并且配置好了 ssh 免密登录服务器，安装好了服务器常用软件安装, 配置好了 zsh 和 vim 以及通过 NVM 安装…...

编程新知 2026/2/9 22:57:36