css 布局方式

1. 标准流布局(Normal Flow)

  • 描述:这是最基础的布局方式,元素按照文档的顺序从上到下排列,块级元素垂直排列,内联元素水平排列。
  • 应用:适用于大部分简单的网页布局。
  • 示例
<div>块级元素1</div>
<div>块级元素2</div>
<span>内联元素</span>

2. 浮动布局(Float)

  • 描述:通过 float 属性将元素浮动,使其脱离正常文档流,可以让元素横向排列。
  • 应用:传统的多列布局,尽管现代布局方式有了更多的选择,浮动布局仍然在某些场景中使用。
  • 示例
.container {width: 100%;
}
.left {float: left;width: 50%;
}
.right {float: right;width: 50%;
}

3. 定位布局(Positioning)

  • 描述:通过 position 属性(staticrelativeabsolutefixedsticky)控制元素的位置。
  • 应用:需要精确控制元素位置时使用。
  • 示例
.relative {position: relative;left: 10px;top: 20px;
}
.absolute {position: absolute;top: 50px;left: 50px;
}

4. 弹性盒子布局(Flexbox)

  • 描述:通过 display: flex 来创建一个灵活的容器,子元素可以按行或列排列,并且能够根据容器的大小自动调整布局。
  • 应用:适用于一维布局(单行或单列)。
  • 示例
.container {display: flex;justify-content: space-between; /* 水平分布 */align-items: center;            /* 垂直居中 */
}
.item {flex: 1; /* 让所有子元素平分空间 */
}

5. 网格布局(Grid)

  • 描述:通过 display: grid 创建一个二维网格布局,允许在行和列的方向上进行精确控制。
  • 应用:适用于复杂的布局,尤其是需要同时控制行和列时。
  • 示例
.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3列 */grid-template-rows: auto;              /* 自动高度 */gap: 10px;                             /* 列/行间隙 */
}
.item {grid-column: span 2; /* 占据两列 */
}

6. 表格布局(Table Layout)

  • 描述:使用 display: tabledisplay: table-cell 来模仿 HTML 表格的布局,适用于需要表格形式的内容展示。
  • 应用:可以处理复杂的表格内容布局。
  • 示例
.container {display: table;width: 100%;
}
.item {display: table-cell;padding: 10px;
}

7. 多列布局(Multi-column Layout)

  • 描述:使用 column-countcolumn-gap 来实现多列布局。
  • 应用:适用于文本内容的多列排版,如新闻网站的文章布局。
  • 示例
.container {column-count: 3; /* 创建三列 */column-gap: 20px; /* 列间距 */
}

8. 响应式布局

  • 描述:通过 @media 查询根据不同的设备屏幕大小调整布局。
  • 应用:适用于设计自适应不同屏幕尺寸的网页。
  • 示例
@media (max-width: 600px) {.container {flex-direction: column; /* 屏幕小于600px时列方向布局 */}
}

9. CSS 变量布局

  • 描述:使用 CSS 变量 (--var-name) 动态控制布局的各个部分,便于主题化和自适应设计。
  • 应用:增强代码可读性和重用性。
  • 示例
:root {--main-color: #3498db;
}
.container {background-color: var(--main-color);
}

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

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

相关文章

EXCEL数据清洗的几个功能总结备忘

目录 0 参考教材 1 用EXCEL进行数据清洗的几个功能 2 删除重复值&#xff1a; 3 找到缺失值等 4 大小写转换 5 类型转化 6 识别空格 0 参考教材 精通EXCEL数据统计与分析&#xff0c;中国&#xff0c;李宗璋用EXCEL学统计学&#xff0c;日EXCEL统计分析与决策&#x…

基于小程序实现地图定位、轨迹绘制、地图标点、快捷导航、唤醒导航APP、开箱即用

目录 前言研究背景与意义研究目标与内容研究方法与技术路线小程序地图组件介绍定位技术与原理轨迹绘制技术地图标注与标记功能地图定位与轨迹绘制功能实现定位功能设计与实现获取用户当前位置总结说明代码块前言 研究背景与意义 地图定位和轨迹追踪作为智能手机中常见的功能之…

计算机网络之网络层超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络之网络层超详细讲解 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; …

【数字花园】数字花园(个人网站、博客)搭建经历汇总教程

目录 写在最最前面第一章&#xff1a;netlify免费搭建数字花园相关教程使用的平台步骤信息管理 第二章&#xff1a;本地部署数字花园数字花园网站本地手动部署方案1. 获取网站源码2.2 安装 Node.js 3. 项目部署3.1 安装项目依赖3.2 构建项目3.3 启动http服务器 4. 本地预览5. 在…

计算机毕业设计Python+Vue.js游戏推荐系统 Steam游戏推荐系统 Django Flask 游 戏可视化 游戏数据分析 游戏大数据 爬虫 机

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

问题 C: B001 快乐的蠕虫

题目描述 有一只快乐的蠕虫居住在一个mn大小的网格中。在网格的某些位置放置了k块石头。网格中的每个位置要么是空的&#xff0c;要么放置了一块石头。当蠕虫睡觉时&#xff0c;它在水平方向或垂直方向上躺着&#xff0c;把身体尽可能伸展开来。蠕虫的身躯既不能进入到放有石块…

Qt实现自定义行编辑器

引言 开发环境项目结构ui界面设计示例代码运行效果总结qt中原有的行编辑器无法满足当前的需要,所以需要自定义行编辑器。 通过上下按键切换到不同的行编辑器,在选中的行编辑器中输入数字,编辑器呈现边框,编辑后按下回车键保存之前编辑的数值,没有按下回车键直接切换上下键…

得物使用AutoMQ构建海量数据处理的新一代可观测性架构

引言 得物作为全球领先的潮流网购社区&#xff0c;日益增长的用户和数据带来了巨大的技术挑战。当前&#xff0c;得物的可观测性平台每天生成数PB级Trace数据和数万亿条Span记录&#xff0c;要求平台具备高效的实时处理能力和低成本的数据存储解决方案。 传统的存算一体架构将…

视图、转发与重定向、静态资源处理

目录 视图 默认视图 视图机制原理 自定义视图 请求转发与重定向 静态资源处理 视图 每个视图解析器都实现了 Ordered 接口并开放出一个 order 属性 可以通过 order 属性指定解析器的优先顺序&#xff0c;order 越小优先级越高 默认是最低优先级&#xff0c;Integer.MAX_…

Redis 生产问题(重要)

缓存穿透 什么是缓存穿透&#xff1f; 缓存穿透说简单点就是大量请求的 key 是不合理的&#xff0c;根本不存在于缓存中&#xff0c;也不存在于数据库中 。这就导致这些请求直接到了数据库上&#xff0c;根本没有经过缓存这一层&#xff0c;对数据库造成了巨大的压力&#xf…

【Redis】壹 —— Redis 介绍

文章目录&#xff1a; 前言 一、认识Redis 1. Redis 用途 作为数据库 作为流引擎 二、服务端高并发分布式结构演变 1. 单机架构 2. 应用数据分离架构 3. 应用服务集群架构 4. 读写分离 / 主从分离架构 5. 冷热分离 —— 引入缓存 6. 分库分表 7. 微服务架构 8. …

auto-gptq安装以及不适配软硬件环境可能出现的问题及解决方式

目录 1、auto-gptq是什么&#xff1f;2、auto-gptq安装3、auto-gptq不正确安装可能会出现的问题&#xff08;1&#xff09;爆出&#xff1a;CUDA extension not installed.&#xff08;2&#xff09;没有报错但是推理速度超级慢 1、auto-gptq是什么&#xff1f; Auto-GPTQ 是一…

AI 的时代,新科技和新技术如何推动跨学科的整合?

在当前AI的发展中&#xff0c;我们面临的一个主要挑战就是融合的问题&#xff0c;这实际上不仅是技术上的融合&#xff0c;还有更深层次的哲学层面的思考。 或许在中国这方面的讨论较少&#xff0c;但在西方哲学和神学的语境中&#xff0c;探讨万物的根本和不同学科之间的联系…

【h5py】 提取mat文件中的HDF5格式的数据

h5py 提取mat文件中的HDF5格式的数据 使用纯Python查看数据配合Matlab后&#xff0c;使用Python查看数据 一、使用纯Python查看文件数据内容 原理&#xff1a;当HDF5存储的是struct类型数据&#xff0c;解析时要像一棵树&#xff0c;我们需要逐层次的去解析&#xff0c;直到…

vue2 项目中实现动态代理,服务器上通过nginx部署 实现动态代理

一、前言&&原理 前言&#xff1a;vue2 项目中&#xff0c;请求接口是从表格的当前获取的&#xff0c;也就是接口ip:端口号:路经不确定&#xff0c;要实现点击表格当前行请求对应的接口 实现原理&#xff1a;将实际要请求的ip等信息存在请求头中&#xff0c;用的时候再…

【指南】03 CSC联系外导

确定外导 课题组有合作关系的国外导师与自己研究方向密切相关的国外导师国外高校官网、谷歌学术、Research Gate等平台检索不可以是中国港澳台的高校科研院所或机构注意外导所在高校排名和科研水平可列表记录注意外国签证政策 发送邮件 自我介绍简要介绍CSC介绍自己的研究对…

DOM与BOM试题

基础回顾题(48分,1分1道题) querySelector 基础 写出一段代码&#xff0c;使用querySelector选择页面上第一个<button>元素&#xff0c;并打印该元素到控制台。 querySelectorAll 基础 使用querySelectorAll选择所有类名为item的元素&#xff0c;并打印这些元素组成的N…

20.LMAX——DDD的极致性能架构

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 历史起源架构目标架构要素 时序对比传统时序事件溯源时序LMAX时序 单线程非阻塞异步IO&#xff08;reactor&#xff09;多线程单…

记uniapp、android studio开发原生插件时监听globalEvent 事件

globalEvent 事件&#xff1a;用于页面监听持久性事件&#xff0c;例如定位信息&#xff0c;陀螺仪等的变化。 在vue页面&#xff1a; 获取原生组件&#xff1a; var myGlobalEvent uni.requireNativePlugin(globalEvent); 通过plus.globalEvent.addEventListener方法注册全…

MFC集成WebBrowser控件的实例教程

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;本文提供了如何在MFC应用程序中集成WebBrowser控件的详细步骤&#xff0c;该控件利用ActiveX技术实现内嵌IE浏览器引擎功能。读者将学习如何创建对话框、处理控件事件&#xff0c;并添加导航功能以实现网页浏览。…