《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)

在这里插入图片描述

文章目录

  • 2.1 Flexbox:灵活的布局解决方案
    • 2.1.1 基础知识
    • 2.1.2 重点案例:创建一个响应式导航菜单
    • 2.1.3 拓展案例 1:卡片布局
    • 2.1.4 拓展案例 2:中心对齐的登录表单
  • 2.2 Grid 布局:网格系统的魔力
    • 2.2.1 基础知识
    • 2.2.2 重点案例:创建一个新闻网站的布局
    • 2.2.3 拓展案例 1:画廊布局
    • 2.2.4 拓展案例 2:个人博客的文章布局
  • 2.3 定位技巧:Static、Relative、Absolute、Fixed 和 Sticky
    • 2.3.1 基础知识
    • 2.3.2 重点案例:创建一个固定在顶部的导航栏
    • 2.3.3 拓展案例 1:模态弹窗
    • 2.3.4 拓展案例 2:使用 Sticky 定位实现粘性页脚

2.1 Flexbox:灵活的布局解决方案

欢迎来到 Flexbox 的世界,一个让布局变得前所未有简单的 CSS3 新特性。Flexbox,全称为 Flexible Box,是一个为复杂布局而生的强大工具。它让我们可以在父容器中以一种灵活的方式对子元素进行排列和对齐,不论是水平还是垂直方向。

2.1.1 基础知识

  • Flex 容器(Flex Container):通过设置 display: flex;display: inline-flex; 在一个元素上,这个元素就变成了一个 Flex 容器,其所有直接子元素成为 Flex 项目(Flex Items)。
  • 主轴(Main Axis)和交叉轴(Cross Axis):Flex 布局中有两个轴,主轴默认为水平方向,交叉轴为垂直方向,这可以通过 flex-direction 属性进行调整。
  • Flex 方向(Flex Direction)flex-direction 属性决定 Flex 项目的排列方向,可以是行(row)、行逆序(row-reverse)、列(column)或列逆序(column-reverse)。
  • Flex 包裹(Flex Wrap)flex-wrap 属性控制 Flex 项目是否换行显示。
  • 对齐方式justify-content 控制主轴上的对齐方式,align-items 控制交叉轴上的对齐方式,align-content 控制多行/列间的对齐方式。

2.1.2 重点案例:创建一个响应式导航菜单

让我们来创建一个简单且响应式的导航菜单,这个菜单将在大屏幕上水平显示,在小屏幕上转换为垂直堆叠。

  • HTML 结构
<nav class="flex-nav"><a href="#">首页</a><a href="#">关于我们</a><a href="#">服务</a><a href="#">联系我们</a>
</nav>
  • CSS 样式
.flex-nav {display: flex;list-style: none;padding: 0;margin: 0;background: #333;
}.flex-nav a {color: white;padding: 10px;text-decoration: none;flex-grow: 1;text-align: center;
}@media (max-width: 600px) {.flex-nav {flex-direction: column;}
}

在这个案例中,.flex-nav 容器在大屏幕上默认展示为一行,每个链接平等地占据空间(感谢 flex-grow: 1)。当屏幕尺寸小于 600px 时,通过媒体查询改变 flex-directioncolumn,使菜单垂直堆叠。

2.1.3 拓展案例 1:卡片布局

假设你需要创建一个产品展示页面,每个产品都是一个卡片,你想要它们在大屏幕上平均分布,在小屏幕上自适应堆叠。

  • HTML 结构
<div class="cards"><div class="card">卡片 1</div><div class="card">卡片 2</div><div class="card">卡片 3</div>
</div>
  • CSS 样式
.cards {display: flex;padding: 10px;justify-content: space-around;flex-wrap: wrap;
}.card {flex: 1;margin: 10px;min-width: 100px;background: lightgrey;padding: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

这个布局利用了 `

flex-wrap: wrap; 来确保卡片在必要时可以换行,flex: 1;让每个卡片都尽可能平等地占据空间,但min-width` 确保它们不会被挤得太小。

2.1.4 拓展案例 2:中心对齐的登录表单

创建一个登录表单,无论在何种屏幕尺寸下,总是垂直和水平居中显示。

  • HTML 结构
<div class="login-container"><form class="login-form"><input type="text" placeholder="用户名"><input type="password" placeholder="密码"><button type="submit">登录</button></form>
</div>
  • CSS 样式
.login-container {display: flex;height: 100vh;justify-content: center;align-items: center;
}.login-form > * {margin: 10px;padding: 5px;
}

通过设置 .login-containerjustify-contentalign-items 属性,我们可以轻松地实现表单在容器中的中心对齐,无论容器的大小如何变化。

通过这些案例,我们可以看到 Flexbox 提供了一个灵活而强大的方式来处理网页布局的挑战。不仅仅是导航菜单、卡片布局或是登录表单,几乎任何你能想到的布局都可以用 Flexbox 轻松实现。所以,开始使用 Flexbox 吧,享受它带来的布局自由和乐趣!

在这里插入图片描述


2.2 Grid 布局:网格系统的魔力

在 CSS 的宝库中,Grid 布局无疑是一颗璀璨的明珠。它为我们提供了一个二维布局系统,通过行和列的方式来组织内容,极大地增强了我们对网页布局的控制能力。让我们深入探索 Grid 布局的魔法,看看如何利用它来创造精美且功能强大的布局吧!

2.2.1 基础知识

  • Grid 容器:通过将一个元素的 display 属性设置为 gridinline-grid,你可以定义一个 Grid 容器,其直接子元素将成为 Grid 项。
  • 行和列:可以使用 grid-template-rowsgrid-template-columns 属性来定义 Grid 容器中的行和列的大小。
  • Grid 网格线:Grid 布局是基于网格线的,这些网格线包括行网格线和列网格线,用于定位 Grid 项。
  • Grid 区域:通过 grid-area 属性,可以将 Grid 项放置在容器的任何区域内,这些区域是由行网格线和列网格线定义的。
  • 对齐和间隔justify-itemsalign-itemsjustify-contentalign-contentgap 属性允许你控制 Grid 项的对齐方式和行列之间的间隔。

2.2.2 重点案例:创建一个新闻网站的布局

想象你正在为一个新闻网站设计首页,需要一个包含头条新闻、多个新闻分类和侧边栏的复杂布局。

  • HTML 结构
<div class="news-grid"><div class="headline">头条新闻</div><div class="category news">新闻</div><div class="category sports">体育</div><div class="category entertainment">娱乐</div><div class="sidebar">侧边栏</div>
</div>
  • CSS 样式
.news-grid {display: grid;grid-template-columns: 2fr 1fr;grid-template-rows: auto 1fr 1fr;gap: 20px;
}.headline {grid-column: 1 / -1; /* 占据整个宽度 */
}.category {height: 200px;
}.sidebar {grid-row: 2 / 4; /* 跨越两行 */
}

这个布局利用了 Grid 的强大功能,创建了一个响应性强、结构清晰的新闻首页布局,头条新闻占据了上方的整个宽度,新闻分类在左侧分列显示,侧边栏在右侧跨越两行的高度。

2.2.3 拓展案例 1:画廊布局

为一家艺术画廊创建一个展示作品的网页布局,其中作品需要以不同的大小展示,以吸引访问者的注意。

  • HTML 结构
<div class="gallery"><div class="art large">大型艺术作品</div><div class="art medium">中型艺术作品</div><div class="art small">小型艺术作品</div><!-- 更多艺术作品 -->
</div>
  • CSS 样式
.gallery {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}.art {background-color: #f0f0f0;padding: 20px;
}.large {grid-column: span 2;
}.medium {grid-column: span 1;
}.small {grid-column: span 1;
}

通过 grid-column: span X; 属性,我们可以控制每件艺术作品占据的列数,从而创造出一个动态且吸引人的画廊布局。

2.2.4 拓展案例 2:个人博客的文章布局

设计一个个人博客文章页面,包括文章内容、作者信息和相关文章推荐。

  • HTML 结构
<div class="blog-post"><div class="article">文章内容</div><div class="author-info">作者信息</div><div class="related-articles">相关文章</div>
</div>
  • CSS 样式
.blog-post {display: grid;grid-template-columns: 3fr 1fr;gap: 20px;
}.article {grid-column: 1 / 2;
}.author-info, .related-articles {grid-column: 2 / 3;
}

在这个布局中,文章内容在左侧占据更大的空间,而作者信息和相关文章推荐则在右侧的较小空间内垂直排列,实现了清晰且易于阅读的文章布局。

通过这些案例,我们可以看到 Grid 布局如何使得创建复杂和响应式的网页布局变得简单且直观。无论是新闻网站的首页、艺术画廊的展示,还是个人博客的文章页面,Grid 都提供了强大而灵活的布局解决方案。掌握了 Grid,你就掌握了创建美观、实用且响应式布局的魔法。

在这里插入图片描述


2.3 定位技巧:Static、Relative、Absolute、Fixed 和 Sticky

在 CSS 的世界里,元素的定位是实现精确布局的关键。定位属性定义了元素在页面上如何定位,包括其在文档流中的行为和如何与其他元素相互作用。让我们深入了解这五种定位模式:staticrelativeabsolutefixedsticky,并探索它们如何让我们的布局工作变得更加灵活和强大。

2.3.1 基础知识

  • Static(静态定位):这是所有元素的默认定位方式。它们按照正常的文档流进行布局,不会被 toprightbottomleft 属性影响。
  • Relative(相对定位):元素的位置相对于其在正常文档流中的位置进行调整。设置 toprightbottomleft 属性会使其移动,但不会影响其他元素的位置。
  • Absolute(绝对定位):元素的位置相对于最近的非 static 定位的祖先元素进行定位。它从文档流中脱离,不占据空间,可能会覆盖页面上的其他元素。
  • Fixed(固定定位):元素的位置相对于浏览器窗口进行定位,即使滚动页面也会保持在固定位置。
  • Sticky(粘性定位):元素根据用户的滚动位置在 relativefixed 定位之间切换。它在视口内滚动到达指定位置前是相对定位的,之后变为固定定位。

2.3.2 重点案例:创建一个固定在顶部的导航栏

一个常见的需求是,无论用户如何滚动页面,导航栏始终固定在页面的顶部。

  • HTML 结构
<div class="fixed-nav"><a href="#">首页</a><a href="#">服务</a><a href="#">关于我们</a><a href="#">联系我们</a>
</div>
  • CSS 样式
.fixed-nav {position: fixed;top: 0;width: 100%;background-color: #333;padding: 10px 0;z-index: 1000;text-align: center;
}.fixed-nav a {color: white;text-decoration: none;padding: 10px 15px;
}

通过设置 position: fixed;top: 0;,导航栏会固定在视口的顶部,不随页面滚动而移动。

2.3.3 拓展案例 1:模态弹窗

模态弹窗(Modal)是一种在当前页面上显示信息或表单的好方法,而不需要跳转到新页面。

  • HTML 结构
<div class="modal"><div class="modal-content"><span class="close-button">×</span><p>这是一个模态弹窗!</p></div>
</div>
  • CSS 样式
.modal {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;
}.modal-content {position: relative;background-color: #fefefe;margin: 15% auto;padding: 20px;width: 80%;max-width: 600px;
}

设置 .modalposition: fixed; 可以确保背景覆盖整个视口,而 .modal-content 则在视口中央显示。

2.3.4 拓展案例 2:使用 Sticky 定位实现粘性页脚

假设你希望页脚在内容足够长时位于页面底部,但当内容不够长无法填满视口时,页脚始终粘在视口底部。

  • HTML 结构
<div class="content">这里是内容...</div>
<footer class="sticky-footer">粘性页脚</footer>
  • CSS 样式
.sticky-footer {position: sticky;bottom: 0;background-color: #333;color: white;text-align: center;padding: 10px 0;
}

通过设置 position: sticky;bottom: 0;,页脚在内容足够长时位于内容下方,内容不够长时则粘在视口底部。

通过这些案例,我们可以看到定位技巧在实现各种布局需求时的强大能力和灵活性。无论是创建固定导航栏、模态弹窗还是粘性页脚,理解并掌握这些定位技巧将使你能够更加自信地设计和实现复杂的布局。继续探索和实践,让你的网页更加动态和互动吧!

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

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

相关文章

C语言求解猴子分桃子

问题&#xff1a;海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只 猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了 一个&#xff0c;它同样把多的…

english_syntax

文章目录 什么是英语的句子&#xff1f;英语句子的结构句子的成分&#xff08;词性问题&#xff09;谓语系动词主语宾语表语 并列句从句引导词名词性从句形容词性从句&#xff08;定语从句&#xff09;副词性从句&#xff08;状语从句&#xff09; 特殊结构强调句型倒装句型虚拟…

VitePress-13- 配置-title的作用详解

作用描述 1、title 是当前站点的标题&#xff1b;2、默认值是 &#xff1a;VitePress&#xff1b;3、当使用默认主题时&#xff0c;会直接展示在 页面的【导航条】中&#xff1b;4、一个特殊的作用 &#xff1a; 会作为单个页面的默认标题后缀&#xff01;除非又指定了【title…

WSL下如何使用Ubuntu本地部署Vits2.3-Extra-v2:中文特化修复版(新手从0开始部署教程)

环境&#xff1a; 硬&#xff1a; 台式电脑 1.cpu:I5 11代以上 2.内存16G以上 3.硬盘固态500G以上 4.显卡N卡8G显存以上 20系2070以上 本案例英伟达4070 12G 5.网络可连github 软&#xff1a; Win10 专业版 19045以上 WSL2 -Ubuntu22.04 1.bert-Vits2.3 Extra-v2:…

CSP-201912-1-报数

CSP-201912-1-报数 知识点总结 整数转化为字符串#include <string> string str_num to_string(num);字符串中查找是否包含字符‘7’&#xff1a;str_num.find(7) 未找到返回-1找到返回返回该字符在字符串中的位置&#xff08;即第一次出现的索引位置&#xff09; #i…

腾讯云4核8G服务器够用吗?容纳多少人同时访问?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

java nio零拷贝

零拷贝是一种计算机执行IO操作的优化技术&#xff0c;其核心目标是减少数据拷贝次数&#xff0c;从而提高系统性能。它主要体现在以下几个方面&#xff1a; 1. **定义与原理**&#xff1a;零拷贝字面上的意思包括“零”和“拷贝”。其中&#xff0c;“拷贝”是指数据从一个存储…

读千脑智能笔记11_保存人类遗产

1. 智能生物通常能延续多久 1.1. SETI和METI计划的可行性在很大程度上取决于智能生物通常能延续多久 1.1.1. 搜寻地外文明&#xff08;以下简称SETI&#xff09;计划的目标 1.1.1.1. 这是一个力图寻找宇宙其他地方智能生物存在证据的研究项目 1.1.1.2. SETI计划旨在寻找含有…

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easy_sql解析

查看网页 有提示&#xff0c;参数是wllm&#xff0c;并且要我们输入点东西 所以&#xff0c;我们尝试以get方式传入 有回显&#xff0c;但似乎没啥用 从上图看应该是字符型漏洞&#xff0c;单引号字符注入 先查看字段数 /?wllm2order by 3-- 没回显 报错了&#xff0c;说明…

顺序表、链表(ArrayList、LinkedList)

目录 前言&#xff1a; 顺序表&#xff08;ArrayList&#xff09;&#xff1a; 顺序表的原理&#xff1a; ArrayList源码&#xff1a; 的含义&#xff1a;​编辑 ArrayList的相关方法&#xff1a;​编辑 向上转型List&#xff1a; 练习题&#xff08;杨辉三角&#x…

轻薄型工业平板亿道EM-T195,续航持久高达10小时

时尚而坚固的 10.1英寸EM-T195触摸屏平板电脑融合了高耐力和无与伦比的适应性&#xff0c;可抵御极端天气条件和多重冲击&#xff0c;借助强大的联发科8核处理器&#xff0c;它可以从容面对任何工作挑战。 其读取能力&#xff08;2D 成像器&#xff09;结合其坚固性&#xff0…

探索现代Web前端开发框架:选择最适合你的工具

在当今快速发展的Web开发领域&#xff0c;前端开发框架的选择显得尤为关键。这些框架可以帮助我们更高效地构建出交互性强、性能卓越的用户界面。本文将带你了解几个当前最受欢迎的Web前端开发框架&#xff0c;并帮助你根据自己的需求选择最合适的工具。 1. React React由Fac…

2.10日学习打卡----初学RocketMQ(一)

2.10日学习打卡 对于MQ(Message queue)消息队列的一些解释可以看我原来写的文章 初学RabbitMQ 各大MQ产品比较 一.RocketMQ概述 发展历程 RocketMQ概念术语 生产者和消费者 生产者负责生产消息&#xff0c;一般由业务系统负责生产消息&#xff0c;消费者即后台系统&…

无人机遥感技术应用分析,无人机遥感系统测绘技术详解

由于无人机具有机动快速、使用成本低、维护操作简单等技术特点,因此被作为一种理想的飞行平台广泛应用于军事和民用各个领域。尤其是进入二十一世纪以后,许多国家将无人机系统的研究、开发、应用置于优先发展的地位,体积小、重量轻、探测精度高的新型传感器的不断问世,也使无人…

解决挂梯子 无法正常上网 的问题

方法&#xff1a; 打开 控制面板 &#x1f449; 网络和Internet &#x1f449; Internet选项 &#x1f449; 连接 &#x1f449; 局域网设置 &#x1f449; 代理服务器 &#x1f449; 取消选项 有问题可参考下图

中科大计网学习记录笔记(九):DNS

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…

【MySQL】-18 MySQL综合-4(MySQL储存引擎精讲+MySQL数据类型简介+MySQL整数类型+MySQL小数类型)

MySQL储存引擎精讲MySQL数据类型简介MySQL整数类型MySQL小数类型 十一 MySQL存储引擎精讲11.1 什么是存储引擎11.2 MySQL 5.7 支持的存储引擎11.3 如何选择 MySQL 存储引擎11.4 MySQL 默认存储引擎 十二 MySQL数据类型简介12.1 MySQL 常见数据类型1) 整数类型2) 日期/时间类型3…

Python中的正则表达式(一)

在Python中&#xff0c;正则表达式是一种用于匹配和操作字符串的强大工具。正则表达式由一系列字符和特殊字符组成&#xff0c;用于定义搜索模式。 在Python中&#xff0c;我们使用内置的 re 模块来操作正则表达式。要使用正则表达式&#xff0c;我们首先需要导入 re 模块。 下…

飞天使-linux操作的一些技巧与知识点8-zabbix6.0 容器搭建

文章目录 安装docker安装步骤mysql下载镜像安装zabbix 使用zabbix非host模式创建 测试效果 安装docker 1. 配置官方 yum 源$ sudo yum install -y yum-utils $ sudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.repo2. 安装 Docker$ …

微服务入门篇:http客户端Feign(远程调用,自定义配置,Feign的性能优化,Feign服务抽取)

目录 1.基于Feign的远程调用1.RestTemplate方式调用存在的问题2.Feign的介绍3.定义和使用Feign客户端 2.自定义配置1.方式一&#xff1a;配置文件方式2.方式二: java代码方式&#xff0c;需要先声明一个Bean: 3.Feign的性能优化1.Feign底层的客户端实现2.连接池配置 4.Feign的最…