当前位置：首页 > news >正文

【CSS】常见 CSS 布局

news 2026/1/20 20:47:53

1. 响应式布局

<!DOCTYPE html>
<html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 导航样式 */nav {background-color: #f2f2f2;padding: 10px;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline;margin-right: 10px;}nav ul li a:hover {background-color: #ccc;}nav ul li a {color: #333;text-decoration: none;padding: 5px;}/* 主要内容样式 */main {padding: 20px;}section {margin-bottom: 20px;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;left: 0;bottom: 0;width: 100%;}</style>
</head><body><header><h1>响应式布局示例</h1></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav><main><section><h2>欢迎来到我们的网站！</h2><p>这是一个简单的响应式布局示例。</p></section></main><footer><p>版权所有 &copy; 2023</p></footer><script></script>
</body></html>

在这里插入图片描述

2. 块级布局

<!DOCTYPE html>
<html><head><title>简单的块级布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 主要内容样式 */main {display: flex;justify-content: space-between;padding: 20px;}section {flex-basis: 48%;background-color: #f2f2f2;padding: 20px;margin-bottom: 20px;}.left-section {/* order 规定 section 出现的先后顺序 */order: 1;}.right-section {order: 2;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;}</style>
</head><body><header><h1>块级布局示例</h1></header><main><section class="left-section"><h2>左侧区域</h2><p>这是左侧区域的内容。</p></section><section class="right-section"><h2>右侧区域</h2><p>这是右侧区域的内容。</p></section></main><footer><p>版权所有 &copy; 2023</p></footer><script src="main.js"></script>
</body></html>

在这里插入图片描述

3. 流式布局

<!DOCTYPE html>
<html><head><title>简单的流式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: 20px;text-align: center;}/* 内容区域样式 */#content {display: flex;flex-wrap: wrap;justify-content: center;padding: 20px;}.box {flex-basis: 300px;background-color: #f2f2f2;padding: 20px;margin: 10px;}/* 脚注样式 */footer {background-color: #333;color: #fff;padding: 10px;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;}</style>
</head><body><header><h1>流式布局示例</h1></header><div id="content"><div class="box"><h2>盒子 1</h2><p>这是盒子 1 的内容。</p></div><div class="box"><h2>盒子 2</h2><p>这是盒子 2 的内容。</p></div><div class="box"><h2>盒子 3</h2><p>这是盒子 3 的内容。</p></div><div class="box"><h2>盒子 4</h2><p>这是盒子 4 的内容。</p></div></div><footer><p>版权所有 &copy; 2023</p></footer><script src="main.js"></script>
</body></html>

在这里插入图片描述

4. 定位布局

<!DOCTYPE html>
<html><head><title>简单的定位布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 容器样式 */#container {position: relative;width: 500px;height: 300px;background-color: #f2f2f2;}/* 盒子样式 */.box {position: absolute;padding: 20px;background-color: #333;color: #fff;}#box1 {top: 20px;left: 20px;}#box2 {bottom: 20px;right: 20px;}#box3 {top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head><body><div id="container"><divid="box1"class="box">盒子 1</div><divid="box2"class="box">盒子 2</div><divid="box3"class="box">盒子 3</div></div><script src="main.js"></script>
</body></html>

在这里插入图片描述

5. 多列布局

<!DOCTYPE html>
<html><head><title>简单的多列布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 容器样式 */#container {display: flex;justify-content: space-between;padding: 20px;}/* 列样式 */.column {flex-basis: 30%;background-color: #f2f2f2;padding: 20px;margin: 10px;}</style>
</head><body><div id="container"><div class="column"><h2>列 1</h2><p>这是列 1 的内容。</p></div><div class="column"><h2>列 2</h2><p>这是列 2 的内容。</p></div><div class="column"><h2>列 3</h2><p>这是列 3 的内容。</p></div></div><script src="main.js"></script>
</body></html>

在这里插入图片描述

6. 网格布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {width: 1700px;height: 500px;border: 10px solid gray;margin: 100px auto;display: grid;/* 13 列，每列列宽为 100px */grid-template-columns: repeat(13, 100px);/* 4 行，每行高度为 100px */grid-template-rows: repeat(4, 100px);/* 单元格间距 垂直 水平 */grid-gap: 10px 10px;/* 整体网格居中 */place-content: center center;}.box>div {background: pink;}.box1 {/* 横向网格线起始位置 */grid-row: 1/3;/* 纵向网格线起始位置 */grid-column: 12/14;}.box2 {grid-row: 1/2;grid-column: 10/12;}</style>
</head><body><div class="box"><div class="box1">1</div><div class="box2">2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div><div>32</div><div>33</div><div>34</div><div>35</div><div>36</div><div>37</div><div>38</div><div>39</div><div>40</div><div>41</div><div>42</div><div>43</div><div>44</div><div>45</div><div>46</div><div>47</div><div>48</div><!-- <div>49</div> --><!-- <div>50</div><div>51</div><div>52</div> --></div>
</body></html>

在这里插入图片描述

7. 浮动布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {width: 100%;overflow: hidden;}.nav li {float: left;margin-right: 15px;}.nav li a {display: block;padding: 10px;text-decoration: none;color: #000;}</style>
</head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul>
</body></html>

在这里插入图片描述

【CSS】常见 CSS 布局

1. 响应式布局 <!DOCTYPE html> <html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: …...

编程日记 2023/10/22 22:38:59

数据结构---HashMap和HashSet

HashMap和HashSet都是存储在哈希桶之中，我们可以先了解一些哈希桶是什么。像这样，一个数组数组的每个节点带着一个链表，数据就存放在链表结点当中。哈希桶插入/删除/查找节点的时间复杂度是O(1) map代表存入一个key值，一个val值…...

编程日记 2023/10/22 22:37:59

SLAM中相机姿态估计算法推导基础数学总结

相机模型基本模型内参外参对极几何对极约束外积符号基础矩阵F和本质矩阵E 相机姿态估计问题分为如下两步: 本质矩阵 E t ∧ R Et^{\wedge}R Et∧R因为 t ∧ t^{\wedge} t∧其实就是个3x3的反对称矩阵，所以 E E E也是一个3x3的矩阵用八点法估计E…...

编程日记 2023/10/22 22:36:57

【RS】遥感影像/图片64位、16位（64bit、16bit）的意义和区别

在数字图像处理中，我们常常会听到不同的位数术语，比如64位、16位和8位（64bit、16bit、8bit）。这些位数指的是图像的深度，也就是图像中每个像素可以显示的颜色数。位数越高，图像可以显示的颜色数就越多&…...

编程日记 2023/10/22 22:35:55

【单元测试】--基础知识

一、什么是单元测试单元测试是软件开发中的一种测试方法，用于验证代码中的单个组件（通常是函数、方法或类）是否按预期工作。它旨在隔离和测试代码的最小单元，以确保其功能正确，提高代码质量和可维护性。单元测试通常…...

编程日记 2023/10/22 22:34:53

golang 反射机制

在 go 语言中，实现反射能力的是 reflect包，能够让程序操作不同类型的对象。其中，在反射包中有两个非常重要的类型和函数，两个函数分别是： reflect.TypeOfreflect.ValueOf 两个类型是 reflect.Type 和 reflect.Value…...

编程日记 2023/10/22 22:33:52

【Javascript】创建对象的几种方式

通过字面量创建对象通过构造函数创建对象 Object()-------------构造函数通过构造函数来实例化对象给person注入属性 Factory工厂 this指向的是对象的本身使⽤new 实例化⼀个对象，就像⼯⼚⼀样...

编程日记 2023/10/22 22:32:51

深度学习_3_实战_房价预测

梯度实战代码： # %matplotlib inline import random import torch import matplotlib.pyplot as plt # from d21 import torch as d21def synthetic_data(w, b, num_examples):"""生成 Y XW b 噪声。"""X torch.normal(0,…...

编程日记 2023/10/22 22:31:50

HCIA -- 动态路由协议之RIP

一、静态协议的优缺点： 缺点： 1、中大型网络配置量过大 2、不能基于拓扑的变化而实时的变化优点： 1、不会额外暂用物理资源 2、安全问题 3、计算路径问题简单、小型网络建议使用静态路由；中大型较复杂网络，建议使用…...

编程日记 2023/10/22 22:29:48

JS常用时间操作moment.js参考文档

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面…...

编程日记 2023/10/22 22:27:46

基于 FFmpeg 的跨平台视频播放器简明教程（九）：Seek 策略

系列文章目录基于 FFmpeg 的跨平台视频播放器简明教程（一）：FFMPEG Conan 环境集成基于 FFmpeg 的跨平台视频播放器简明教程（二）：基础知识和解封装（demux）基于 FFmpeg 的跨平台视频…...

编程日记 2023/10/22 22:25:45

设计模式_备忘录模式

备忘录模式介绍设计模式定义案例问题堆积在哪里解决办法备忘录模式行为型模式， 保存了数据某一个时间点的状态在需要的时候进行回档单机游戏的角色数据保存并且回档保存和回档加一个状态管理类类图代码 MomentData using UnityEngine;public class MomentD…...

编程日记 2023/10/22 22:24:44

双势阱模型

双势阱模型原子钟传统的原子钟利用氨分子由于隧道效应，上顶点的氮原子可以贯穿三个氢原子形成的势垒，到达下顶点对体系注入微波能量后，氮原子在上下定点之间振荡，体系的能量在两个稳定态之间交替变换，其振荡频率决…...

编程日记 2023/10/22 22:21:40

文献阅读：The Reversal Curse: LLMs trained on “A is B” fail to learn “B is A”

文献阅读：The Reversal Curse: LLMs trained on “A is B” fail to learn “B is A” 1. 文章简介2. 实验 & 结果考察 1. finetune实验2. 真实知识问答 3. 结论 & 思考文献链接：https://arxiv.org/abs/2309.12288 1. 文章简介这篇文章是前…...

编程日记 2023/10/22 22:20:39

真实感受：是智能家居在选择合适的技术！

科技从来都是为了让我们的生活更加的简单、舒适，而智能家居的智能，体现在如何更更更方便的使用我需要控制的家居。例如：下班躺在床上想休息，房间和大厅的灯还开着，这时你会选择什么产品躺着解决问题？ 红外…...

编程日记 2023/10/22 22:19:38

前端 TS 快速入门之二：接口

1. 接口有什么用通过 interface 定义接口。检测对象的属性，不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。 interface IPerson {name: string;age: number; } function say(person: IPerson): void {console.log(my name is ${pers…...

编程日记 2023/10/22 22:18:36

论文生成器（论文、文献综述、开题报告……），Java、Python、C++

“让论文生成器为您省时省力，轻松写出高质量的论文！” 2022年，腾讯全球数字生态大会腾讯云智能专场发布。链接：http://xiezuo.saiertewl.cn/tb/xrWQed?dCodeh1xDrXmuhZbKPKgI&couponCodexiaoweilunwen...

编程日记 2023/10/22 22:17:35

【Java基础面试三十六】、遇到过异常吗，如何处理？

文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。面试官：遇到过异常吗&#xff0…...

编程日记 2023/10/22 22:16:33

DASCTF-CBCTF-2023 Crypto部分复现

文章目录 EzRSACB backpack 这次比赛没打，记错时间了，看了一下，如果去做的话大概也只能做出那两道简单的题，还是太菜啦 EzRSA 题目描述： from Crypto.Util.number import * import random from gmpy2 import * from …...

编程日记 2023/10/22 22:15:30

为什么要做字节对齐 alignment？

下面这段 C 代码的输出是什么？定义的 Type 占用的字节数（下面简称为字节数）是多少呢？ #include <iostream>struct Type {char a;int b; };int main(void) {std::cout << sizeof(Type) << \n; }经过编译运行&am…...

编程日记 2023/10/22 22:14:29

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2026/1/19 12:45:01

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/1/20 10:45:30

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/20 4:05:58

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了： 这一篇我们开始讲： 目录一、场景操作步骤二、日志基础关键字分级如下三、场景日志如下： 一、场景操作步骤操作步…...

编程新知 2026/1/20 4:00:50

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2026/1/19 23:21:21

1. 响应式布局

2. 块级布局

3. 流式布局

4. 定位布局

5. 多列布局

6. 网格布局

7. 浮动布局

相关文章：