深入解析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如何修复呢？…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
Ubuntu Cursor升级成v1.0
0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...