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

前端知识库Html5和CSS3

news 2026/4/5 21:24:41

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

如何彻底关闭Elasticsearch 7.x的安全警告提示（内网开发必备）

彻底关闭Elasticsearch 7.x安全警告的实战指南 每次启动Elasticsearch时&#xff0c;控制台不断刷新的安全警告是否让你感到烦躁&#xff1f;特别是在内网开发环境中&#xff0c;这些红色警告既不影响功能又无法忽略。本文将带你深入理解警告产生的机制&#xff0c;并提供三种不…...

编程新知 2026/4/5 20:44:46

【RAG】【vector_stores002】Google AlloyDB for PostgreSQL 向量存储完整案例

本案例演示如何使用 LlamaIndex 与 Google AlloyDB for PostgreSQL 集成&#xff0c;实现向量存储和检索功能&#xff0c;用于构建基于文档的问答系统。1. 案例目标本案例的主要目标是&#xff1a;设置 AlloyDB 向量存储&#xff1a;配置 LlamaIndex 以使用 Google AlloyDB for…...

编程新知 2026/4/5 20:40:44

python zipfile

# Python 的 zipfile&#xff1a;不只是打包文件那么简单 如果你用过压缩软件&#xff0c;大概知道 ZIP 格式是用来把多个文件打包成一个&#xff0c;顺便还能压缩节省空间。Python 里的 zipfile 模块就是干这个的&#xff0c;但它的能力远不止“打包”这么简单。 它到底是什么…...

编程新知 2026/4/5 19:53:34

基于微电网的小信号建模下垂控制稳定性的根轨迹分析

基于小信号建模的下垂控制稳定分析&#xff0c;文章完全浮现。 关键词&#xff1a;微电网&#xff0c;下垂控制&#xff0c;小信号模型&#xff0c;根轨迹&#xff0c;稳定性。一、程序核心目标 本程序通过小信号建模方法&#xff0c;构建微电网下垂控制的数学模型&#xff0c;…...

编程新知 2026/4/5 19:10:59

YimMenu创新安全框架：GTA5游戏增强与防护指南

YimMenu创新安全框架&#xff1a;GTA5游戏增强与防护指南 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

编程新知 2026/4/5 18:52:39

vant-weapp版本迁移检查清单

vant-weapp版本迁移检查清单 【免费下载链接】vant-weapp 轻量、可靠的小程序 UI 组件库 项目地址: https://gitcode.com/gh_mirrors/va/vant-weapp 准备阶段 创建升级分支&#xff1a;git checkout -b upgrade-vant 备份核心文件&#xff1a;app.json, project.config.…...

编程新知 2026/4/5 18:07:42

春联生成模型-中文-base效果展示：支持‘嵌名联’——将用户姓名自然融入上下联

春联生成模型-中文-base效果展示&#xff1a;支持嵌名联——将用户姓名自然融入上下联 1. 模型效果惊艳展示 春联生成模型-中文-base带来了传统节日文化的智能创新体验。这个基于达摩院AliceMind大模型的专项应用&#xff0c;能够通过简单的两字祝福词&#xff0c;生成符合传…...

编程新知 2026/4/5 18:03:41

5分钟掌握跨平台资源下载：res-downloader智能下载器终极指南

5分钟掌握跨平台资源下载&#xff1a;res-downloader智能下载器终极指南 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是…...

编程新知 2026/4/5 18:01:41

量子纠缠与量子网络技术解析

3个关于诺贝尔物理学奖的问题与Antia Lamas-Linares的对话 某机构量子通信项目负责人谈及诺贝尔奖得主对她所在领域的影响。 作者&#xff1a;Larry Hardesty 2022年10月12日 5分钟阅读 上周&#xff0c;瑞典皇家科学院宣布&#xff0c;约翰克劳泽、阿兰阿斯佩和安东蔡林格因“…...

编程新知 2026/4/5 17:33:30

互联网时代出现过的电脑病毒之“小球病毒”也叫“乒乓病毒”的电脑和安卓手机上出现过的病毒“乒乓病毒”简介

&#xff08;转发需官方授权&#xff09; 互联网时代出现过的电脑病毒之“小球病毒”也叫“乒乓病毒”的电脑和安卓手机上出现过的病毒“乒乓病毒”简介 1989年4月&#xff0c;西南铝厂一台正在工作的计算机屏幕上突然跳出一个小方块。 ​​​1989年4月&#xff0c;西南铝厂一…...

编程新知 2026/4/5 17:11:16