深入CSS 布局——WEB开发系列29

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。

一、正常布局流（Normal Flow）

CSS的布局基础是“正常流”，也就是页面元素在没有特别指定布局方式时的默认排列方式。正常流分为两种主要类型：

  1. 块级元素：默认情况下，块级元素会独占一行，并且从上到下排列。常见的块级元素有​​<div>​​、​​<p>​​、​​<h1>​​、​​<ul>​​等。
  2. 行内元素：行内元素不会独占一行，它们会在一行内从左到右排列，直到空间不足再换行。常见的行内元素有​​<span>​​、​​<a>​​、​​<img>​​等。

举个简单的例子：

<div><p>这是一个段落。</p><p>这是另一个段落。</p>
</div>

两个段落​​<p>​​都是块级元素，它们会按照正常流的规则垂直排列。而且，即使你在​​<p>​​​标签之间加入了许多空格，段落依然会在页面中按照垂直方向排列。

二、Display属性

​​display​​属性决定了元素的布局行为。最常见的​​display​​值包括​​block​​、​​inline​​、​​inline-block​​、​​none​​以及我们将在后文讨论的​​flex​​和​​grid​​。

  1. block：将元素定义为块级元素，使其独占一行。
  2. inline：将元素定义为行内元素，使其在行内排列。
  3. inline-block：结合了​​block​​和​​inline​​的特性，元素本身是行内元素，但可以设置宽高等属性。
  4. none：完全隐藏元素，元素不占据任何空间。

一个例子展示了这些不同的​​display​​​值的效果：

<div style="display: block;">这是一个块级元素</div>
<span style="display: inline;">这是一个行内元素</span>
<div style="display: inline-block; width: 100px;">这是一个inline-block元素</div>

​​display​​​属性是理解CSS布局的基础，它控制了元素在页面上的布局行为。

三、弹性盒子（Flexbox）

弹性盒子（Flexbox）是CSS3引入的一种布局模式，用来为不同尺寸的屏幕设计复杂的布局。通过设置​​display: flex;​​，你可以将一个容器变成弹性容器（Flex container），而其内部的子元素则成为弹性项（Flex items）。

1. 设置 ​​display: flex;​​

将父元素设置为​​display: flex;​​​后，子元素将自动按照水平（默认）或垂直方向排列，并且能够灵活调整大小以适应容器。

<div style="display: flex;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div>
</div>

三个子元素在同一行水平排列，因为默认情况下​​flex-direction​​是​​row​​。

2. 设置 ​​flex​​ 属性

​​flex​​属性是弹性盒子的核心，用于设置弹性项如何在弹性容器中分配空间。它通常写作​​flex: 1;​​、​​flex: 2;​​​等，表示子元素在容器中所占的相对比例。

<div style="display: flex;"><div style="flex: 1; background-color: lightblue;">Item 1</div><div style="flex: 2; background-color: lightgreen;">Item 2</div><div style="flex: 1; background-color: lightcoral;">Item 3</div>
</div>

​​Item 2​​占据的空间是​​Item 1​​和​​Item 3​​​的两倍。

3. 弹性盒子布局的其他属性

  • ​justify-content​​：控制弹性项在主轴（默认水平轴）上的对齐方式。常见值有​​flex-start​​（左对齐）、​​center​​（居中）、​​space-between​​（两端对齐，间隔均匀）等。
  • ​​align-items​​：控制弹性项在交叉轴（默认垂直轴）上的对齐方式。常见值有​​stretch​​（拉伸）、​​center​​（居中）、​​flex-start​​​（顶部对齐）等。
<div style="display: flex; justify-content: space-between; align-items: center;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div>
</div>

上面的代码展示了如何通过​​justify-content​​和​​align-items​​​控制子元素的排列方式。

四、Grid布局

Grid布局是CSS的一种二维布局系统，可以非常轻松地创建复杂的网页布局。与Flexbox相比，Grid布局能够同时控制行和列。

1. 设置 ​​display: grid;​​

通过设置​​display: grid;​​​，你可以将一个容器变成网格容器（Grid container），并在其中定义行和列。

<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div><div style="background-color: lightpink;">Item 4</div>
</div>

网格容器被定义为三列两行，每个单元格大小为100px。子元素将自动填充这些网格单元。

2. 在网格内放置元素

你可以通过​​grid-column​​和​​grid-row​​​属性来指定元素在网格中的位置。

<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;"><div style="background-color: lightblue; grid-column: 1 / 3; grid-row: 1 / 2;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div><div style="background-color: lightpink;">Item 4</div>
</div>

此例中，​​Item 1​​​占据了网格的前两列和第一行。

3. Grid布局的其他属性

  • ​​gap​​：设置网格单元格之间的间隔。
  • ​​grid-template-areas​​​：定义命名网格区域，可以用于创建更语义化的布局。
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'header header header''sidebar content content''footer footer footer';"><div style="grid-area: header; background-color: lightblue;">Header</div><div style="grid-area: sidebar; background-color: lightgreen;">Sidebar</div><div style="grid-area: content; background-color: lightcoral;">Content</div><div style="grid-area: footer; background-color: lightpink;">Footer</div>
</div>

通过​​grid-template-areas​​​，我们创建了一个包含头部、侧边栏、内容区和底部的布局。

五、浮动（Float）

浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。通过设置​​float: left;​​或​​float: right;​​​，可以使元素分别浮动到父容器的左侧或右侧。

<div style="overflow: hidden;"><img src="image.jpg" style="float: left; margin-right: 20px;"><p>这是一个浮动示例，图片将浮动到左侧，文本将围绕在图片周围。</p>
</div>

在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。

需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。解决方法是在浮动元素之后使用清除浮动（clear）技术：

.clearfix::after {content: "";display: table;clear: both;
}

使用​​.clearfix​​​类可以确保父容器包裹住浮动的子元素。

六、定位技术（Position）

CSS定位是通过设置​​position​​属性来改变元素在文档中的位置。主要的定位方式包括：

1. 简单定位示例

简单的定位属性包括​​static​​（默认）、​​relative​​、​​absolute​​、​​fixed​​和​​sticky​​。

<div style="position: relative; top: 20px; left: 30px;">这是一个相对定位的元素
</div>

2. 相对定位（Relative）

相对定位使元素相对于其正常位置进行移动。它不会影响文档流中其他元素的布局。

<div style="position: relative; top: 10px; left: 15px;">这是一个相对定位的元素
</div>

元素相对于其原始位置向下移动了10px，向右移动了15px。

3. 绝对定位（Absolute）

绝对定位的元素相对于最近的已定位祖先元素进行定位（如果没有，则相对于初始包含块）。绝对定位的元素脱离了文档流，不会影响其他元素的布局。

<div style="position: relative;"><div style="position: absolute; top: 0; right: 0;">这是一个绝对定位的元素</div>
</div>

内部的绝对定位元素相对于其父元素的右上角进行定位。

4. 固定定位（Fixed）

固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。

<div style="position: fixed; bottom: 0; right: 0;">这是一个固定定位的元素
</div>

一个固定在浏览器窗口右下角的元素，即使页面滚动，它的位置也不会改变。

5. 粘性定位（Sticky）

粘性定位结合了相对定位和固定定位的特点，当元素在页面中滚动到一定位置时，会“粘”住并保持在该位置。

<div style="position: sticky; top: 0; background-color: yellow;">这是一个粘性定位的元素
</div>

当页面滚动时，元素会在到达顶部时固定在顶部。

七、表格布局

表格布局是一种老式但仍然有效的布局方式，特别适用于展示结构化数据。表格布局使用​​<table>​​、​​<tr>​​、​​<td>​​等标签定义行和列。

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>28</td></tr><tr><td>李四</td><td>24</td></tr>
</table>

上述示例如何使用表格布局来展示数据。

八、多列布局

多列布局（Multi-column Layout）是一种将内容分为多个列的布局方式，类似于报纸的排版。通过​​column-count​​和​​column-width​​等属性，可以轻松实现多列布局。

<div style="column-count: 3; column-gap: 20px;">这是一个多列布局的示例。通过使用CSS的多列布局属性，我们可以将内容分为多个列。这种布局方式非常适合用于展示较长的文本内容，如新闻文章或博客文章。
</div>

文本被分成了三列，并且列与列之间有20px的间隔。

九、CSS布局综合练习题

为了更好地理解这些布局技术，我们来看看两个综合练习题，并提供相应的代码示例。

题1：创建一个三栏布局

使用Flexbox创建一个响应式三栏布局，其中左栏和右栏固定宽度，中间栏自适应剩余空间。

<div style="display: flex;"><div style="flex: 0 0 200px; background-color: lightblue;">左栏</div><div style="flex: 1; background-color: lightgreen;">中间栏</div><div style="flex: 0 0 200px; background-color: lightcoral;">右栏</div>
</div>

题2：创建一个简单的网格布局

使用Grid布局创建一个三行三列的网格，其中第一行的两个单元格合并为一个单元格，第三行的三个单元格合并为一个单元格。

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;"><div style="grid-column: span 2; background-color: lightblue;">合并两个单元格</div><div style="background-color: lightgreen;">单元格2</div><div style="background-color: lightcoral;">单元格3</div><div style="background-color: lightpink;">单元格4</div><div style="grid-column: span 3; background-color: lightgray;">合并三个单元格</div>
</div>

如有表述错误及欠缺之处敬请指正补充。 

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

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

相关文章

P5734 【深基6.例6】文字处理软件

P5734 【深基6.例6】文字处理软件

1. string的函数 #include <bits/stdc.h> using namespace std; int main() {int n,m; cin >> n;string s, a, b, c;cin >> s;for (int i 0; i < n; i) {cin >> m;if (m 1) {cin >> a;s a;cout << s << endl;}if (m 2) {int …
阅读更多...
自然语言处理系列六十三》神经网络算法》LSTM长短期记忆神经网络算法

自然语言处理系列六十三》神经网络算法》LSTM长短期记忆神经网络算法

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 自然语言处理系列六十三神经网络算法》LSTM长短期记忆神经网络算…
阅读更多...
Windows一键安装Mysql数据库|非官方复杂安装,解压即可,操作简单

Windows一键安装Mysql数据库|非官方复杂安装,解压即可,操作简单

我们都知道在官方安装mysql数据库极其复杂&#xff0c;还极大概率遇到各种问题&#xff0c;今天教大家只要解压就可安装完数据库&#xff0c;操作及其简单绿色。 版本包括了mysql8或mysql5&#xff0c;各位各取所需即可。 不管你之前是否安装过数据库&#xff0c;只要端口330…
阅读更多...
Java代码审计篇 | ofcms系统审计思路讲解 - 篇3 | 文件上传漏洞审计

Java代码审计篇 | ofcms系统审计思路讲解 - 篇3 | 文件上传漏洞审计

文章目录 0. 前言1. 文件上传代码审计【有1处】1.1 可疑点1【无漏洞】1.1.1 直接搜索upload关键字1.1.2 选择第一个&#xff0c;点进去分析一下1.1.3 分析this.getFile()方法1.1.4 分析new MultipartRequest(request, uploadPath)1.1.5 分析isSafeFile()方法1.1.6 分析request.…
阅读更多...
一款rust语言AI神器cursor在ubuntu环境下的安装启动教程

一款rust语言AI神器cursor在ubuntu环境下的安装启动教程

虽然cursor目前只支持英文但是它强大的代码联想能力以及问答能力&#xff0c;可以高效的提高编码效率。 如下步骤所有的前提是你的ubuntu上面已经安装了rust以及其必须的extensions。 1 下载 到官网https://www.cursor.com下载指定版本的软件。 下载到本地以后会生成如下软件…
阅读更多...
Spring Cloud之二 微服务注册

Spring Cloud之二 微服务注册

1&#xff1a;Intellij 新建服务 user-service 2&#xff1a;pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"…
阅读更多...
electron有关mac构建

electron有关mac构建

针对 Mac M1/2/3 芯片的设备&#xff0c;proces.archarm64. 执行下面命令&#xff0c;检查下按照的 node.js 版本是不是 intel x64 指令集&#xff0c;如果是的话安装下 arm64 指令集的 node.js终端中执行以下命令&#xff1a;node -p process.arch 对应的node版本也是arm版 …
阅读更多...
【一起学Rust | 进阶篇】使用Bon快速生成builder，提高代码质量

【一起学Rust | 进阶篇】使用Bon快速生成builder，提高代码质量

文章目录 前言一、安装Bon二、使用步骤1.为方法实现builder2.实现关联方法的builder3. 为结构体实现builder4. Option<T>字段成为可选项5. 实现Into转化 参考文档 前言 在 Rust 编程语言中&#xff0c;除了广为人知的单例模式之外&#xff0c;工厂模式也是极为容易见到的…
阅读更多...
STM32的寄存器深度解析

STM32的寄存器深度解析

目录 一、STM32 寄存器概述 二、寄存器的定义与作用 三、寄存器分类 1.内核寄存器 2.外设寄存器 四、重要寄存器详解 1.GPIO 相关寄存器 2.定时器相关寄存器 3.中断相关寄存器 4.RCC 相关寄存器 五、寄存器操作方法 1.直接操作寄存器 2.使用库函数操作寄存器 六…
阅读更多...
C++_18_重载运算符

C++_18_重载运算符

重载运算符 意义&#xff1a;使该类对象使用该运算符时 与 该运算符本意不同 就是 起别的作用了 范围 在 重载的那个类中起效 语法&#xff1a; 返回值类型 operator 运算符(形参列表) {函数体; }举例&#xff1a; 注意 &#xff1a; ​ 形参中 使用 & &#xff08;引用&…
阅读更多...
JavaWeb中处理 Web 请求的方式总结

JavaWeb中处理 Web 请求的方式总结

文章目录 JavaWeb中处理 Web 请求的方式总结1. 原始的 Servlet 方式1.1. 环境搭建**创建 Maven 或 Gradle 项目**&#xff1a;**添加 Servlet 依赖**&#xff1a;**创建 Servlet 类**&#xff1a;**配置项目**&#xff1a;**配置 Tomcat**&#xff1a; 1.2. 路由机制1.3. 示例代…
阅读更多...
CPU调度算法之SJF（短作业优先）

CPU调度算法之SJF（短作业优先）

摘要 CPU的短作业优先&#xff08;SJF, Shortest Job First&#xff09;任务调度算法是一种旨在提高系统响应速度和效率的调度策略。该算法通过优先执行预计运行时间最短的任务&#xff0c;从而减少平均等待时间&#xff0c;提高系统的整体吞吐量。虽然SJF算法在许多场景下表现…
阅读更多...
《垃圾回收的算法与实现》-算法-摘抄

《垃圾回收的算法与实现》-算法-摘抄

本文是书籍《垃圾回收的算法与实现》的摘抄&#xff0c;不涉及算法源码及步骤讲解模块。 预备 对象由头(header)和域(field)构成。 头&#xff1a;对象中保存对象本身信息的部分&#xff0c;主要含有以下信息&#xff1a;对象的大小和种类。 域&#xff1a;对象使用者在对象…
阅读更多...
【Java毕业设计】基于SpringBoot+Vue+uniapp的农产品商城系统

【Java毕业设计】基于SpringBoot+Vue+uniapp的农产品商城系统

文章目录 一、系统架构1、后端&#xff1a;SpringBoot、Mybatis2、前端&#xff1a;Vue、ElementUI4、小程序&#xff1a;uniapp3、数据库&#xff1a;MySQL 二、系统功能三、系统展示1、小程序2、后台管理系统 一、系统架构 1、后端&#xff1a;SpringBoot、Mybatis 2、前端…
阅读更多...
还不懂BIO,NIO,AIO吗

还不懂BIO,NIO,AIO吗

BIO&#xff08;Blocking I/O&#xff09;、NIO&#xff08;Non-blocking I/O&#xff09;和 AIO&#xff08;Asynchronous I/O&#xff09;是 Java 中三种不同的 I/O 模型&#xff0c;主要用于处理输入 / 输出操作。 一、BIO&#xff08;Blocking I/O&#xff09; 定义与工作原…
阅读更多...
YOLOV3实现越界检测——智能安防

YOLOV3实现越界检测——智能安防

目录 应用前景 1. 安全监控系统 2. 家庭安防系统 3. 无人机监控 4. 交通管理 5. 无人驾驶技术 6. 大型活动现场 代码说明 1. YOLO 模型加载 2. 摄像头视频流捕获 3. 安全区域绘制 4. YOLOv3 目标检测 5. 过滤和标记人类目标 6. 入侵检测 7. 结果显示和退出 总结…
阅读更多...
断点回归模型

断点回归模型

断点回归&#xff08;Regression Discontinuity Design, RDD&#xff09;是一种准实验设计方法&#xff0c;用于评估政策或其他干预措施的效果。这种方法利用了一个清晰的阈值或“断点”&#xff0c;在这个阈值上&#xff0c;处理状态&#xff08;例如是否接受某种干预&#xf…
阅读更多...
DevC++编译及使用Opencv

DevC++编译及使用Opencv

1.依赖 需要如下依赖&#xff1a; DevC11Opencv4.10.0CMake.exe 整个安装过程参考下面的文章&#xff1a;https://blog.csdn.net/weixin_41673576/article/details/108519841 这里总结一下遇到的问题。 2.问题 2.1 DevC安装路径 一定不要有空格&#xff01;&#xff01;否则…
阅读更多...
tekton pipeline workspaces

tekton pipeline workspaces

tekton pipeline workspace是一种为执行中的管道及其任务提供可用的共享卷的方法。 在pipeline中定义worksapce作为共享卷传递给相关的task。在tekton中定义workspace的用途有以下几点: 存储输入和/或输出在task之间共享数据secret认证的挂载点ConfigMap中保存的配置的挂载点…
阅读更多...
阿里中间件——diamond

阿里中间件——diamond

一、前言 最近工作不忙闲来无事&#xff0c;仔细分析了公司整个项目架构&#xff0c;发现用到了很多阿里巴巴集团开源的框架&#xff0c;今天要介绍的是中间件diamond. 二、diamond学习笔记 1、diamond简介 diamond是一个管理持久配置&#xff08;持久配置是指配置数据会持久化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023