深入解析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如何修复呢？…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...