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

css如何实现页面布局与五种实现方式

news 2026/2/2 16:00:33

CSS布局实现的主要方式有以下几种：

一、盒模型布局：CSS中，每个元素都是一个盒子，包括内容、内边距、边框和外边距。通过设置盒子的属性（如宽度、高度、内边距、边框、定位等），可以实现不同的布局效果

CSS盒模型是用来描述网页布局的概念，包括文本和其他元素在内的所有HTML元素都可以看作是一个矩形的盒子。盒模型由content、padding、border和margin四个部分组成，其中content是盒子内部的空间，padding是内边距，border是边框，margin是外边距。

下面是一个示例代码来说明CSS盒模型的布局：

<!DOCTYPE html>
<html>
<head><title>CSS盒模型布局</title><style>.container {width: 400px;padding: 20px;border: 1px solid #ddd;margin: 0 auto;}.box {width: 100%;height: 200px;border: 1px solid #333;margin-bottom: 20px;box-sizing: border-box; /* 关键属性 */padding: 20px;}</style>
</head>
<body><div class="container"><div class="box">内容区域</div><div class="box">内容区域</div></div>
</body>
</html>

在上面的代码中，我们创建了一个类名为container的容器，并设置了宽度为400px，内边距为20px，边框为1px实线，外边距为0 auto。在容器中，我们创建了一个类名为box的盒子，并设置了宽度为100%，高度为200px，边框为1px实线，下外边距为20px。关键属性box-sizing: border-box;使得padding不会撑大盒子。

因为盒子的大小包括外边距和边框，所以我们需要注意盒子的外部空间对整个网页布局的影响。盒模型布局可以让我们更精确地控制页面元素的大小和位置。

二、浮动布局：通过使用float属性，可以将元素从正常的文档流中脱离出来，实现多列布局和文字环绕效果。但是，使用浮动布局需要注意清除浮动，否则可能出现元素重叠等问题。

CSS浮动布局是一种比较常用的布局方式，适用于各种场景。它通过CSS的float属性实现元素的左右浮动，并利用clearfix技巧来清除父元素的高度，从而实现布局。

示例代码如下：

HTML：

<div class="container"><div class="left">左侧内容</div><div class="right">右侧内容</div>
</div>

CSS：

.container {width: 100%;overflow: hidden;
}.left {float: left;width: 200px;
}.right {float: right;width: 300px;
}

这段代码中，我们先定义了一个容器元素.container，它的宽度为100%，并设置了overflow: hidden属性来清除浮动。然后在容器中分别定义了两个元素.left和.right，它们分别左浮动和右浮动，并设置了各自的宽度。

使用浮动布局的优点是可以让元素自适应宽度，可以实现多列布局、响应式布局等效果。但是它也有一些缺点，比如当浮动元素高度不同时，布局容易出现问题，需要手动清除浮动等。

三、定位布局：通过设置position属性，可以将元素定位在文档中的特定位置（如相对于父元素、绝对定位、固定定位等），实现自由灵活的布局效果。

CSS定位布局是指通过设置元素的位置和尺寸来布局页面中的元素。常见的定位方式有相对定位、绝对定位、固定定位和粘性定位。

相对定位是指元素的位置相对于其原来的位置进行位移，但是并没有改变文档流中其他元素的位置和空间。相对定位通过top、right、bottom和left属性控制元素的位置。

绝对定位是指元素的位置相对于最近的已定位祖先元素，如果没有已定位祖先元素，那么位置就相对于文档的body元素。绝对定位通过top、right、bottom和left属性控制元素的位置。

固定定位是指元素的位置相对于浏览器窗口的位置进行定位。固定定位通过top、right、bottom和left属性控制元素的位置。

粘性定位是指元素在滚动时相对于其父元素或者视口保持不动。粘性定位通过position:sticky和top、right、bottom和left属性控制元素的位置。

下面是一个简单的示例代码：

<style>.box{width: 200px;height: 200px;background-color: red;position: relative;left: 50px;top: 50px;}.box2{width: 200px;height: 200px;background-color: blue;position: absolute;right: 50px;bottom: 50px;}.box3{width: 200px;height: 200px;background-color: green;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);}.box4{width: 200px;height: 200px;background-color: yellow;position: sticky;top: 0;}
</style><div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

在这个示例中，我们使用了不同的定位方式来控制四个div元素的位置。第一个元素使用了相对定位，第二个元素使用了绝对定位，第三个元素使用了固定定位，第四个元素使用了粘性定位。通过这些定位方式的不同，我们可以轻松地实现复杂的页面布局效果。

四、弹性盒子布局：CSS3中引入了flexible box布局模型，通过设置容器的属性，可以实现弹性布局，将子元素分配到可用空间中，实现自适应和响应式布局。

CSS弹性盒子布局（Flexbox）是一种用于设计和布局网页的功能强大的CSS属性。它使用灵活的盒子来处理元素之间的空间分配，包括对齐、拉伸和重新排列等功能。Flexbox可以使网页响应更加灵活，简洁和易于维护。以下是Flexbox的一些属性及其说明：

  1. display: flex; 或 display: inline-flex; 设置元素为弹性盒子容器，可以使用 flex 使元素成为块级弹性容器，也可以使用 inline-flex 使元素成为内联弹性容器。

  2. flex-direction: row | row-reverse | column | column-reverse; 设置弹性容器中的子元素排列方向。默认值是 row。row 表示从左到右排列（水平方向），row-reverse 表示从右到左排列，column 表示从上到下排列（竖直方向），column-reverse 表示从下到上排列。

  3. justify-content: flex-start | flex-end | center | space-between | space-around; 设置弹性容器中子元素在主轴上的对齐方式。默认值是 flex-start。flex-start 表示左对齐（水平方向），flex-end 表示右对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示环绕对齐。

  4. align-items: flex-start | flex-end | center | baseline | stretch; 设置弹性容器中子元素在交叉轴上的对齐方式。默认值是 stretch。flex-start 表示顶部对齐（竖直方向），flex-end 表示底部对齐，center 表示居中对齐，baseline 表示基线对齐，stretch 表示拉伸对齐。

  5. flex-wrap: nowrap | wrap | wrap-reverse; 设置子元素是否换行。默认值是 nowrap。nowrap 表示不换行，wrap 表示换行，wrap-reverse 表示反向换行。

  6. align-content: flex-start | flex-end | center | space-between | space-around | stretch; 设置当子元素超出容器大小时在交叉轴上的布局方式。该属性仅在有多行或多列时生效。flex-start 表示顶部对齐（竖直方向），flex-end 表示底部对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示环绕对齐，stretch 表示拉伸对齐。

以下是一些CSS弹性盒子布局的代码示例：

<!DOCTYPE html>
<html>
<head><title>Flexbox layout demo</title><style>.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: wrap;height: 300px;}.item {flex: 1;height: 100px;background-color: #f0f0f0;margin: 10px;}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>
</html>

以上代码创建了一个具有弹性布局的容器，其中子项元素会在容器中自动换行。子项元素的大小和间距都是相同的。每个元素都使用 flex 属性来指定自己的大小比例，以便它们在容器中有足够的空间并自动调整大小。容器使用 justify-content 属性来排列子项元素，并使用align-items 属性来在交叉轴上对齐子项元素。这种布局对于创建响应式网页非常有用，因为它可以自适应屏幕大小并自动适应布局。

五、栅格布局：栅格布局是一种基于网格的布局系统，通过将页面划分为多个行和列，实现复杂的布局效果。常用的栅格布局框架有Bootstrap、Foundation等。

CSS栅格布局是一种基于网格系统的布局方式，它可以让网页设计者更容易地进行响应式设计。栅格布局可以将页面分成若干列和行，然后将内容放置于这些列和行中，形成一种有序、整齐的布局。

以下是一个简单的栅格布局代码示例：

HTML代码：

<div class="row"><div class="col-6">左侧内容</div><div class="col-6">右侧内容</div>
</div>

CSS代码：

.row {display: flex;flex-wrap: wrap;
}.col-6 {width: 50%;
}

以上代码使用flex布局方式，将.row元素的flex-wrap属性设置为wrap，则自动换行。同时，将.col-6元素的宽度设置为50%，即可将页面分为两列。

如果想要更灵活地创建栅格布局，可以采用CSS预处理器（如Sass、Less）或框架（如Bootstrap）来快速生成代码。

例如，使用Sass的示例代码如下：

$row-margin: 20px;.row {display: flex;flex-wrap: wrap;margin: -$row-margin / 2;.col {padding: $row-margin / 2;}
}.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-5 { width: 41.66667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

以上代码定义了一些Sass变量（如$row-margin），然后使用嵌套规则和循环语句来定义各种列宽度和样式，避免了重复的代码。

相关文章：

css如何实现页面布局与五种实现方式

CSS布局实现的主要方式有以下几种&#xff1a; 一、盒模型布局&#xff1a;CSS中&#xff0c;每个元素都是一个盒子&#xff0c;包括内容、内边距、边框和外边距。通过设置盒子的属性&#xff08;如宽度、高度、内边距、边框、定位等&#xff09;&#xff0c;可以实现不同的布…...

编程日记 2023/10/9 12:54:26

cv2.split函数与cv2.merge函数

split函数用于图像BGR通道的分离 merge函数用于可将分开的图像通道合并到一起 1.split函数的使用 这是原图&#xff0c;我们使用split函数对其三个通道进行分离。 注意&#xff1a;split函数分离通道的顺序是B、G、R。 以下方法是将三个通道的值都设置为与某一个通道相同。…...

编程日记 2023/10/9 12:53:25

Vue--1.7watch侦听器（监视器）

作用&#xff1a;监视数据变化&#xff0c;执行一些业务逻辑或异步操作。 语法&#xff1a; 1.简单写法->简单类型数据&#xff0c;直接监视 const app new Vue({el: #app,data: {words:},watch:{words(newValue,oldValue){}}}) const app new Vue({el: #app,data: {obj…...

编程日记 2023/10/9 12:52:24

序列：全序关系

一个序列满足全序关系必须满足以下条件&#xff1a; 反对称性&#xff1a;若 a ≤ b a\le b a≤b&#xff0c;则 b ≥ a b\ge a b≥a传递性&#xff1a;若 a ≤ b a\le b a≤b 且 b ≤ c b\le c b≤c&#xff0c;则 a ≤ c a\le c a≤c完全性&#xff1a; a ≤ b a\le b …...

编程日记 2023/10/9 12:50:22

100M服务器能同时容纳多少人访问？

100M的服务器带宽能够同时容纳的用户访问量需要考虑以下几个关键因素: &#x1f449;1.单个用户的平均访问流量大小 这取决于网站内容,是否有多媒体等。一般文本类网站每用户每次访问在50-100KB。 &#x1f449;2.每个用户的平均访问页面 通常每次访问会打开多个页面 &…...

编程日记 2023/10/9 12:49:21

Javascript 笔记：函数调用与函数上下文

在 JavaScript 中&#xff0c;函数上下文通常指的是函数在执行时的当前对象的引用&#xff0c;这通常用 this 关键字表示。this 关键字在不同的执行上下文中可能引用到不同的对象。 1 全局上下文 当 this 关键字用在全局上下文&#xff08;不在任何函数内部&#xff09;&#…...

编程日记 2023/10/9 12:48:20

【WebService】C#搭建的标准WebService接口，在使ESB模版作为参数无法获取参数数据

一、问题说明 1.1 问题描述 使用C# 搭建WebService接口&#xff0c;并按照ESB平台人员的要求&#xff0c;将命名空间改为"http://esb.webservice",使用PostmanESB平台人员提供的入参示例进行测试时&#xff0c;callBussiness接口参数message始终为null。 以下是ES…...

编程日记 2023/10/9 12:47:19

Sqlserver关于tempdb临时数据库文件个数的最佳实践

官方文档 https://learn.microsoft.com/zh-cn/sql/relational-databases/databases/tempdb-database?viewsql-server-ver16 https://learn.microsoft.com/en-US/troubleshoot/sql/database-engine/performance/recommendations-reduce-allocation-contention 一般而言&#x…...

编程日记 2023/10/9 12:46:18

【Java】微服务——微服务介绍和Eureka注册中心

目录 1.微服务介绍2.服务拆分和远程调用2.1.提供者与消费者 3.Eureka注册中心3.1.Eureka的结构和作用3.2.Eureka的结构3.3.搭建Eureka服务3.3.1.引入eureka依赖3.3.2.编写配置文件 3.4.服务注册及拉1&#xff09;引入依赖2&#xff09;配置文件3&#xff09;启动多个user-servi…...

编程日记 2023/10/9 12:45:17

C++ virtual 虚函数 虚基类

https://blog.csdn.net/xbb123456rt/article/details/81986691 基类指针可以指向一个派生类对象&#xff0c;但派生类指针不能指向基类对象。 可以在基类中将被重写的成员函数设置为虚函数&#xff0c;其含义是&#xff1a;当通过基类的指针或者引用调用该成员函数时&#xf…...

编程日记 2023/10/9 12:44:17

redis分布式秒杀锁

-- 获取锁标识&#xff0c;是否与当前线程一致&#xff1f; if(redis.call(get, KEYS[1]) ARGV[1]) then-- 一致&#xff0c;删除return redis.call(del, KEYS[1]) end -- 不一致&#xff0c;直接返回 return 0package com.platform.lock;public interface ILock {/*** 获取锁…...

编程日记 2023/10/9 12:43:16

【Redis】String内部编码方式

String内部编码方式 int: 8个字节的长整型embstr: 小于等于39个字节的字符串raw: 大于39个字节的字符串...

编程日记 2023/10/9 12:42:15

川西旅游网系统-前后端分离（前台vue 后台element UI，后端servlet）

前台&#xff1a;tour_forword: 川西旅游网前端----前台 (gitee.com) 后台&#xff1a;tour_back: 川西旅游网-------后台 (gitee.com) 后端 &#xff1a;tour: 川西旅游网------后端 (gitee.com)...

编程日记 2023/10/9 12:41:15

Paddle使用pyinstaller打包出错的解决方法

使用PyQt5开发了一个基于paddle ocr的文字识别程序&#xff0c;打包的时候报错了。给大家分享一下解决方法https://juejin.cn/post/7287562282669883451 为了测试paddle模块的打包问题&#xff0c;所以当前demo.py只引用了paddleOCR模块demo.py from paddleocr import PaddleO…...

编程日记 2023/10/9 12:40:14

【Java acm】特殊输入

input: [[1,2,3 ], [4, 5,6], [7,8]] output: [[1, 2, 3], [4, 5, 6], [7, 8]] 思路 按行读入, 然后进行字符串处理, 将其他字符替换为空字符.在split(,) repalceAll(“\s”,“”), 将所有空白字符替换成空字符(包括空格, 制表, 换行等) 代码实现 import java.util.*;publ…...

编程日记 2023/10/9 12:38:12

在Ubuntu 20.04搭建最小实验环境

sudo apt-get -y install --no-install-recommends wget gnupg ca-certificates安装导入GPG公钥所需的依赖包。 sudo wget -O - https://openresty.org/package/pubkey.gpg | sudo apt-key add -导入GPG密钥。 sudo apt-get -y install --no-install-recommends software-p…...

编程日记 2023/10/9 12:37:11

使用uwsgi部署Flask

安装 这里直接使用包管理器提供的版本&#xff0c;不过建议大家使用pip来安装&#xff0c;会少一些坑&#xff1a; (Debian/Ubuntu) apt-get install uwsgi uwsgi-plugin-python3 或使用pip安装&#xff1a; pip3 install uwsgi 试试看 [demo.py] from flask import Flas…...

编程日记 2023/10/9 12:36:09

Android平台实现lottie动画

1、lottie动画简介 Lottie 是一个应用十分广泛动画库&#xff0c;适用于Android、iOS、Web、ReactNative、Windows的库&#xff0c;它解析了用Bodymovin导出为json的Adobe After Effects动画&#xff0c;并在移动和网络上进行了原生渲染。它提供了一套完整得从AE到各个终端的…...

编程日记 2023/10/9 12:35:07

JAVA练习百题之求矩阵对角线之和

题目&#xff1a;求一个3*3矩阵对角线元素之和 程序分析 求一个3x3矩阵的对角线元素之和&#xff0c;我们需要将矩阵的左上到右下以及左下到右上两条对角线上的元素相加。 一个3x3矩阵如下所示&#xff1a; 1 2 3 4 5 6 7 8 9左上到右下的对角线元素和为1 5 9 15&…...

编程日记 2023/10/9 12:34:05

MEM备考打卡

今天是2023.10.9距离考试还有75天 三年前就想考MEM每次总是有各种原因最后选择了放弃&#xff0c;没时间、自制力差、害怕失败。。。。放弃后确还是会想如果自己当时没有放弃是不是就能考上&#xff0c;所以这次不管能不能考上拼搏75天&#xff0c;不能总是停留在想象。加油&a…...

编程日记 2023/10/9 12:32:02

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46