CSS 进阶教程:从定位到动画与布局

文章目录

  • 🌟 CSS 进阶教程:从定位到动画与布局
    • 🌟 目录
    • 🌟 1. 定位
      • **Static(默认定位)**
      • **Relative(相对定位)**
      • **Absolute(绝对定位)**
      • **Fixed(固定定位)**
      • **Sticky(粘性定位)**
    • 🌟 2. 层叠规则(z-index)
    • 🌟 3. BFC 和 IFC
      • **BFC(块级格式化上下文)**
      • **IFC(内联格式化上下文)**
    • 🌟 4. CSS3 新特性
      • 响应式布局与媒体查询
        • 媒体查询
      • Flex 布局
      • Grid 布局
      • 瀑布流布局
    • 🌟 5. 动画与过渡
      • 动画
      • 过渡效果
      • 渐变效果
    • 🌟 6. 背景与边框
      • 背景
      • 边框与圆角
    • 🌟 7. 字体与文本
    • 🌟 8. 2D/3D 转换
      • 2D 转换
      • 3D 转换
      • 🔗 相关资源

🌟 CSS 进阶教程:从定位到动画与布局

在学习了 CSS 的基础知识后,本节将涵盖更高级的 CSS 概念和技术,包括定位、布局、动画等,帮助你全面掌握 CSS 的核心功能。


🌟 目录

  1. 定位
  2. 层叠规则(z-index)
  3. BFC 和 IFC
  4. CSS3 新特性
    • 响应式布局
    • 媒体查询
    • Flex 布局
    • Grid 布局
    • 瀑布流布局
  5. 动画与过渡
    • 动画
    • 过渡效果
    • 渐变效果
  6. 背景与边框
    • 背景
    • 边框与圆角
  7. 字体与文本
  8. 2D/3D 转换

🌟 1. 定位

定位决定了元素在页面上的放置方式,CSS 提供了以下几种定位方式:

Static(默认定位)

元素按照正常文档流排列。

css复制代码
div {position: static; /* 默认值 */
}

Relative(相对定位)

相对于自身的原始位置进行偏移。

css复制代码
div {position: relative;top: 20px; /* 相对于原始位置向下偏移 */left: 10px;
}

Absolute(绝对定位)

相对于最近的已定位祖先元素(非 static)进行定位。如果无祖先元素,则相对于 body

css复制代码
div {position: absolute;top: 50px;left: 100px;
}

Fixed(固定定位)

相对于浏览器视口进行定位,滚动页面时位置不变。

css复制代码
div {position: fixed;bottom: 10px;right: 20px;
}

Sticky(粘性定位)

根据滚动位置在 relativefixed 之间切换。

css复制代码
div {position: sticky;top: 0; /* 距离顶部 0 时固定 */
}

🌟 2. 层叠规则(z-index)

z-index 控制元素的堆叠顺序,值越大,元素越靠上。

css复制代码
div {position: absolute;z-index: 10;
}
  • 正整数:比默认层高。
  • 负整数:比默认层低。
  • 默认值为 auto

🌟 3. BFC 和 IFC

BFC(块级格式化上下文)

  • 独立的布局区域,内部元素不会影响外部。
  • 触发方式:
    • overflow: hidden;
    • floatposition: absolute/fixed;
    • display: flex;
css复制代码
.container {overflow: hidden; /* 触发 BFC */
}

IFC(内联格式化上下文)

  • 内联元素形成的一种上下文,布局规则按文字流排列。
html复制代码
<span>这是</span><span>IFC</span>

🌟 4. CSS3 新特性

响应式布局与媒体查询

媒体查询

根据设备宽度、分辨率应用不同样式。

css复制代码
@media (max-width: 600px) {body {background-color: lightblue;}
}

Flex 布局

弹性盒子布局,适合单维方向排列。

css复制代码
.container {display: flex;justify-content: space-between;align-items: center;
}

Grid 布局

强大的二维布局。

css复制代码
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;
}

瀑布流布局

css复制代码
.container {column-count: 3; /* 列数 */column-gap: 10px;
}

🌟 5. 动画与过渡

动画

通过 @keyframes 创建复杂动画。

css复制代码
@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}div {animation: slide 2s infinite;
}

过渡效果

css复制代码
div {transition: all 0.3s ease-in-out;
}

渐变效果

创建颜色渐变。

css复制代码
div {background: linear-gradient(to right, red, yellow);
}

🌟 6. 背景与边框

背景

背景图像和颜色的设置。

css复制代码
div {background: url('image.jpg') no-repeat center center / cover;
}

边框与圆角

css复制代码
div {border: 2px solid black;border-radius: 10px;
}

🌟 7. 字体与文本

css复制代码
body {font-family: 'Arial', sans-serif;font-size: 16px;
}

🌟 8. 2D/3D 转换

2D 转换

通过 transform 实现旋转、缩放等效果。

css复制代码
div {transform: rotate(45deg) scale(1.2);
}

3D 转换

css复制代码
div {transform: rotateX(45deg) rotateY(30deg);
}

🔗 相关资源

  • CSS官方文档

现在你已经掌握了 CSS 的核心进阶内容,试着实践一下吧!

4o

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/890047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx - 相关概念解释及整体结构

概述 定义 一个高性能的 HTTP 和反向代理服务器一个 IMAP/POP3/SMTP 代理服务器目标&#xff1a;高效处理高并发连接安装流程&#xff1a;Installing nginx 功能 功能说明⭐ 反向代理作为反向代理服务器&#xff0c;将客户端请求转发到一个或多个后端服务器负载均衡通过多种负…

超越 RAG 基础:AI 应用的高级策略

作者&#xff1a;来自 Elastic Elastic Platform Team 我们最近与 Cohere 举办的虚拟活动深入探讨了检索增强生成 (retrieval augmented generation - RAG) 的世界&#xff0c;重点讨论了在概念验证阶段之后构建 RAG 应用程序的关键注意事项。我们的演讲者是 Elastic 的首席解…

音频开发中常见的知识体系

在 Linux 系统中&#xff0c;/dev/snd 目录包含与声音设备相关的文件。每个文件代表系统中的一部分音频硬件或音频控制接口。以下是你列出的文件及其含义&#xff1a; 一.基本术语 样本长度(sample)&#xff1a;样本是记录音频数据最基本的单位&#xff0c;计算机对每个通道采…

修改ubuntu apt 源及apt 使用

视频教程:修改ubuntu apt 源和apt 使用方法_哔哩哔哩_bilibili 1 修改apt源 1.1 获取阿里云ubuntu apt 源 https://developer.aliyun.com/mirror/ubuntu?spma2c6h.13651102.0.0.3e221b11mqqLBC 1.2 修改apt 源 vim /etc/apt/sources.list deb https://mirrors.aliyun.com/ub…

贪心算法 part01

class Solution { public:int maxSubArray(vector<int>& nums) {int result INT32_MIN;int count 0;for (int i 0; i < nums.size(); i) {count nums[i];if (count > result) { // 取区间累计的最大值&#xff08;相当于不断确定最大子序终止位置&#xff…

Ubuntu 安装texstudio sty与texlive

手动安装需要的包 访问CTAN网站&#xff08;Comprehensive TeX Archive Network&#xff09;并下载enumitem宏包&#xff1a; enumitem CTAN页面下载后&#xff0c;将宏包解压到/usr/share/texmf/tex/latex/下。 可打开texstudio/帮助/宏包帮助下载。 如果不想手动安装一个个…

Moretl安全日志采集工具

永久免费: 至Gitee下载 使用教程: Moretl使用说明 使用咨询: 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架…

计算机网络信息系统安全问题及解决策略

目 录 摘 要 前 言 一、计算机网络信息系统研究现状及安全技术 &#xff08;一&#xff09;计算机网络信息系统研究现状 &#xff08;二&#xff09;计算机网络信息系统全技术概述 二、计算机网络信息系统安全问题 &#xff08;一&#xff09;环境危害引发的安全问…

FFMPEG视频转图片

用FFMPEG视频转图片&#xff0c;并且for循环 import os import subprocess# 输入文件夹和输出文件夹路径 input_folder r"I:\xxx" output_base_folder r"D:\xxx\YOLO\data\video" output_subfolder_name "20240609"# 创建输出子文件夹 output…

银河麒麟桌面操作系统添加WPS字体

【使用场景】 银河麒麟桌面操作系统支持添加WPS字体。在银河麒麟桌面操作系统中使用WPS软件编辑文档时存在需要添加WPS字体的情况,例如字体缺失或者需要特殊字体时,需要添加WPS字体。 【操作方法】 步骤一:在互联网上搜索并下载.ttf格式的字体文件。 步骤二:下载完成后,在…

skywalking 搭建 备忘录

基础环境 apache-skywalking-apm-9.6.0.tar.gz apache-skywalking-java-agent-9.1.0.tgz elasticsearch 7.14.1 采用dockers搭建 或者手动部署 kibana 可视化 应用 微服务版 consumer.jar eureka.jar 注册中心 provider.jar skywalking 地址 https://skywalkin…

CAN配置---波特率中断引脚等---autochips-AC7811-ARM-M3内核

1、配置工具 虽然不怎么好用&#xff0c;但比没有强多了。具体看图&#xff1a; 时钟选着 NVIC配置 GPIO配置 2、生成的具体配置信息 NXP的配置工具里面&#xff0c;具体的波特率可以直接显示&#xff0c;这个工具没有&#xff0c;怎么办&#xff1f; 它放到了生成的代码里面…

【ETCD】ETCD 架构揭秘:内部各组件概览

ETCD 的主要组件及它们之间的关联关系如下&#xff1a; 目录 1. Client&#xff08;客户端&#xff09;2. gRPC 接口3. Etcd Server Main Loop&#xff08;ETCD 主循环&#xff09;4. Raft&#xff08;共识模块&#xff09;5. Peer Etcd Nodes&#xff08;ETCD 集群节点&#x…

使用 imageio 库轻松处理图像与视频

使用 imageio 库轻松处理图像与视频 imageio 是一个 Python 库&#xff0c;用于读取和写入多种图像和视频格式。它功能强大、易于使用&#xff0c;广泛应用于图像处理、视频编辑和数据可视化等领域。本篇文章将介绍 imageio 的基础功能、常见用法以及高级操作。 一、安装 imag…

乐凡信息智能安全管控方案:助力油气田行业安全管控多方位升级

我国油田地域广阔&#xff0c;分布着大量各种油井&#xff0c;油井开采设备的连续稳定运行是保证石油开采的首要条件。然而&#xff0c;由于油田多位于特殊地理环境中&#xff0c;因而实现油井之间的通信首要问题就是要克服地理环境所带来的限制&#xff0c;传统通信系统的建设…

windows 使用python共享网络给另外一个网卡

# -*- coding: utf-8 -*- import subprocessdef open_share(to_shared_adapter, from_shared_adapter):"""打开以太网的网络共享:return: None"""powershell_script f"""# Register the HNetCfg library (once)# regsvr32 hnetc…

DAOBase 推出 DAO POP:赋能创作者与社区,畅享链上未来

随着时代快速发展&#xff0c;链上生态也在飞速扩张。DAOBase 致力于为社区、创作者和品牌提供赋能&#xff0c;帮助他们充分挖掘去中心化技术的潜力。今天&#xff0c;我们很高兴为大家带来 DAO POP —— 一款彻底改变玩法的功能&#xff0c;让社区代币的发行和管理变得前所未…

用vscode,进行vue开发

使用Visual Studio Code&#xff08;VSCode&#xff09;进行Vue.js开发是一个很好的选择&#xff0c;因为VSCode提供了强大的编辑功能以及丰富的插件生态。以下是使用VSCode进行Vue开发的基本步骤&#xff1a; 1. 安装Node.js和npm 首先&#xff0c;确保你的计算机上安装了No…

java-使用druid sqlparser将SQL DDL脚本转化为自定义的java对象

java-使用druid sqlparser将SQL DDL脚本转化为自定义的java对象 一、引言二、环境三、待解析的DDL四、解析后的对象结构五、完整的UT类六、控制台输出总结 一、引言 在日常开发中&#xff0c;有些需要对SQL进行解析的场景&#xff0c;比如读取表结构信息&#xff0c;生成文档、…

深度学习实战智能交通计数

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化&#xff0c;该数据集包含丰富的车辆目标图像样本…