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…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...
基于 TAPD 进行项目管理
起因 自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD，需要提供一个企业名新建一个项目&#…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
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…...
Java后端检查空条件查询
通过抛出运行异常：throw new RuntimeException("请输入查询条件！");BranchWarehouseServiceImpl.java // 查询试剂交易（入库/出库）记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
【多线程初阶】单例模式 指令重排序问题
文章目录 1.单例模式1)饿汉模式2)懒汉模式①.单线程版本②.多线程版本 2.分析单例模式里的线程安全问题1)饿汉模式2)懒汉模式懒汉模式是如何出现线程安全问题的 3.解决问题进一步优化加锁导致的执行效率优化预防内存可见性问题 4.解决指令重排序问题 1.单例模式 单例模式确保某…...