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

css- 4

news 文章来源：https://blog.csdn.net/weixin_59868842/article/details/137246457 2024/10/26 6:35:08

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

iOS 应用内网络请求设置代理

主要通过URLSessionConfiguration 的connectionProxyDictionary 属性为了方便其他同学使用，我们可以通过界面来进行设定（是否开启代理、服务端、端口），从而达到类似系统上的设定具体链接参考：为 iOS 网络请求设置代理…...

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

什么是MariaDB

2024年4月6日，周六晚上今晚在Debian12上安装mysql时，运行后却发现是MariaDB MariaDB是一个开源的关系型数据库管理系统（RDBMS），它是MySQL的一个分支和替代品。MariaDB由MySQL的原始开发者之一Michael "Monty&qu…...

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

【面试八股总结】传输控制协议TCP（三）

参考资料 ：小林Coding、阿秀、代码随想录一、TCP拥塞控制⭐ 1. 慢启动 – Slow Start 慢启动是指TCP连接刚建立，一点一点地提速，试探一下网络的承受能力，以免直接扰乱了网络通道的秩序。慢启动算法： 初始拥塞窗口…...

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

今年过去了多少天？（switch）

//今年已经过去了几天？ #include <stdio.h> int monthday(int year,int month){switch(month){case 1:return 31;case 2:if ((year % 4 0 && year % 100 ! 0)||year % 400 0){return 29;}else{return 28;}break;case 3:return 31;case 4:return 30;…...

编程日记 2024/4/8 4:08:16

提升团队工程交付能力，从“看见”工程活动和研发模式开始

作者：张裕、雅纯理想中的研发团队应当具有以下特征： 总是工作在最高优先级的事项上理想的研发团队能够识别并始终集中精力在当前最紧迫和最有价值的任务上。这需要团队具备出色的项目管理能力和决策能力，以便能够正确评估优先级&#xff0…...

编程日记 2024/4/8 4:06:14

前端学习之DOM编程案例：全选反选案例

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>全选反选</title> </head> <body><input type"checkbox" id"all">全选<ul><li><…...

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

golang map

1.底层实现 2.如何解决hash冲突 3.扩容机制 4.无序 5.非线程安全 6.不可寻址 runtime/map.go 1.底层实现底层基于hash表实现，实现有2个结构体hmap，bmap，map由若干个桶存储，每个桶存8个元素，使用链地址解决hash冲突 …...

编程日记 2024/4/8 4:02:11

设计模式：享元模式案例

让我们以游戏开发中的棋类游戏（例如国际象棋）为例来展示享元模式的代码实现。在这个例子中，棋子的类型是内部状态，而棋子的位置是外部状态。 Java 代码示例 import java.util.HashMap; import java.util.Map;// 享元接口 interf…...

编程日记 2024/4/8 3:59:07

pandas(day5)

一. 检测重复值 1.1 检测 data pd.read_csv("./teacher/订单数据.csv")检测行与行之前是否有重复值 data.drop_duplicates()检测列是否有重复值出现， keep first 从前往后判定 ， last是从后往前判定data.drop_duplicates(subset["产…...

编程日记 2024/4/8 3:57:05

如何注册midjourney账号

注册Midjourney账号比较简单，准备好上网工具，进入官网 Midjourney访问地址： https://www.midjourney.com/ 目前没有免费使用额度了，会员最低 10 美元/月，一般建议使用30美元/月的订阅方案。了解如何订阅可以查看订阅…...

编程日记 2024/4/8 3:55:03

品牌网站设计制作哪家正规/seo推广优化

数字图像的诞生并不是与计算机的发展完全相关，第一次世界大战结束后的第二年，数字图像被发明并用于报纸行业。为了当时传输此图像，发明了Bartlane电缆图像传输系统。主要是为了从英国伦敦连接到美国纽约。第一张数字图像的传输是在1921年实现…...

编程日记 2024/10/26 5:20:47

中国空间站完成了多少/厦门人才网个人会员登录

导读：程序运行过程中，有些数据被莫名修改了，在哪里修改的？又是怎么修改的？这个代码我只想知道是否运行过，或者运行了多少次，但是不想让程序停下来，或者仅打印调试信息，怎…...

编程日记 2024/10/26 4:27:18

网络营销的特点哪四个/长沙seo顾问

在 Windows XP 系统中，某些情况下可能会出现任务栏工作不正常的情况，比如：任务栏不显示正在运行的程序的图标，或者在任务栏上总是出现重复的图标。要解决这类问题，可以尝试如下方法：按下 CtrlAltDel 键&…...

编程日记 2024/10/26 4:17:14

做卡通的素材网站/学网络运营在哪里学比较好

近来在使用PHP进行结构式搜索的时候，发现获取到smiles无法进行查询操作，然后想到了转化为分子式的操作。主要是用在有机物。困难一：我在smiles 上利用正则匹配C,O。遇到了问题就是其他元素也有C字母，所以无法正确去掉C解决&#x…...

编程日记 2024/10/26 3:35:52

flash网站模板带后台/推广类软文案例

题目： 我是超链接题解： 区间内数量超过一半的数啊，那只能有一个，而且(r-l)/21这个数一定是ta，我们只需要查这个数出现的次数就好啦发现用STL真是方便极了！s表示一共不同的数个数，b[i]是这…...

编程日记 2024/10/26 2:18:13

网站的优化方案怎么写/互联网产品营销策划方案

网上的Json转实体类的方法很多，原生的，在线的(工具 | 穿破鞋)， 插件的，方法很多，各凭喜好！ 老早之前我做flutter的小demo的时候基本也是原生解析，没太多复杂的数据结构。现在想试试插件&#xf…...

编程日记 2024/10/26 0:18:09

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

相关文章：