广州购物网站,宁德市医院,网站结构的规划,dedecms网站空白文章目录 #x1f31f; CSS 进阶教程#xff1a;从定位到动画与布局#x1f31f; 目录#x1f31f; 1. 定位**Static#xff08;默认定位#xff09;****Relative#xff08;相对定位#xff09;****Absolute#xff08;绝对定位#xff09;****Fixed#xff08;固定… 文章目录 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 的核心功能。 目录
定位层叠规则z-indexBFC 和 IFCCSS3 新特性 响应式布局媒体查询Flex 布局Grid 布局瀑布流布局 动画与过渡 动画过渡效果渐变效果 背景与边框 背景边框与圆角 字体与文本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粘性定位
根据滚动位置在 relative 和 fixed 之间切换。
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;float 或 position: absolute/fixed;display: flex;
css复制代码
.container {overflow: hidden; /* 触发 BFC */
}IFC内联格式化上下文
内联元素形成的一种上下文布局规则按文字流排列。
html复制代码
span这是/spanspanIFC/span4. 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
