CSS笔记基础篇02——浮动、标准流、定位、CSS精灵、字体图标
黑马程序员视频地址：
前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70
https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70
目录
标准流
浮动（不推荐）
清除浮动
Flex布局（推荐）
初识
总结
创建flex容器 display:flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content
定位
分类
相对定位 relative
绝对定位 absolute
固定定位 fixed
堆叠层级 z-index
高级技巧
CSS精灵
字体图标
下载字体
使用字体
上传矢量图
CSS修饰属性
垂直对齐方式 vertical-align
过渡 transition
透明度 opacity
光标类型 cursor
网站搭建
项目目录
准备工作
SEO
favicon图标
标准流
浮动（不推荐）
清除浮动
方法三中的before伪元素是为了解决外边距塌陷问题
Flex布局（推荐）
初识
总结
创建flex容器 display:flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content
定位
分类
相对定位 relative
绝对定位 absolute
父相的原因：特点第三条，因为绝对定位会找最近的已经定位的父级
固定定位 fixed
堆叠层级 z-index
高级技巧
CSS精灵
字体图标
下载字体
iconfont-阿里巴巴矢量图标库
使用字体
上传矢量图
CSS修饰属性
垂直对齐方式 vertical-align
图片与文字不对齐原因：浏览器会把行内块、行内标签当成文字处理，统一按照基线对齐
过渡 transition
透明度 opacity
光标类型 cursor
网站搭建
项目目录
准备工作
SEO
favicon图标
相关文章：
CSS笔记基础篇02——浮动、标准流、定位、CSS精灵、字体图标
黑马程序员视频地址： 前端Web开发HTML5CSS3移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p70https://www.bilibili.com/video/BV1kM4y127Li?vd_source…...
C++ 面向对象（继承）
三、继承 3.1 继承的概念 基于一个已有的类 去重新定义一个新的类，这种方式我们叫做继承 关于继承的称呼 一个类B 继承来自 类 A 我们一般称呼 A类：父类 基类 B类: 子类 派生类 B继承自A A 派生了B 示例图的语法 class vehicle // 车类 {}class …...
Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测
Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测 目录 Top期刊算法！RIME-CNN-BiLSTM-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于RIME-CNN-BiLSTM-Attention、CNN-BiLSTM-Attention、R…...
数据结构 数组
1. 常见的错误 这里我要特别纠正一个“错误”。我在面试的时候，常常会问数组和链表的区别，很多人都回答说，“链表适合插入、删除，时间复杂度O(1)；数组适合查找，查找时间复杂度为O(1)”。 实际上ÿ…...
Kivy App开发之UX控件Bubble气泡
kivy提供了一个提示气泡的小控件Bubble，使用时可以指定气泡箭头的方向以及显示的图像，还可以作为容器添加其他小控件。 常用属性如下 属性说明orientation气泡内子项的排序方式，可设置为vertical或horizontal，默认horizontalarrow_pos箭头相对于气泡的位置，可设置为left_…...
从零到一：打造属于你的AI智能体，支持本地部署
国外卷智能体，国内也都在搞 AI Agent，2025 年也将成为 Agent 的元年。构建智能体主要两种情况，一个是工作流模式，另外一种是直接开发应用，接下来分别给大家介绍一下两种产品和构建过程。工作流模式，以 Coze…...
成就与远见：2024年技术与思维的升华
个人主页：chian-ocean 前言: 2025年1月17日，2024年博客之星年度评选——创作影响力评审的入围名单公布。我很荣幸能够跻身Top 300，虽然与顶尖博主仍有一定差距，但这也为我提供了更加明确的发展方向与指引。展望崭新的2025年&…...
深搜与回溯——扫地机器人问题解析与代码实现
一、题目内容 题目描述 扫地机器人在一个 nm 的网格中从左上角（1,1）开始清扫。它按照以下规则移动： 如果当前位置的右边（同一行，下一列）没有被清扫过，它会向右移动。 如果右边无法移动…...
【大数据2025】Hadoop 万字讲解
文章目录 一、大数据通识大数据诞生背景与基本概念大数据技术定义与特征大数据生态架构概述数据存储数据计算与易用性框架分布式协调服务和任务调度组件数仓架构流处理架构 二、HDFSHDFS 原理总结一、系统架构二、存储机制三、数据写入流程四、心跳机制与集群管理 安全模式&…...
win内核内部直接irp读取文件写入文件
#include <ntifs.h> #include <ntddk.h> #define TAG_NAME tlfF // FltF in reverse #define BUFFER_SIZE PAGE_SIZE // 驱动设备扩展结构 typedef struct _DEVICE_EXTENSION { PDEVICE_OBJECT DeviceObject; UNICODE_STRING DeviceName; UNICODE_STRIN…...
1. 基于图像的三维重建
1. 基于图像的三维重建 核心概念三维重建中深度图、点云的区别？深度图点云总结 深度图到点云还需要什么步骤？1. **获取相机内参**2. **生成相应的像素坐标**3. **计算三维坐标**4. **构建点云**5. **处理颜色信息（可选）**6. **去除…...
如何确保Python爬虫不违反微店规定
在使用Python爬虫获取微店商品详情时，确保爬虫行为符合微店的规定和相关法律法规至关重要。以下是一些关键步骤和注意事项，帮助你合法合规地使用爬虫技术： 一、遵守法律法规 在使用爬虫技术时，必须严格遵守《网络安全法》、《个…...
Spring Event和MQ的区别和使用场景
概念 Spring事件（Spring Event）是Spring框架的一项功能，它允许不同组件之间通过发布-订阅机制进行解耦的通信。 MQ一般是一个独立的中间件，它可以通过消息队列对消息进行传递和存储，生产者将消息发送到MQ，…...
SpringBoot：websocket 实现后端主动前端推送数据
简单说明下websocket实用场景。 实时通信领域：社交聊天弹幕多玩家游戏协同编辑股票基金实时报价体育实况更新视频会议/聊天基于位置的应用在线教育智能家居等需要高实时性的场景 一、服务端代码 pom.xml： <dependencies><dependency><…...
嵌入式硬件篇---PID控制
文章目录 前言第一部分：连续PID1.比例（Proportional，P）控制2.积分（Integral，I）控制3.微分（Derivative，D）控制4.PID的工作原理5..实质6.分析7.各种PID控制器P控…...
小程序获取微信运动步数
1、用户点击按钮，在小程序中触发getuserinfo方法，获取用户信息 <scroll-view class"scrollarea" scroll-y type"list"><view class"container"><button bind:tap"getLogin">获取</button&…...
5G 核心网 相关概念快速入门
在我们开始阅读3GPP协议来学习5G核心网之前， 不妨来看看我之前整理的PPT，快速学习核心网相关概念， 以及5G转发面PFCP协议的相关核心知识。 涵盖了最精简的核心骨干内容，助你轻松上阵。 讲解目标 3GPP和相关协议 5G核心网架构模…...
【2024 年度总结】从小白慢慢成长
【2024 年度总结】从小白慢慢成长 1. 加入 CSDN 的契机2. 学习过程2.1 万事开头难2.2 下定决心开始学习2.3 融入技术圈2.4 完成万粉的目标 3. 经验分享3.1 工具的选择3.2 如何提升文章质量3.3 学会善用 AI 工具 4. 保持初心，继续前行 1. 加入 CSDN 的契机 首次接触…...
SAP POC 项目完工进度 - 收入确认方式【工程制造行业】【新准则下工程项目收入确认】
1. SAP POC收入确认基础概念 1.1 定义与原则 SAP POC（Percentage of Completion）收入确认方式是一种基于项目完工进度来确认收入的方法。其核心原则是根据项目实际完成的工作量或成本投入占预计总工作量或总成本的比例，来确定当期应确认的收…...
vue3+three.js加载glb模型
<template><div><!-- 亮度调节滑块 --><div class"controls"><label for"brightness">背景光亮度：</label><inputtype"range"id"brightness"v-model"brightness"min&quo…...
一文搞懂 Spring Cloud：从入门到实战的微服务全景指南（建议收藏）柑
一、中间件是啥？咱用“餐厅”打个比方 想象一下，你的FastAPI应用是个高级餐厅。 ?? 顾客（客户端请求）来到门口。- 迎宾（CORS中间件）：先看你是不是从允许的街区（域名）来…...
使用 C# 删除 PDF 中的数字签名们
一、 什么是 AI Skills：从工具级到框架级的演化 AI Skills（AI 技能） 的概念最早在 Claude Code 等前沿 Agent 实践中被强化。最初，Skills 被视为“工具级”的增强，如简单的文件读写或终端操作，方便用户快速…...
HJ169 灵异背包？
题目题解(36)讨论(22)排行 简单 通过率：43.17% 时间限制：1秒 空间限制：256M 知识点贪心 校招时部分企业笔试将禁止编程题跳出页面，为提前适应，练习时请使用在线自测，而非本地IDE。 描述 给定 nn 个正…...
V7K 数据收集
V7000的故障数据收集1． 通过GUI图形管理界面Download Support Package是基本的数据收集方式 选择Troubleshooting菜单下面的“Support” 注意： 微码6.3下，应选择Settings菜单下面的“Support”。点击“Download Support Package” 有4个选项可…...
为什么 2026 是 AI Agents 创业者的黄金窗口
为什么 2026 是 AI Agents 创业者的黄金窗口 关键词 AI Agents、大语言模型、多模态智能体、自主系统、技术创业、LLM 应用、黄金窗口期 摘要 本文深入探讨了为什么2026年将成为AI Agents创业者的黄金窗口。我们将从技术发展历程、市场成熟度、基础设施完善等多个维度分析这…...
拆解政务知识库落地：从0到日均万次应答的实战手记
在基层政务服务中，“这个政策怎么解读？”“社保卡丢了去哪补办？”这类问题每天被重复成百上千次。政策法规分散在数十个系统中，居民问不清，工作人员也答不准。如何在不增加编制的前提下，让90%的重复性问题被…...
008、对话链实战：调试一个“失忆”的智能对话助手
008、对话链实战：调试一个“失忆”的智能对话助手 昨天在调试一个基于LangChain的客服原型时，遇到了一个典型问题：每次用户问“我刚才说了什么？”，助手都回答“我不知道您之前说了什么”。这暴露了对话链最核心的问题—…...
算法的能耗模型与绿色计算优化方向的技术4
能耗模型基础理论算法复杂度与能耗关系时间复杂度与空间复杂度对硬件资源消耗的影响，建立数学模型描述指令执行次数、数据访问频率与能耗的关联。硬件层面的能耗因素CPU动态功耗（CVf）、静态功耗、内存访问能耗、缓存命中率等关键参数…...
Docker 容器中运行 AI CLI 工具：用户隔离与持久化卷实战指南暗
环境安装 pip install keystone-engine capstone unicorn 这3个工具用法极其简单，下面通过示例来演示其用法。 Keystone 示例 from keystone import * CODE b"INC ECX; ADD EDX, ECX" try:ks Ks(KS_ARCH_X86, KS_MODE_64)encoding, count ks.asm(CODE)…...
深入理解Kubernetes网络模型：摆脱“配置工程师”噩梦
在云原生测试领域，Kubernetes已成为基础设施的核心载体。然而，网络配置的复杂性常使测试人员陷入“反复调参-验证失败”的循环。本文从测试视角解析Kubernetes网络模型，提供可落地的验证方法论，帮助测试工程师突破网络瓶颈&#x…...