CSS3学习教程，从入门到精通，CSS3 定位布局页面知识点及案例代码（18）

CSS3 定位布局页面知识点及案例代码

一、普通流（Normal Flow）

知识点

普通流是 CSS 中最基本的布局方式，元素按照其在 HTML 文档中出现的顺序依次排列。块级元素独占一行，内联元素则在同一行排列。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>普通流布局</title><style>html" title=css>css">.block-element {/* 块级元素默认独占一行 */background-color: lightblue;margin: 10px 0;padding: 10px;}.inline-element {/* 内联元素默认在同一行排列 */background-color: lightgreen;margin: 0 10px;padding: 10px;}</style>
</head>
<body><div class="block-element">块级元素1</div><div class="block-element">块级元素2</div><span class="inline-element">内联元素1</span><span class="inline-element">内联元素2</span>
</body>
</html>

二、浮动（Float）

知识点

浮动布局通过 float 属性使元素脱离普通流，向左或向右移动，直到遇到包含块的边框或其他浮动元素。常用于多列布局。

float: left;：元素向左浮动。
float: right;：元素向右浮动。
clear 属性用于控制元素两侧是否允许浮动元素。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动布局</title><style>html" title=css>css">.container {border: 1px solid #ccc;padding: 10px;overflow: hidden; /* 清除浮动 */}.float-left {float: left;width: 200px;background-color: lightblue;padding: 10px;margin-right: 10px;}.float-right {float: right;width: 200px;background-color: lightgreen;padding: 10px;margin-left: 10px;}.content {background-color: lightyellow;padding: 10px;margin: 0 210px;}.clear-both {clear: both; /* 清除左右两侧的浮动 */margin-top: 20px;}</style>
</head>
<body><div class="container"><div class="float-left">左侧边栏</div><div class="float-right">右侧边栏</div><div class="content">主要内容区域</div><div class="clear-both">清除浮动后的元素</div></div>
</body>
</html>

三、定位（Positioning）

知识点

定位布局通过 position 属性改变元素的位置。有以下几种定位方式：

相对定位（Relative）：position: relative;，元素相对于其正常位置进行偏移，偏移量由 top、right、bottom、left 属性指定。
绝对定位（Absolute）：position: absolute;，元素相对于最近的已定位祖先元素进行定位，若没有则相对于初始包含块（viewport）。
固定定位（Fixed）：position: fixed;，元素相对于浏览器窗口进行定位，不随滚动条滚动。
粘性定位（Sticky）：position: sticky;，元素在滚动到特定位置时，会像固定定位一样固定在某个位置。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位布局</title><style>html" title=css>css">.relative-box {position: relative;width: 300px;height: 200px;background-color: lightblue;margin: 20px;}.absolute-box {position: absolute;top: 50px;right: 50px;width: 100px;height: 100px;background-color: lightgreen;}.fixed-box {position: fixed;bottom: 20px;left: 20px;padding: 10px;background-color: rgba(255, 255, 0, 0.7);border: 1px solid #ccc;}.sticky-box {position: sticky;top: 10px;background-color: lightyellow;padding: 10px;margin: 10px 0;}</style>
</head>
<body><div class="relative-box"><div class="absolute-box"></div></div><div style="html" title=css>css">height: 1500px; border: 1px dashed #ccc;"><div class="sticky-box">粘性定位元素</div><p>滚动页面查看固定定位和粘性定位效果</p></div><div class="fixed-box">固定定位元素</div>
</body>
</html>

四、弹性布局（Flexbox）

知识点

弹性布局通过 display: flex; 或 display: inline-flex; 将容器变为弹性容器，子元素自动成为弹性项目。弹性布局可以轻松实现各种复杂的布局。

主轴（Main Axis）：由 flex-direction 属性决定，默认为水平方向（row）。
交叉轴（Cross Axis）：与主轴垂直的方向。
常用属性：
- 容器属性：
  - flex-direction：决定主轴方向（row、row-reverse、column、column-reverse）。
  - justify-content：定义主轴上项目的对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）。
  - align-items：定义交叉轴上项目的对齐方式（stretch、flex-start、flex-end、center、baseline）。
  - align-content：多行时，定义交叉轴上行之间的对齐方式（stretch、flex-start、flex-end、center、space-between、space-around）。
- 项目属性：
  - order：定义项目的排列顺序，数值越小越靠前。
  - flex-grow：定义项目的放大比例，默认为 0，即如果容器有剩余空间，项目不放大。
  - flex-shrink：定义项目的缩小比例，默认为 1，即如果容器空间不足，项目会缩小。
  - flex-basis：定义项目在主轴上的初始长度。
  - align-self：允许单个项目覆盖容器的 align-items 设置。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局</title><style>html" title=css>css">.flex-container {display: flex;/* 主轴方向为水平 */flex-direction: row;/* 主轴对齐方式为居中 */justify-content: center;/* 交叉轴对齐方式为居中 */align-items: center;height: 200px;border: 1px solid #ccc;margin-bottom: 20px;}.flex-item {width: 100px;height: 100px;background-color: lightblue;margin: 0 10px;}.flex-container-column {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 400px;border: 1px solid #ccc;margin-bottom: 20px;}.flex-container-wrap {display: flex;flex-wrap: wrap;justify-content: space-around;height: 200px;border: 1px solid #ccc;}.flex-item-small {width: 80px;height: 80px;background-color: lightgreen;margin: 5px;}.flex-grow-item {flex-grow: 1;background-color: lightcoral;}</style>
</head>
<body><h2>基本弹性布局</h2><div class="flex-container"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div><h2>垂直弹性布局</h2><div class="flex-container-column"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div><h2>换行弹性布局</h2><div class="flex-container-wrap"><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div><div class="flex-item-small"></div></div><h2>弹性项目增长</h2><div class="flex-container"><div class="flex-item flex-grow-item"></div><div class="flex-item"></div></div>
</body>
</html>

五、网格布局（Grid）

知识点

网格布局通过 display: grid; 或 display: inline-grid; 将容器变为网格容器，子元素自动成为网格项目。网格布局可以轻松创建复杂的二维布局。

网格线：网格由水平和垂直的网格线组成，形成网格单元格。
常用属性：
- 容器属性：
  - grid-template-columns：定义列的宽度。
  - grid-template-rows：定义行的高度。
  - grid-gap 或 gap：定义网格单元格之间的间隔。
  - grid-template-areas：定义网格区域，用于布局模板。
- 项目属性：
  - grid-column：定义项目占据的列。
  - grid-row：定义项目占据的行。
  - grid-area：定义项目所在的网格区域。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格布局</title><style>html" title=css>css">.grid-container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px;gap: 10px;border: 1px solid #ccc;margin-bottom: 20px;}.grid-item {background-color: lightblue;display: flex;justify-content: center;align-items: center;}.grid-container-areas {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;gap: 10px;border: 1px solid #ccc;}.header {grid-area: header;background-color: lightcoral;}.sidebar {grid-area: sidebar;background-color: lightgreen;}.main {grid-area: main;background-color: lightyellow;}.footer {grid-area: footer;background-color: lightblue;}</style>
</head>
<body><h2>基本网格布局</h2><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div><h2>网格布局模板区域</h2><div class="grid-container-areas"><div class="header">Header</div><div class="sidebar">Sidebar</div><div class="main">Main</div><div class="footer">Footer</div></div>
</body>
</html>

六、综合案例

知识点

综合运用以上各种布局方式，实现一个复杂的页面布局。

案例代码

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合布局案例</title><style>html" title=css>css">/* 导航栏样式 */.navbar {background-color: #333;padding: 10px;display: flex;justify-content: space-between;align-items: center;color: white;}.nav-links {display: flex;list-style: none;}.nav-links li {margin-left: 20px;}.nav-links a {color: white;text-decoration: none;}/* 主要内容区域 */.main-content {display: grid;grid-template-columns: 200px 1fr;gap: 20px;padding: 20px;}.sidebar {background-color: #f4f4f4;padding: 15px;border-radius: 5px;}.content-area {display: flex;flex-direction: column;gap: 20px;}.article {background-color: white;padding: 20px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 图片展示区域 */.image-gallery {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-top: 30px;}.gallery-item {position: relative;overflow: hidden;border-radius: 5px;}.gallery-item img {width: 100%;height: 200px;object-fit: cover;transition: transform 0.3s ease;}.gallery-item img:hover {transform: scale(1.05);}.gallery-item span {position: absolute;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.7);color: white;padding: 10px;text-align: center;}/* 页脚样式 */.footer {background-color: #333;color: white;text-align: center;padding: 20px;margin-top: 30px;}</style>
</head>
<body><!-- 导航栏 --><nav class="navbar"><div class="logo">网站名称</div><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">文章</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav><!-- 主要内容区域 --><div class="main-content"><!-- 侧边栏 --><div class="sidebar"><h3>热门文章</h3><ul><li>文章标题1</li><li>文章标题2</li><li>文章标题3</li><li>文章标题4</li></ul><h3>分类</h3><ul><li>分类1</li><li>分类2</li><li>分类3</li></ul></div><!-- 内容区域 --><div class="content-area"><div class="article"><h2>文章标题</h2><p>发表日期: 2023-06-01</p><p>文章内容...</p></div><div class="article"><h2>另一篇文章</h2><p>发表日期: 2023-05-25</p><p>另一篇文章内容...</p></div><!-- 图片展示区域 --><div class="image-gallery"><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片1"><span>图片标题1</span></div><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片2"><span>图片标题2</span></div><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片3"><span>图片标题3</span></div><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片4"><span>图片标题4</span></div><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片5"><span>图片标题5</span></div><div class="gallery-item"><img src="https://via.placeholder.com/300x200" alt="图片6"><span>图片标题6</span></div></div></div></div><!-- 页脚 --><footer class="footer"><p>&copy; 2023 网站名称. 保留所有权利.</p></footer>
</body>
</html>

以上内容涵盖了 CSS3 定位布局的主要知识点及案例代码，包括普通流、浮动、定位、弹性布局和网格布局等。

以下是一些开发中常用的CSS3实际案例，涵盖了多种应用场景，帮助你更好地理解和应用CSS3：

导航菜单动画

下拉菜单动画：当鼠标悬停在导航栏的菜单项上时，下拉菜单以淡入和向下滑动的动画效果显示，为用户提供清晰的视觉反馈，增强交互性。

html" title=css>css">nav ul ul {opacity: 0;visibility: hidden;transform: translateY(-20px);transition: all 0.3s ease;
}nav ul li:hover > ul {opacity: 1;visibility: visible;transform: translateY(0);
}

侧边栏菜单动画：点击汉堡菜单图标时，侧边栏菜单以从左到右的滑动动画展开，同时菜单中的各项以淡入动画逐个显示，使页面的交互更加生动有趣。

html" title=css>css">.sidebar {width: 0;overflow: hidden;transition: width 0.3s ease;
}.sidebar.open {width: 200px;
}.sidebar ul li {opacity: 0;transform: translateX(-20px);transition: all 0.3s ease 0.1s;
}.sidebar.open ul li {opacity: 1;transform: translateX(0);
}

图片展示与切换动画

图片轮播动画：在图片轮播中，通过CSS3动画实现图片的平滑切换效果。例如，当前图片以淡出动画逐渐消失，同时下一张图片以淡入动画逐渐显示，给用户带来流畅的视觉体验。

html" title=css>css">.slider img {position: absolute;top: 0;left: 0;opacity: 0;transition: opacity 1s ease;
}.slider img.active {opacity: 1;
}

图片放大查看动画：当用户点击图片时，图片以放大和淡入的动画效果展示细节，同时背景添加一层半透明的遮罩层，营造出聚焦的效果，让用户更加专注于图片内容。

html" title=css>css">.image-popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);opacity: 0;transition: all 0.3s ease;z-index: 999;
}.image-popup.show {transform: translate(-50%, -50%) scale(1);opacity: 1;
}.image-popup::before {content: "";position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);opacity: 0;transition: opacity 0.3s ease;z-index: -1;
}.image-popup.show::before {opacity: 1;
}

按钮交互动画

点击按钮动画：按钮在被点击时，通过改变背景颜色、添加阴影或缩放等动画效果，给予用户即时的视觉反馈，让用户明确操作已经被接收。

html" title=css>css">button {background-color: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;transition: all 0.3s ease;
}button:hover {background-color: #2980b9;transform: scale(1.1);
}button:active {background-color: #1f618d;transform: scale(0.9);
}

加载按钮动画：当按钮触发一个需要等待的操作时，如提交表单，按钮可以显示一个加载动画，如旋转的图标或进度条，同时按钮变为不可点击状态，让用户知道操作正在进行中。

html" title=css>css">.loading-button {position: relative;
}.loading-button::after {content: "";position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;border-radius: 50%;border: 2px solid white;border-top-color: transparent;animation: loading 1s linear infinite;transform: translate(-50%, -50%);z-index: -1;
}@keyframes loading {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}
}

文本动画

文字闪烁动画：通过改变文字的透明度或颜色，实现文字的闪烁效果，可用于突出显示重要信息或吸引用户的注意力。

html" title=css>css">.blinking-text {animation: blink 1s infinite;
}@keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}
}

文字滚动动画：使一段文字在水平或垂直方向上滚动显示，可用于展示通知、公告等内容，增加信息的展示效果。

html" title=css>css">.scroll-text {white-space: nowrap;overflow: hidden;animation: scroll 5s linear infinite;
}@keyframes scroll {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}
}

页面过渡动画

页面切换动画：在单页面应用中，当用户切换页面时，通过动画实现页面的淡入淡出、滑动或缩放等过渡效果，使页面切换更加自然流畅，提升用户体验。

html" title=css>css">.page {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: all 0.5s ease;
}.page.active {opacity: 1;
}.page-enter {transform: translateX(100%);
}.page-enter-active {transform: translateX(0);transition: all 0.5s ease;
}.page-leave {transform: translateX(0);
}.page-leave-active {transform: translateX(-100%);transition: all 0.5s ease;
}

模态框动画：模态框在显示和隐藏时，通过淡入淡出和缩放等动画效果，使其更加平滑地出现和消失，避免了生硬的显示效果，提升了页面的整体美感。

html" title=css>css">.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);opacity: 0;transition: all 0.3s ease;z-index: 9999;background-color: white;border-radius: 5px;padding: 20px;
}.modal.show {transform: translate(-50%, -50%) scale(1);opacity: 1;
}

以上案例展示了CSS3在实际开发中的一些常见应用，通过这些案例，你可以更好地理解CSS3的强大功能和灵活性，为你的项目增添更多的视觉效果和交互体验。