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>
        .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>
        .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;,元素相对于其正常位置进行偏移,偏移量由 toprightbottomleft 属性指定。
  • 绝对定位(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>
        .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:决定主轴方向(rowrow-reversecolumncolumn-reverse)。
      • justify-content:定义主轴上项目的对齐方式(flex-startflex-endcenterspace-betweenspace-aroundspace-evenly)。
      • align-items:定义交叉轴上项目的对齐方式(stretchflex-startflex-endcenterbaseline)。
      • align-content:多行时,定义交叉轴上行之间的对齐方式(stretchflex-startflex-endcenterspace-betweenspace-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>
        .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-gapgap:定义网格单元格之间的间隔。
      • 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>
        .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>
        /* 导航栏样式 */
        .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:

导航菜单动画

  • 下拉菜单动画:当鼠标悬停在导航栏的菜单项上时,下拉菜单以淡入和向下滑动的动画效果显示,为用户提供清晰的视觉反馈,增强交互性。
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);
}
  • 侧边栏菜单动画:点击汉堡菜单图标时,侧边栏菜单以从左到右的滑动动画展开,同时菜单中的各项以淡入动画逐个显示,使页面的交互更加生动有趣。
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动画实现图片的平滑切换效果。例如,当前图片以淡出动画逐渐消失,同时下一张图片以淡入动画逐渐显示,给用户带来流畅的视觉体验。
css 复制代码
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.slider img.active {
  opacity: 1;
}
  • 图片放大查看动画:当用户点击图片时,图片以放大和淡入的动画效果展示细节,同时背景添加一层半透明的遮罩层,营造出聚焦的效果,让用户更加专注于图片内容。
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;
}

按钮交互动画

  • 点击按钮动画:按钮在被点击时,通过改变背景颜色、添加阴影或缩放等动画效果,给予用户即时的视觉反馈,让用户明确操作已经被接收。
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);
}
  • 加载按钮动画:当按钮触发一个需要等待的操作时,如提交表单,按钮可以显示一个加载动画,如旋转的图标或进度条,同时按钮变为不可点击状态,让用户知道操作正在进行中。
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);
  }
}

文本动画

  • 文字闪烁动画:通过改变文字的透明度或颜色,实现文字的闪烁效果,可用于突出显示重要信息或吸引用户的注意力。
css 复制代码
.blinking-text {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
  • 文字滚动动画:使一段文字在水平或垂直方向上滚动显示,可用于展示通知、公告等内容,增加信息的展示效果。
css 复制代码
.scroll-text {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 5s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

页面过渡动画

  • 页面切换动画:在单页面应用中,当用户切换页面时,通过动画实现页面的淡入淡出、滑动或缩放等过渡效果,使页面切换更加自然流畅,提升用户体验。
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;
}
  • 模态框动画:模态框在显示和隐藏时,通过淡入淡出和缩放等动画效果,使其更加平滑地出现和消失,避免了生硬的显示效果,提升了页面的整体美感。
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的强大功能和灵活性,为你的项目增添更多的视觉效果和交互体验。

相关推荐
yinuo43 分钟前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip2 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
Pluchon2 小时前
硅基计划4.0 算法 字符串
java·数据结构·学习·算法
折翅鵬2 小时前
Android 程序员如何系统学习 MQTT
android·学习
前端橙一陈3 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~3 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技013 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio4 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
拾贰_C5 小时前
【pycharm---pytorch】pycharm配置以及pytorch学习
pytorch·学习·pycharm
家里有只小肥猫5 小时前
react 初体验2
前端·react.js·前端框架