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

前端知识库Html5和CSS3

news 2025/11/9 2:36:07

1、常见的水平垂直居中实现方案

最简单的方案是flex布局

.container{display: flex;align-items: center;justify-content: center;
}

绝对定位配合margin:auto(一定要给.son宽高)

.father {position: relative;height: 300px;
}
.son {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 50px;height: 50px;
}

绝对定位配合transform实现

.father {position: relative;
}
.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

2、行内元素，块级元素，空(void)元素(即没有内容的HTML元素)

块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote

行内元素: a、b、span、img、input、strong、select、label、em、button、textarea

空元素: br、meta、hr、link、input、img

3、BFC元素

我们在页面布局的时候，经常出现以下情况：

  • 这个元素高度怎么没了？
  • 这两栏布局怎么没法自适应？
  • 这两个元素的间距怎么有点奇怪的样子？
  • ......
原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到 BFC概念

BFC（Block Formatting Context）

即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

如何生成一个BFC元素呢

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden(常用)
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

常用于以下3个场景

  • 防止margin重叠(塌陷)
  • 自适应多栏布局
  • 清除内部浮动

防止margin重叠（塌陷）

正常情况下，如果没有.container容器那么两p间隔是100px，这就是margin重叠了，解决方案就是给其中一个p套上一个BFC(div加上overflow: hidden;)，那么两p间隔是200px了

<style>.container {overflow: hidden;// 新的BFC}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p ><div class="container"><p>Hehe</p ></div>
</body>

清除内部浮动

正常情况下，由于浮动元素的存在.par是不会有高度的，可以给他加上overflow: hidden;变为BFC，就会计算浮动元素的高度了

<style>.par {border: 5px solid #fcc;width: 300px;overflow: hidden;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

自适应多栏布局

正常情况下.aside会浮动并且压在.main上，可以根据BFC的区域不会与浮动盒子重叠的特性，把.main变为BFC，这样.main就实现了宽带自适应了，并且实现左右两栏布局了。

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;overflow: hidden;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

相关文章：

前端知识库Html5和CSS3

1、常见的水平垂直居中实现方案 最简单的方案是flex布局 .container{display: flex;align-items: center;justify-content: center; }绝对定位配合margin:auto(一定要给.son宽高) .father {position: relative;height: 300px; } .son {position: absolute;top: 0;right: 0;b…...

编程日记 2023/12/13 0:03:50

智能优化算法应用：基于鸡群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于鸡群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于鸡群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.鸡群算法4.实验参数设定5.算法结果6.参考文献7.MA…...

编程日记 2023/12/13 0:01:48

Apollo配置发布原理解析

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…...

编程日记 2023/12/12 23:58:46

TrustGeo论文问题理解

1、网络空间测绘中&#xff0c;如何理解地标&#xff1f; 在网络空间测绘中&#xff0c;地标可以理解为在互联网空间中具有明显特征和稳定性的实体&#xff0c;它们可以作为网络空间的基准点&#xff0c;用于定位和标识其他网络实体。地标通常是在网络空间中具有较高价值和影响…...

编程日记 2023/12/12 23:56:44

子查询在SQL中的应用和实践

作者&#xff1a;CSDN-川川菜鸟 在SQL中&#xff0c;子查询是一种强大的工具&#xff0c;用于解决复杂的数据查询问题。本文将深入探讨子查询的概念、类型、规则&#xff0c;并通过具体案例展示其在实际应用中的用途。 文章目录 子查询概念子查询的类型子查询的规则实际案例分析…...

编程日记 2023/12/12 23:55:43

C# Socket通信从入门到精通（14）——多个异步UDP客户端C#代码实现

前言： 在之前的文章C# Socket通信从入门到精通（13）——单个异步UDP客户端C#代码实现我介绍了单个异步Udp客户端的c#代码实现，但是有的时候，我们需要连接多个服务器，并且对于每个服务器，我们都有一些比如异步发送、异步接收的操作，那么这时候我们使用之前单个异步Udp客…...

编程日记 2023/12/12 23:52:41

【教3妹学编程-算法题】需要添加的硬币的最小数量

3妹&#xff1a;2哥2哥&#xff0c;你有没有看到新闻&#xff0c; 有人中了2.2亿彩票大奖&#xff01; 2哥 : 看到了&#xff0c;2.2亿啊&#xff0c; 一生一世也花不完。 3妹&#xff1a;为啥我就中不了呢&#xff0c;不开心呀不开心。 2哥 : 得了吧&#xff0c;你又不买彩票&…...

编程日记 2023/12/12 23:51:40

【异常解决】SpringBoot + Maven 在 idea 下启动报错 Unable to start embedded Tomcat（已解决）

Unable to start embedded Tomcat&#xff08;已解决&#xff09; 一、背景介绍二、原因分析2.1 网络上整理2.2 其他原因 三、解决方案 一、背景介绍 spring boot(v2.5.14) maven idea 启动项目 之前项目一直启动的好好的&#xff0c;都能正常运行。重启的时候突然就不能启…...

编程日记 2023/12/12 23:49:38

做题总结 707. 设计链表

做题总结 707. 设计链表 leetcode中单链表节点的默认定义我的尝试正确运行的代码&#xff08;java&#xff09; leetcode中单链表节点的默认定义 class ListNode {int val;ListNode next;//无参public ListNode() {}//有参:1public ListNode(int val) {this.val val;}//有参:…...

编程日记 2023/12/12 23:48:38

django实现--视图的使用

在 Django 中&#xff0c;视图是处理 Web 请求并返回 Web 响应的组件。Django 提供了两种主要类型的视图&#xff1a;基于函数的视图和基于类的视图。下面详细解释基于类的视图的实现方法、使用以及与基于函数的视图的异同。 基于类的视图的实现方法 继承 Django 的类视图基类…...

编程日记 2023/12/12 23:46:36

【dirty cred】fileManager [XXX]

前言 这应该不是个题&#xff0c;应该是佬为了测试 dirty cred 利用写的。但是环境有问题&#xff0c;测试最多只能向文件中写入 1024MB 的数据。所以竞争窗口太短了&#xff0c;但是似乎替换 credential obj 又是成功的了。感觉是环境的问题。 漏洞分析与利用 一次任意释放…...

编程日记 2023/12/12 23:45:35

线程按顺序循环执行

不瞒大家说，这是之前参加阿里一面的手写编程题，平时不刷题，这个当时花的时间比较多，虽然最后用了很喽比方法写出来了，自己还是很不满意。下面实话也是看了其他大佬的思路，今天重新练了下。 假设有3个线程，依次打印A、B、C，按顺序循环打印100次。 这个其实是线程通信，…...

编程日记 2023/12/12 23:44:34

C# 使用异步委托获取线程返回值

写在前面 异步委托主要用于解决 ThreadPool.QueueUserWorkItem 没有提供获取线程执行完成后的返回值问题。异步委托只能在.Net Framework 框架下使用&#xff0c;.Net Core中会报平台错误&#xff0c;而且使用Task.Result来获取返回值&#xff0c;可以达成同样的目的&#xff…...

编程日记 2023/12/12 23:43:33

生鲜蔬果展示预约小程序作用是什么

线下生鲜蔬果店非常多&#xff0c;对商家来说主要以同城生意为主&#xff0c;而在互联网电商的发展下&#xff0c;更多的商家会选择搭建私域商城进行多渠道的销售卖货和拓展&#xff0c;当然除了直接卖货外&#xff0c;还有产品纯展示或预约订购等需求。 但无论哪种模式&#…...

编程日记 2023/12/12 23:41:31

【C++】类与对象（下）

本文目录 1. 再谈构造函数1.1 构造函数体赋值1.2 初始化列表1.3 explicit关键字 2. static成员2.1 概念2.2 特性 3. 友元3.1 友元函数3.2 友元类 4. 内部类5. 匿名对象6. 拷贝对象时的一些编译器优化7. 再次理解类和对象 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&am…...

编程日记 2023/12/12 23:40:30

一文了解 Go 方法

前言 在前面的 一文熟悉 Go 函数 文章中&#xff0c;介绍了 Go 函数的声明&#xff0c;函数的几种形式如匿名函数、闭包、基于函数的自定义类型和函数参数详解等&#xff0c;而本文将对方法进行介绍&#xff0c;方法的本质就是函数&#xff0c;介绍方法的同时也会顺带对比其与函…...

编程日记 2023/12/12 23:38:29

【Docker】vxlan的原理与实验

VXLAN&#xff08;Virtual eXtensible Local Area Network&#xff0c;虚拟可扩展局域网&#xff09;&#xff0c;是一种虚拟化隧道通信技术。它是一种Overlay&#xff08;覆盖网络&#xff09;技术&#xff0c;通过三层的网络来搭建虚拟的二层网络。 VXLAN介绍 VXLAN是在底层…...

编程日记 2023/12/12 23:37:28

广度（宽度）优先搜素——层层递进

分析算法及题目 完整代码实现 广度优先搜索&#xff08;Breadth-First Search&#xff0c;BFS&#xff09;是一种图和树的遍历算法&#xff0c;与深度优先搜索相对应。BFS从起始节点开始&#xff0c;首先访问起始节点&#xff0c;然后逐层地访问其邻居节点&#xff0c;直到达到…...

编程日记 2023/12/12 23:34:25

设计模式——建造者模式（创建型）

引言 生成器模式是一种创建型设计模式&#xff0c; 使你能够分步骤创建复杂对象。 该模式允许你使用相同的创建代码生成不同类型和形式的对象。 问题 假设有这样一个复杂对象&#xff0c; 在对其进行构造时需要对诸多成员变量和嵌套对象进行繁复的初始化工作。 这些初始化代码…...

编程日记 2023/12/12 23:32:24

​getopt --- C 风格的命令行选项解析器​

源代码: Lib/getopt.py 备注 getopt 模块是一个命令行选项解析器&#xff0c;其 API 设计会让 C getopt() 函数的用户感到熟悉。 不熟悉 C getopt() 函数或者希望写更少代码并获得更完善帮助和错误消息的用户应当考虑改用 argparse 模块。 此模块可协助脚本解析 sys.argv 中的…...

编程日记 2023/12/12 23:30:22

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/9 1:32:12

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/11/7 11:24:50

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/10/25 21:41:56

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/10/23 23:35:01

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/11/7 19:05:24