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

css- 4

news 2026/3/27 11:06:39

1.浮动

1. 浮动最初用于实现文字环绕效果
2. 现在，浮动是主流的布局方式之一

1.1元素浮动之后的特点

元素浮动之后，称为浮动元素，具有如下特点：

1. 浮动元素脱离文档流
2. 多个浮动的元素会水平排列，一行放不下自动换行
3. 不论元素原来的显示模式是什么，设置成浮动之后，就是浮动元素，具有自己的显示特点：
① 水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
② 设置宽高、内外边距都没有问题（与行内区别）
③ 不会被父元素作为文本去处理（与行内块和行内区别）

文档流：文档流里的元素会按照顺序从上到小，从左到右排列。

1.2浮动元素产生的影响

1.2.1 对后面的元素的影响

后面兄弟元素会占据浮动元素原来的位置，可能造成位置的重叠，浮动元素显示在上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{margin-top: 20px;padding: 20px;border: 2px solid #eda;width: 600px;height: 400px;background: rgb(221, 240, 255);}.box{width: 150px;height: 120px;}.box1{background: #900;}.box2{background: #080;float: left;}.box3{width: 180px;background: #ff0;}</style>
</head>
<body><div class="me"><div class="box box1">三才洪。</div><div class="box box2">三才洪。</div><div class="box box3">三才洪。</div></div>
</body>
</html>

解决：

方案一：给紧邻这浮动元素的后面的兄弟元素设置 clear:both
方案二：兄弟元素要浮动都浮动，浮动元素不要跟不浮动的元素做兄弟

解决方案一：

 .box3{clear: both;width: 180px;background: #ff0;}

1.2.3对父元素的影响

子元素浮动之后，不能撑起父元素高度，造成高度塌陷

1.2.3.1解决对父元素的影响：

方案一：父元素设置固定高度
方案二：父元素设置浮动
方案三：父元素设置 overflow, 值只要不是 visible 都可以
方案四：给父元素添加个子元素，放在所有浮动元素的后面，该元素要求是块级元素，设置 clear:both
方案五：原理同方案四相同，使用伪元素给父元素添加子元素，设置 clear:both (推挤)

父元素::after {content: "";display: block;clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{margin-top: 20px;padding: 20px;border: 2px solid #eda;/* width: 600px;height: 400px; */background: rgb(221, 240, 255);}.me::after{content: "";display: block;clear: both;}/* 这种写法是为了兼容老版本的浏览器 */.me:after{content: "";display: block;clear: both;}.box{width: 150px;height: 120px;}.box1{background: #900;float: left;}.box2{background: #080;float: left;}.box3{clear: both;width: 180px;background: #ff0;float: left;}</style>
</head>
<body><div class="me"><div class="box box1">三才洪。</div><div class="box box2">三才洪。</div><div class="box box3">三才洪。</div></div>
</body>
</html>

1.3 浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	left、right、none
clear	清除浮动的影响	left、right、both

2.行内元素或行内块元素在布局中的特点

父元素设置的文本属性可以作用于行内元素和行内块元素

2.1行内块居中

让行内块元素在父元素中水平居中

给父元素设置 text-align:center

让行内块元素在父元素中纵向居中

1. 给父元素设置行高
2. 给行内块元素设置 vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{width: 600px;height: 400px;border: 2px solid #a36060;text-align: center;line-height: 400px;}.box{display: inline-block;vertical-align: middle;/* 行高要与子元素一致才可以将文字居中 */line-height: 80px;width: 100px;height: 80px;background: #900;}</style>
</head>
<body><div class="me"><div class="box box01">行内块</div><!-- <div class="box box02"></div><div class="box box03"></div> --></div>
</body>
</html>

2.2 行内元素或行内块元素之间的空白问题

2.2.1元素之间的空白（左右）

产生原因：

代码中，元素之间的换行

2.2.2解决方案：

方案一：代码中，元素之间不写换行（不推荐）
方案二：父元素设置字体大小为0；如果行内块元素中还有文字单独设置字体大小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.me{width: 600px;height: 400px;border: 2px solid #a36060;font-size: 0;}.box{display: inline-block;vertical-align: middle;font-size: 16px;width: 100px;height: 80px;background: #900;}.boxx{display: inline;width: 100px;height: 80px;background: blue;font-size: 16px;}.boxxx{display: inline;width: 100px;height: 80px;background: palegreen;font-size: 16px;}</style>
</head>
<body><div class="me"><div class="box box01">行内块</div><div class="boxx box02">行内1</div><div class="boxxx box03">行内2</div></div>
</body>
</html>

2.2.3底部的空白（图片的幽灵空白）

产生原因：

行内块元素与文字基线对齐，底部的空白就是基线与底线的距离

解放方案：

方案一：父元素设置字体大小 0
方案二：给行内块元素设置 vertical-align:bottom (推荐)
方案三：经典解决方案，针对图片，将图片设置成块级元素

2.2.4文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

1. 如果行内块元素中没有文字，该元素的底部与基线对齐
2. 如果行内块元素中有一行文字，文字与外面的基线对齐，进而影响行内块元素的位置
3. 如果行内块元素中有多行文字，最后一行文字与外面的基线对齐，进而影响行内块元素的位置

解决方案

给行内块元素设置 vertical-align, 值不是 baseline 都可以解决问题

当出现为了换行导致元素掉下来时可以设置

 .last{margin-right: 0;}

css- 4

1.浮动 1. 浮动最初用于实现文字环绕效果 2. 现在，浮动是主流的布局方式之一 1.1元素浮动之后的特点元素浮动之后，称为浮动元素，具有如下特点： 1. 浮动元素脱离文档流 2. 多个浮动的元素会水平排列，一行放不下自动换…...

编程日记 2024/4/8 5:02:08

22.括号生成

题目描述数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且有效的括号组合。示例 1： 输入：n 3 输出：[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2： 输入…...

编程日记 2024/4/8 5:00:05

JAVA八股--redis

JAVA八股--redis 如何保证Redis和数据库数据一致性redisson实现的分布式锁的主从一致性Redis脑裂现象及解决方案介绍I/O多路复用模型undo log 和 redo log（没掌握MyISAM 和 InnoDB 有什么区别？ 如何保证Redis和数据库数据一致性关于异步通知中消息队列…...

编程日记 2024/4/8 4:58:04

[图像处理] MFC载入图片并绘制ROI矩形

上一篇： [图像处理] MFC载入图片并进行二值化处理和灰度处理及其效果显示文章目录前言完整代码重要代码效果前言上一篇实现了MFC通过Picture控件载入图片。这一篇实现ROI功能的第一部分，在Picture控件中，通过鼠标拖拽画出一个矩形。完…...

编程日记 2024/4/8 4:57:03

Godot 4 教程《勇者传说》依赖注入学习笔记(0):环境配置

文章目录前言相关地址环境配置初始化环境配置文件夹结构代码结构代码运行资源文件导入像素风格窗口环境设置背景设置,Tileap使用自动TileMap 人物场景动画节点添加站立节点添加移动动画添加通过依赖注入获取Godot的全局属性项目声明当前项目逻辑讲解角色下降添加代码位置问…...

编程日记 2024/4/8 4:56:01

强行让Java和Go对比一波[持续更新]

概述很多Java开发如果想转Golang的话，比较让Java开发蛋疼的第一是语法，第二是一些思想和设计哲学的Gap，所以我这儿强行整理一波Java和Golang的对比，但是由于GO和Java在很多方面都有不同的设计，所以这些对比的项可以更…...

编程日记 2024/4/8 4:55:00

理解七层网络协议

osi体系结构上三路（管数据） 应用层通过http等，把传输的格式，数据打包处理网络应用。直接为端用户服务，提供各类应用过程的接口和用户接口。例如：HTTP、Tenlent、FTP、SMTP、NFS等。基于TCP的FTP、HTTP…...

编程日记 2024/4/8 4:52:58

网络协议——HTTP协议

目录编辑一，HTTP协议基本认识二，认识URL 三，http协议的格式 1，发送格式 2，回应格式四，服务端代码五，http报文细节 1，Post与Get方法 2，Content_lenth 3&…...

编程日记 2024/4/8 4:49:55

八股面试——数据库——索引

索引的概念 B树的概念： 索引的作用聚簇索引与非聚簇索引聚簇索引就是主键值，在B树上，通过主键大小（数据在B树叶子节点按主键顺序排序）寻找对应的叶子节点，叶子节点保存的一整条记录。非聚簇索引&#x…...

编程日记 2024/4/8 4:48:54

【二分查找】Leetcode 二分查找

题目解析二分查找在数组有序可以使用，也可以在数组无序的时候使用（只要数组中的一些规律适用于二分即可） 704. 二分查找算法讲解当left > right的时候，我们循环结束，但是当left和right缩成一个点的时候&#x…...

编程日记 2024/4/8 4:43:49

Nginx 进入目录: C:\nginx-1.20.2\nginx-1.20.2 start nginx 开始 nginx -s stop 停止 nginx -s quit 退出CSS 通过标签去写css 循环展示数据 JS 点击时执行事件 Django 配置media 在seetings里面修改 STATIC_URL /static/ MEDIA_URL /upload/ MEDIA_ROOT os.pat…...

编程日记 2024/4/8 4:37:44

C语言关于随机数知识点的总结

在C语言中，随机数的生成通常依赖于特定的库函数，最常用的是 <stdlib.h> 头文件中的 rand() 函数。以下是对随机数知识点的总结、举例和分析： 随机数知识点总结 1.随机数种子：rand() 函数生成的随机数是伪随机数&#xff0…...

编程日记 2024/4/8 4:34:41

网络应用层和传输层

网络中有很多协议这些协议的不同导致了分层这一现象，不同层的主要功能不一样。应用层：应用程序。数据具体如何使用传输层：关注起点和终点网络层：关注路径规划数据链路层：关注相邻节点的转发物理层&#xff1…...

编程日记 2024/4/8 4:32:39

Vue3：优化-从响应式数据中获取纯数据

一、情景说明我们知道，Vue3中，创建变量时，常用ref、reactive来包裹，这样，这个变量就是响应式数据然而，有时候，我们只需要纯数据例如，我们在调用后端接口的时候，我们只…...

编程日记 2024/4/8 4:30:37

C#.手术麻醉系统源码手麻系统如何与医院信息系统进行集成？

C#.手术麻醉系统源码手麻系统如何与医院信息系统进行集成？ 手术麻醉系统与医院信息系统的集成是一个关键步骤，它有助于实现信息的共享和流程的协同，从而提高医疗服务的效率和质量。手麻系统与lis、his、pacs等系统的对接是医院信息化建设的重…...

编程日记 2024/4/8 4:29:36

学习CSS Flexbox 玩flexboxfroggy flexboxfroggy1-24关详解

欢迎来到Flexbox Froggy，这是一个通过编写CSS代码来帮助Froggy和朋友的游戏! justify-content 和 align-items 是两个用于控制 CSS Flexbox 布局的属性。 justify-content：该属性用于控制 Flexbox 容器中子项目在主轴（水平方向）…...

编程日记 2024/4/8 4:21:29

springboot项目如何配置跨域？

在Spring Boot项目中配置跨域（CORS，Cross-Origin Resource Sharing）主要是为了允许来自不同源（不同的协议、域名或端口）的前端应用能够访问后端API。Spring Boot提供了多种方式来配置跨域支持。 1. 使用CrossOrigin注…...

编程日记 2024/4/8 4:20:28

实现第一个动态链接库游戏插件成功在主程序中运行 dll 中定义的类

devc 5.11编译环境 dll编译环境设置参考 Dev c C语言实现第一个 dll 动态链接库创建与调用-CSDN博客插件 DLL代码和主程序代码如下注意 dll 代码中的class 类名需要和主程序相同其中使用了函数指针和强制类型转换函数指针教程参考以动态库链接库 .dll 探索结构体…...

编程日记 2024/4/8 4:19:27

算法第三十九天-验证二叉树的前序序列化

验证二叉树的前序序列化题目要求解题思路方法一：栈栈的思路是「自底向上」的想法。下面要结合本题是「前序遍历」这个重要特点。我们知道「前序遍历」是按照「根节点-左子树-右子树」的顺序遍历的，只有当根节点的所有左子树遍历完成之后&#xf…...

编程日记 2024/4/8 4:17:24

Rust---复合数据类型之字符串与切片（2）

目录字符串操作删除 (Delete)连接 (Concatenate)字符串转义前情回顾: Rust—复合数据类型之字符串（1）字符串操作删除 (Delete) 删除方法仅适用于 String 类型，分别是： pop()，remove()，truncate()，clear()，此外还有drain() 方法。 pop 方法：pop() 方法返回一个 O…...

编程日记 2024/4/8 4:13:21

如何突破分子观察瓶颈？PyMOL开源版的3大核心优势

如何突破分子观察瓶颈？PyMOL开源版的3大核心优势【免费下载链接】pymol-open-source Open-source foundation of the user-sponsored PyMOL molecular visualization system. 项目地址: https://gitcode.com/gh_mirrors/py/pymol-open-source PyMOL开源版作…...

编程新知 2026/3/27 10:29:45

阅读书源校验工具verifyBookSource v2.0避坑指南：如何避免无效书源和重复书源

verifyBookSource v2.0 高效书源管理实战：从校验到优化的完整指南在数字阅读日益普及的今天，一个优质的书源库能显著提升阅读体验。然而，面对海量书源，如何快速筛选有效内容、剔除重复资源，成为许多阅读爱好者的痛点。…...

编程新知 2026/3/27 10:09:28

4大场景解决散热难题：开源散热管理工具全攻略

4大场景解决散热难题：开源散热管理工具全攻略【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanCont…...

编程新知 2026/3/27 10:01:23

ChatGLM3-6B新手必看：断网可用的本地智能对话解决方案

ChatGLM3-6B新手必看：断网可用的本地智能对话解决方案 1. 引言：为什么你需要一个本地AI助手？ 想象一下，你正在处理一份敏感的客户合同，需要AI帮你分析条款；或者你在一个没有稳定网络的环境里，…...

编程新知 2026/3/27 9:25:02

【2026最新】DirectX Repair修复工具，轻松解决 DirectX 报错、DLL 缺失与游戏闪退问题

游戏打不开、软件报错？别急着重装系统，可能是DirectX和DLL在作怪 “缺少d3dx9_43.dll”、“无法找到X3DAudio1_7.dll”、“应用程序无法启动。。。。。需要的是一个DirectX修复工具。玩游戏或运行 3D 图形软件时，DirectX 报错是一类常见但又…...

编程新知 2026/3/27 8:54:46

音乐解密技术探秘：从加密困境到跨平台解决方案

音乐解密技术探秘：从加密困境到跨平台解决方案【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https://gitc…...

编程新知 2026/3/27 8:42:38

Gemma-3-12b-it实战教程：极简UI背后隐藏的12B模型内存映射优化策略

Gemma-3-12b-it实战教程：极简UI背后隐藏的12B模型内存映射优化策略 1. 项目概述 Gemma-3-12b-it是一款基于Google Gemma-3-12b-it大模型开发的本地多模态交互工具。这款工具针对12B大模型进行了全维度的CUDA性能优化，支持图片上传和文本提问的流式生成…...

编程新知 2026/3/27 7:48:15

告别卡顿闪烁！在Cesium 1.134中集成SOG格式，让400万高斯秒级加载

突破性能瓶颈：Cesium 1.134集成SOG格式实现400万高斯秒级渲染在三维地理空间可视化领域，Cesium一直是开发者构建高精度场景的首选引擎。但当项目涉及数百万级高斯泼溅数据时，传统加载方式往往导致令人崩溃的卡顿和视角移动时的闪烁问题。最近…...

编程新知 2026/3/27 5:40:55

终极指南：如何使用Cat-Catch浏览器资源嗅探工具轻松捕获网络媒体资源

终极指南：如何使用Cat-Catch浏览器资源嗅探工具轻松捕获网络媒体资源【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch Cat-Catch（猫抓）是一款强大的浏览器资源嗅探扩…...

编程新知 2026/3/27 5:14:44

从逻辑门到CPU：计算机工作原理详解

戏说CPU的工作原理：从逻辑门到计算系统1. 计算系统的基本构建单元1.1 逻辑门的物理实现计算系统最基本的构建单元是逻辑门，它们可以通过简单的物理实体来演示。以三名士兵为例，我们可以构建最基本的逻辑运算单元：输入单元&#xf…...

编程新知 2026/3/27 4:03:39

1.浮动

1.1元素浮动之后的特点

1.2浮动元素产生的影响

1.2.1 对后面的元素的影响

1.2.3对父元素的影响

1.2.3.1解决对父元素的影响：

1.3 浮动相关的 CSS 属性

2.行内元素或行内块元素在布局中的特点

2.1行内块居中

2.2 行内元素或行内块元素之间的空白问题

2.2.1元素之间的空白（左右）

2.2.2解决方案：

2.2.3底部的空白（图片的幽灵空白）

2.2.4文字内容个数不同的行内块元素水平排列无法对齐

相关文章：