SQL-ServerCSS3学习教程，从入门到醒目，CSS3 定位布局页面知识点及案例代码（18）

干翻全岛蛙蛙 发表于 2025-3-26 14:43:40

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

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

一、平凡流（Normal Flow）

知识点

平凡流是 CSS 中最根本的布局方式，元素按照其在 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>
   .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 属性用于控制元素两侧是否允许浮动元素。
案例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
   .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;，元素在滚动到特定位置时，会像固定定位一样固定在某个位置。
案例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
   .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="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 设置。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
   .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：定义项目所在的网格区域。

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局</title>
<style>
   .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>
六、综合案例

知识点

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合布局案例</title>
<style>
   /* 导航栏样式 */
   .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>© 2023 网站名称. 保留所有权利.</p>
</footer>
</body>
</html>
以上内容涵盖了 CSS3 定位布局的重要知识点及案例代码，包括平凡流、浮动、定位、弹性布局和网格布局等。
以下是一些开发中常用的CSS3实际案例，涵盖了多种应用场景，帮助你更好地明白和应用CSS3：
导航菜单动画

[*]下拉菜单动画：当鼠标悬停在导航栏的菜单项上时，下拉菜单以淡入和向下滑动的动画效果表现，为用户提供清晰的视觉反馈，增强交互性。
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);
}

[*]侧边栏菜单动画：点击汉堡菜单图标时，侧边栏菜单以从左到右的滑动动画睁开，同时菜单中的各项以淡入动画逐个表现，使页面的交互更加生动有趣。
.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动画实现图片的平滑切换效果。比方，当前图片以淡出动画渐渐消失，同时下一张图片以淡入动画渐渐表现，给用户带来流通的视觉体验。
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease;
}

.slider img.active {
opacity: 1;
}

[*]图片放大查看动画：当用户点击图片时，图片以放大和淡入的动画效果展示细节，同时配景添加一层半透明的遮罩层，营造出聚焦的效果，让用户更加专注于图片内容。
.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;
}
按钮交互动画

[*]点击按钮动画：按钮在被点击时，通过改变配景颜色、添加阴影或缩放等动画效果，给予用户即时的视觉反馈，让用户明确操纵已经被接收。
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);
}

[*]加载按钮动画：当按钮触发一个需要等待的操纵时，如提交表单，按钮可以表现一个加载动画，如旋转的图标或进度条，同时按钮变为不可点击状态，让用户知道操纵正在举行中。
.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);
}
}
文本动画

[*]文字闪烁动画：通过改变文字的透明度或颜色，实现文字的闪烁效果，可用于突出表现重要信息或吸引用户的留意力。
.blinking-text {
animation: blink 1s infinite;
}

@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

[*]文字滚动动画：使一段文字在水平或垂直方向上滚动表现，可用于展示通知、公告等内容，增长信息的展示效果。
.scroll-text {
white-space: nowrap;
overflow: hidden;
animation: scroll 5s linear infinite;
}

@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
页面过渡动画

[*]页面切换动画：在单页面应用中，当用户切换页面时，通过动画实现页面的淡入淡出、滑动或缩放等过渡效果，使页面切换更加自然流通，提升用户体验。
.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;
}

[*]模态框动画：模态框在表现和隐藏时，通过淡入淡出和缩放等动画效果，使其更加平滑地出现和消失，制止了生硬的表现效果，提升了页面的整体美感。
.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的强盛功能和灵活性，为你的项目增添更多的视觉效果和交互体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

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