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

css- 4

news 2025/10/19 1:49:20

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

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

SpringTask-03.入门案例

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/10/14 11:18:04

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/10/15 14:39:11

OPenCV CUDA模块图像处理-----对图像执行均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在 GPU 上对图像执行均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。该函数将输入图像中的…...

编程新知 2025/9/23 18:21:19

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/10/18 0:42:26

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录正整数到Excel编号之间的转换正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

【Linux】自动化构建-Make/Makefile

前言上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...

编程新知 2025/10/16 17:04:08

Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python，或者java 的大型项目中，都会涉及到自身平台微服务之间的相互调用，以及和第三发平台的接口对接，那在python 中是怎么实现的呢？ 在 Python Web 开发中，FastAPI 和 Django 是两个重要但定位不…...

编程新知 2025/7/25 19:17:49

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文字内容个数不同的行内块元素水平排列无法对齐

相关文章：