当前位置: 首页 > news >正文

CSS笔记基础篇02——浮动、标准流、定位、CSS精灵、字体图标

黑马程序员视频地址:

前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=70https://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)”。 实际上&#xff…...

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)开始清扫。它按照以下规则移动: 如果当前位置的右边(同一行,下一列)没有被清扫过,它会向右移动。 如果右边无法移动&#xf…...

【大数据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. 基于图像的三维重建 核心概念三维重建中深度图、点云的区别&#xff1f;深度图点云总结 深度图到点云还需要什么步骤&#xff1f;1. **获取相机内参**2. **生成相应的像素坐标**3. **计算三维坐标**4. **构建点云**5. **处理颜色信息&#xff08;可选&#xff09;**6. **去除…...

如何确保Python爬虫不违反微店规定

在使用Python爬虫获取微店商品详情时&#xff0c;确保爬虫行为符合微店的规定和相关法律法规至关重要。以下是一些关键步骤和注意事项&#xff0c;帮助你合法合规地使用爬虫技术&#xff1a; 一、遵守法律法规 在使用爬虫技术时&#xff0c;必须严格遵守《网络安全法》、《个…...

Spring Event和MQ的区别和使用场景

概念 Spring事件&#xff08;Spring Event&#xff09;是Spring框架的一项功能&#xff0c;它允许不同组件之间通过发布-订阅机制进行解耦的通信。 MQ一般是一个独立的中间件&#xff0c;它可以通过消息队列对消息进行传递和存储&#xff0c;生产者将消息发送到MQ&#xff0c;…...

SpringBoot:websocket 实现后端主动前端推送数据

简单说明下websocket实用场景。 实时通信领域&#xff1a;社交聊天弹幕多玩家游戏协同编辑股票基金实时报价体育实况更新视频会议/聊天基于位置的应用在线教育智能家居等需要高实时性的场景 一、服务端代码 pom.xml&#xff1a; <dependencies><dependency><…...

嵌入式硬件篇---PID控制

文章目录 前言第一部分&#xff1a;连续PID1.比例&#xff08;Proportional&#xff0c;P&#xff09;控制2.积分&#xff08;Integral&#xff0c;I&#xff09;控制3.微分&#xff08;Derivative&#xff0c;D&#xff09;控制4.PID的工作原理5..实质6.分析7.各种PID控制器P控…...

小程序获取微信运动步数

1、用户点击按钮&#xff0c;在小程序中触发getuserinfo方法&#xff0c;获取用户信息 <scroll-view class"scrollarea" scroll-y type"list"><view class"container"><button bind:tap"getLogin">获取</button&…...

5G 核心网 相关概念快速入门

在我们开始阅读3GPP协议来学习5G核心网之前&#xff0c; 不妨来看看我之前整理的PPT&#xff0c;快速学习核心网相关概念&#xff0c; 以及5G转发面PFCP协议的相关核心知识。 涵盖了最精简的核心骨干内容&#xff0c;助你轻松上阵。 讲解目标 3GPP和相关协议 5G核心网架构模…...

【2024 年度总结】从小白慢慢成长

【2024 年度总结】从小白慢慢成长 1. 加入 CSDN 的契机2. 学习过程2.1 万事开头难2.2 下定决心开始学习2.3 融入技术圈2.4 完成万粉的目标 3. 经验分享3.1 工具的选择3.2 如何提升文章质量3.3 学会善用 AI 工具 4. 保持初心&#xff0c;继续前行 1. 加入 CSDN 的契机 首次接触…...

SAP POC 项目完工进度 - 收入确认方式【工程制造行业】【新准则下工程项目收入确认】

1. SAP POC收入确认基础概念 1.1 定义与原则 SAP POC&#xff08;Percentage of Completion&#xff09;收入确认方式是一种基于项目完工进度来确认收入的方法。其核心原则是根据项目实际完成的工作量或成本投入占预计总工作量或总成本的比例&#xff0c;来确定当期应确认的收…...

vue3+three.js加载glb模型

<template><div><!-- 亮度调节滑块 --><div class"controls"><label for"brightness">背景光亮度&#xff1a;</label><inputtype"range"id"brightness"v-model"brightness"min&quo…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...