深入解析css-浮动-学习小结
浮动设计初衷
类似报纸的布局栏，浮动是为了让图片嵌在文本流中，文本不会覆盖图片，但早期布局只有浮动，因此将浮动用于布局，后来才有了display:inline-block display: table flexbox和网格布局等
基本代码
<html><head><style>:root {box-sizing: border-box;}*,::before,:;after {box-sizing: inherit;}body {background-color: #eee;font-family: Helvetica, Arial, sans-serif;}body * + * {margin-top: 1.5em;}header {padding: 1em 1.5em;color: #fff;background-color: #0072b0;border-radius: .5em;margin-bottom: 1.5em;}.main {padding: 0 1.5em;background-color: #fff;border-radius: .5em;}</style></head><body><div class="container"><header><h1>TJH Special Club</h1></header><main class="main clearfix"><h2>Running Tips</h2><div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>Strength</h4><p>Strength train is important</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Cadence</h4><p>cadence</p></div></div><div class="media"><img class="media-image" src="shoes.png"><div class="media-body"><h4>Transform it</h4><p>I like running</p></div></div><div class="media"><img class="media-image" src="runner.png"><div class="media-body"><h4>concentrate mind</h4><p>focus your mind</p></div></div></div></main></div></body>
</html>
双容器模式
将内容放入两个嵌套的容器总，通过设置内容器的外边距，让内容器左右居中
body是外层容器 container是内层容器，对内层容器按双容器模式设置样式。发现内容器宽度达到最大宽度，然后左右居中
.container {max-width: 1080px;margin: 0 auto;}
是否有必要学习浮动
有 贴近老代码，且让图片被文本环绕，浮动是少数能实现的方案
容器折叠和清除浮动
容器折叠
将四个media浮动到容器左侧。发现四个media好像跑到了容器外边，是因为浮动元素的高度不会加给父元素上，不过这恰恰符合浮动的初衷：浮动是为了让图片被文本环绕，所以图片高度不会加给父元素
.media {float: left;width: 50%;padding: 1.5em;background-color: #eee;border-radius: .5em;}
这并不是我们想要的，我们想要四个媒体元素都被包含在容器元素中
方法1
使用clear属性。需要将一个元素放到容器元素内的末尾元素，这会让容器元素扩展到该元素的下方
通俗理解，一个浮动图片会被文字环绕，如果清除浮动，则该图片自成一行，不再被文字环绕
理解清除浮动
可以用伪元素取代额外增加的div元素，清除浮动可以叫clearfix
伪元素是一种特殊的选择器，以双冒号::开头，最常用的伪元素是::before ::after
.clearfix::after {display: block;content: " ";clear: both;}浮动元素外边距在容器内不会被折叠，而容器内非浮动元素外边距会被折叠（runnering tips紧贴最上边）
通过对容器内第一个和最后一个元素设置属性避免外边距折叠
.clearfix::before,.clearfix::after {display: table;content: " ";}
clear清除浮动只对块元素有效，所以可以用display: table但不能display:table-cell
相关文章：
深入解析css-浮动-学习小结
浮动设计初衷 类似报纸的布局栏，浮动是为了让图片嵌在文本流中，文本不会覆盖图片，但早期布局只有浮动，因此将浮动用于布局，后来才有了display:inline-block display: table flexbox和网格布局等 基本代码 <html&…...
【机器学习】机器学习的基本分类-无监督学习-K-Means聚类
K-Means 是一种基于划分的无监督学习算法，用于数据聚类任务，它通过迭代优化将数据分组为 k 个互斥的簇，使得每个簇内数据点的相似性最大化，而簇间的相似性最小化。它通过最小化簇内样本点到簇中心的距离平方和（即误差平…...
.NET for Android/iOS应用的如何在各自的系统运行
1. .NET for Android 上的运行机制 Android 应用使用 Mono 运行时 或 .NET 运行时 在 Android 设备上执行。具体过程如下： 编译过程： C# 代码编写：开发者使用 C# 编写业务逻辑代码。编译为 IL：C# 代码通过 Roslyn 编译器 转换为…...
访问django后台，提示CSRF验证失败. 请求被中断403
我的项目是在服务器部署添加ip后报错的这个错误是因为 Django 的 CSRF 验证机制检测到请求的 Origin 或 Referer 头部与受信任的域名不匹配。要解决此问题，可以将新域名添加到 Django 的 settings.py 中的 CSRF_TRUSTED_ORIGINS 设置里. 1.非debug模式看到的报错信…...
Scala的隐式转换（1）
package hfd //需求： //完成一个功能，让所有的字符串都能调用isPhone方法，来校验自己是不是一个手机号 object Test37_1 {class StrongString(val str: String) {//开始你的代码def isPhone(): Boolean {val reg "1[3-9]\\d{9}".…...
华为TaurusDB与GaussDB：信创改造的“降本提效”之路
近年来，信创（信息技术应用创新）已成为中国国央企数字化转型的关键词。伴随这一浪潮，众多企业面临一个迫切问题：如何在兼顾性能与成本的前提下，完成核心系统的迁移改造？华为TaurusDB和GaussDB的加…...
Linux网络编程---本地套接字
1.概述 本地套接字 1：作用:本地的进程间通信 2.有关系的进程间通信 3.没有关系的进程间的通信 本地套结字实现流程和网络套结字实现相似，一般采用tcp 二.通信流程 本地套结字通信的流程:1.服务器端:1.1 int fd socket(AF_UNIX/AF_LOCAL,…...
数据结构之四：堆和二叉树
堆的实现:SData/Heap/heap.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 树 树的概念 树：是一个非线性数据结构，它是由n（n>0）个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树，也就…...
【论文阅读】国际开源发展经验及其对我国开源创新体系建设的启示
作者：包云岗老师 包云岗老师是计算机体系结构方向的大牛，推动了体系结构方面的开源事业! 欢迎对本栏目感兴趣的人学习"一生一芯"~ 学习体会： 承接前文，唐志敏老师讲到已有的软硬件生态系统和开发成本制约了对新结构的探…...
redis击穿，穿透，雪崩以及解决方案
目录 击穿 解决方案一 解决方案二 穿透 解决方案 雪崩 解决方案 击穿 指的是单个key在缓存中查不到，去数据库查询，这样如果并发不大或者数据库数据量不大的话是没有什么问题的。 如果数据库数据量大并且是高并发的情况下那么就可能会造成数据库压…...
时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法
目录 基本介绍程序设计参考资料获取方式 基本介绍 时频转换 | Matlab格拉姆角和场Gramian angular summation field一维数据转二维图像方法 程序设计 clear clc % close all load x.mat % 导入数据 x x(1:5120); % 本数据只选择5120个点进行分析 fs 6400 ; % 数据采样频…...
qt QCryptographicHash详解
1、概述 QCryptographicHash是Qt框架中提供的一个类，用于实现加密散列函数，即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值，也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...
亚马逊云科技大语言模型加速OCR应用场景发展
目录 前言Amazon Bedrock关于OCR解决方案Amazon Bedrock进行OCR关键信息提取方案注册亚马逊账号API调用环境搭建 总结 前言 大语言模型是一种基于神经网络的自然语言处理技术，它能够学习和预测自然语言文本中的规律和模式，可以理解和生成自然语言的人工…...
什么是分库？分表？分库分表？
分库分表，是企业里面比较常见的针对高并发、数据量大的场景下的一种技术优化方案，所谓“分库分表”，根本不是一回事，而是三件事，他们要解决的问题也都不一样。 这三个事分别是“只分库不分表”、“只分表不分库”、以…...
QT 中 sqlite 数据库使用
一、前提 --pro文件添加sql模块QT core gui sql二、使用 说明 --用于与数据库建立连接QSqlDatabase--执行各种sql语句QSqlQuery--提供数据库特定的错误信息QSqlError查看qt支持的驱动 QStringList list QSqlDatabase::drivers();qDebug()<<list;连接 sqlite3 数据库 …...
不一样的CSS(4)--icon图标系列之svg
序言 上一节内容我们讲解了如何利用css去画一个五角星，其中包括了使用svg的方法，有些小伙伴们对svg的使用不是很了解，那么本节内容我们主要来讲一下，关于svg标签的的使用。 目录 序言一、svg的介绍二、安装SVG扩展插件三、SVG基…...
Level DB --- Cache
class Cache是Level DB中的重要的数据结构，它是一个LRU（Least Recently Used） Cache的实现。这里面的判断条件主要是内存大小（而不是存储entry的个数）。当内存达到上界，会释放不被使用的entry（存…...
学在西电录播课使用python下载，通过解析m3u8协议、多线程下载ts视频块以及ffmpeg合并
本文涵盖的内容仅供个人学习使用，如果侵犯学校权利，麻烦联系我删除。 初衷 研究生必修选逃， 期末复习怕漏过重点题目，但是看学在西电的录播回放课一卡一卡的，于是想在空余时间一个个下载下来，然后到时候就…...
Springboot3介绍
一、Springboot3简介: https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html?spmwolai.workspace.0.0.68b62306Q6jtTw#getting-started.introducing-spring-boot 无论使用XML、注解、Java配置类还是他们的混合用法，配置文件过于…...
Oracle 11G DataGuard GAP 修复过程（通过主库scn增备恢复）
Oracle 11G DataGuard GAP 修复 （通过主库scn增备恢复） 介绍 DG GAP 顾名思义就是：DG不同步，当备库不能接受到一个或多个主库的归档日志文件时候，就发生了 GAP。 那么，如果遇到GAP如何修复呢？…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
站群服务器的应用场景都有哪些？
站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...
人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent
安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集 描…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008：是version产品的大版本。 R006：是release产品特性版本。 C009：是通用版 B0014：是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存：1GB 以上 硬盘…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
DAY 45 超大力王爱学Python
来自超大力王的友情提示：在用tensordoard的时候一定一定要用绝对位置，例如：tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾： tensorboard的发展历史和原理tens…...