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

CSS学习笔记6——网页布局

article 2026/2/19 16:01:17

一、元素的浮动属性、清除浮动

清除浮动的其他方法

1、使用空标签清除浮动影响

2、使用overflow属性清除浮动

3、使用伪元素清除浮动影响

原理

overflow属性

二、元素的定位

1、相对定位

2、绝对定位

编辑 3、固定定位

z-index层叠等级属性

一、元素的浮动属性、清除浮动

在CSS布局中，浮动元素会脱离文档流，导致父元素高度塌陷、后续元素布局错乱等问题。

清除浮动的作用

防止父元素塌陷：当子元素浮动时，父元素的高度可能无法正确包含浮动的子元素，导致父元素“塌陷”，影响整体布局。清除浮动可以确保父元素能够正确包含浮动的子元素，使其高度正常计算。

避免影响后续元素布局：浮动元素会脱离正常的文档流，可能会对后续的非浮动元素的布局产生影响，导致页面布局混乱。清除浮动可以避免这种情况，使后续元素能够按照正常的文档流进行布局。

提高布局的稳定性：在复杂的布局中，浮动元素的不确定性可能导致页面在不同浏览器或设备上显示不一致。清除浮动可以提高布局的稳定性和兼容性。

<style type="text/css">.father{                      /*定义父元素的样式*/background:#eee;border:1px dashed #ccc;}/* 浅灰色背景，浅灰色虚线边框。 */.box01,.box02,.box03{         /*定义box01、box02、box03三个盒子的样式*/height:50px;line-height:50px;background:#FF9;border:1px solid #93b7ff;margin:15px;padding:0px 10px;float: left;}/* 浅黄色背景，蓝色实线边框，高度50像素，文字垂直居中，外边距15像素，内边距左右10像素。 */p{                            /*定义段落文本的样式*/background:#c1d5ff;border:1px dashed #93b7ff;margin:15px;padding:0px 10px; }/* 浅蓝色背景，蓝色虚线边框，外边距15像素，内边距左右10像素。 */</style></head> <body><div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><p>在山东烟台，全球最大的海上钻井平台“蓝鲸2号”备受瞩目。这个海上“巨无霸”有37层楼高，其甲板有一个足球场那么大。它可以在水深超过3000米的海域作业，最大钻井深度15240米。“蓝鲸2号”生产经理程骋刚来这里时，大部分人都是洋面孔，如今绝大部分工作人员都是中国面孔，程聘感觉“有一股强大的中国力量在引领海工行业的发展”。</p></div>
</body>

效果展示

未加float属性时

加float属性、未清除浮动影响

清除浮动影响

注意：clear属性只能清除元素左右两侧的影响，由于父元素与子元素为嵌套关系，不存在左右位置关系，因此不能使用clear清除子元素浮动对父元素的影响

清除浮动的其他方法

1、使用空标签清除浮动影响

在需要清除浮动的父元素内部的所有浮动元素之后，添加一个空的块级元素（如<div>），并为其设置clear: both样式。例如：
<div class="container"><div class="float-left">Left</div><div class="float-right">Right</div><div style="clear: both;"></div>
</div>
原理

通过添加一个空的块级元素并设置clear: both，可以清除前面所有浮动元素的影响，使父元素能够正确包含这些浮动的子元素，从而恢复父元素的高度，并避免对后续元素的布局产生影响。工作中不建议使用，因为会增加无意义的元素结构。

2、使用overflow属性清除浮动

为父元素设置“overflow:hidden”样式，这个方法可弥补法一的不足

3、使用伪元素清除浮动影响

通过给父元素添加伪元素（如::after），并在伪元素上应用clear: both来清除浮动。
.father::after {content: "";display: table;clear: both;
}
原理

伪元素：::after 是 CSS 中的一个伪元素，用于在元素内容的后面插入生成的内容。在这里，我们使用它来创建一个空的虚拟元素。

content: ""：为伪元素提供内容，这里是空字符串，表示生成一个空的虚拟元素。

display: table：将伪元素设置为表格显示，这样它可以像表格一样在布局中占据空间。

clear: both：清除前面所有浮动元素的影响，使父元素能够正确包含这些浮动的子元素。

<title>使用空标签清除浮动</title>
<style type="text/css">
.father{                              /*没有给父元素定义高度*/background:#ccc; border:1px dashed #999; /* overflow: hidden; */
}
/* 浅灰色背景和虚线边框的容器。 */
.box01,.box02,.box03{ height:50px; line-height:50px; background:#f9c; border:1px dashed #999; margin:15px; padding:0px 10px; float:left;                     /* 定义box01、box02、box03三个盒子左浮动*/
}
/* 三个高度为50像素的盒子，背景为浅橙色，带有虚线边框，水平排列在父元素内部。 */
/*.box04{ clear:both;}                 对空标签应用clear:both;*/
</style>
</head> 
<body>
<div class="father"><div class="box01">box01</div><div class="box02">box02</div><div class="box03">box03</div><!-- <div class="box04"></div>        在浮动元素后添加空标签-->
</div>
</body>

效果展示

未设置清除浮动时

设置清除浮动时

overflow属性

<title>overflow属性</title>
<style type="text/css">
div{width:260px;       height:176px;       background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);overflow:scroll;    /*溢出内容呈现在标签框之外*/ }
</style>
</head>
<body>
<div>当田野染上一层金黄，各种各样的果实摇着铃铛的时候，雨，似乎也像出嫁生了孩子的妇人，显得端庄而又沉静了。这时候，雨不大出门。田野上几乎总是金黄的太阳。也许，人们都忘记了雨。成熟的庄稼等待收割，金灿灿的种子需要晒干，甚至红透了的山果也希望最后的晒甜。忽然，在一个夜晚，窗玻璃上发出了响声，那是雨，是使人静谧、使人怀想、使人动情的秋雨啊！天空是暗的，但雨却闪着光；田野是静的，但雨在倾诉着。顿时，你会产生一脉悠远的情思。也许，在人们劳累了一个春夏，收获已经在大门口的时候，多么需要安静和沉思啊！雨变得更轻，也更深情了，水声在屋檐下，水花在窗玻璃上，会陪伴着你的夜梦。如果你怀着那种快乐感的话，那白天的秋雨也不会使人厌烦。你只会感到更高邈、深远，并让凄冷的雨滴，去纯净你的灵魂，而且一定会遥望到一场秋雨后将出现的一个更净美、开阔的大地。
</div>
</body>

效果展示

1、使用scroll属性值

2、使用auto属性值

3、使用hidden属性值

4、使用visible属性值（默认值）

二、元素的定位

静态定位（static）——默认的摆放方式
就像你把书本自然摆放在书架上，所有书按顺序排列。这是浏览器默认的排列方式，元素会按照HTML代码的先后顺序自然堆叠，不能通过top/left等属性调整位置。

相对定位（relative）——微调位置
好比你在墙上贴了一张便签纸，之后觉得位置不够好，可以上下左右移动几厘米。元素会保留原本的位置空间，移动时不会影响其他元素：

绝对定位（absolute）——精确坐标定位
像把照片用图钉固定在墙上的某个精确位置。元素会脱离正常文档流，根据最近的已定位祖先元素（非static）进行定位：

固定定位（fixed）——广告牌式定位
就像马路边的广告牌，无论你开车走多远它都固定在同一个位置。元素会固定在浏览器窗口的某个位置，不随页面滚动移动：

1、相对定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;margin:10px 0px;text-align:center;
}
/* .child02{position:absolute;         /*绝对定位*/left:150px;                 /*距左边线150px*/top:100px;                  /*距顶部边线100px*/
} */</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

未设置相对定位时

设置相对定位时——/* child02相对于页面窗口左边线150像素，上边界100像素*/

2、绝对定位

<title>子元素依据其父元素进行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相对定位，但不设置偏移量*/
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
/* .child02{position:absolute;         /*绝对定位*/left:150px;                /*距左边线150px*/top:100px;                 /*距顶部边线100px*/
} */
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

未设置相对定位时

设置相对定位时——/* 相对于父元素左边线150像素定边线100像素*/

3、固定定位

<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相对定位，但不设置偏移量*/
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
.child02{position:fixed;         /*固定定位*/left:150px;                /*距左边线150px*/top:100px;                 /*距顶部边线100px*/
}
/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */
/* 相对于父元素左边线150像素定边线100像素*/
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

未缩小窗口

缩小窗口——/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */

z-index层叠等级属性

z-index 就像给元素发「楼层号」

想象你在桌上叠放几张纸：

默认情况：后放的纸盖住先放的（HTML中后写的元素会覆盖先写的）

发楼层号：给每张纸写一个数字（z-index值），数字越大楼层越高，就能压住数字小的纸

关键规则：

只对定位元素有效（设置了 position: relative/absolute/fixed 的元素）

数值越大越靠前（z-index: 2 > z-index: 1）

负数会沉到默认层下方（可用于隐藏元素）

同层级比较：若父元素层级低，子元素z-index再高也逃不出这栋"楼"

常见用法：

弹窗覆盖其他内容 → 给弹窗设置高z-index（如9999）

导航栏悬浮 → z-index: 100

轮播图的切换按钮 → 确保按钮在图片上层

避坑提醒：

像电梯按钮，z-index只在同个「电梯井」（层叠上下文）内比较

如果父元素有z-index，子元素只能在父元素的「楼层」内调整高低

<title>子元素依据其父元素进行定位</title>
<style type="text/css">
body{ margin:0px; padding:0px; font-size:18px; font-weight:bold;}
.father{margin:10px auto;width:300px;height:300px;padding:10px;background:#ccc;border:1px solid #000;position:relative;          /*相对定位，但不设置偏移量*/z-index: 1;
}
.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1px solid #000;border-radius:50px;margin:10px 0px;text-align:center;
}
.child02{position:fixed;         /*固定定位*/left:150px;                /*距左边线150px*/top:100px;                 /*距顶部边线100px*//* z-index: -1; */
}
/* 不管窗口大小如何变化，该元素始终显示在浏览器窗口的固定位置 */
/* 相对于父元素左边线150像素定边线100像素*/
</style>
</head>
<body>
<div class="father"><div class="child01">child-01</div><div class="child02">child-02</div><div class="child03">child-03</div>
</div>
</body>

效果展示

默认z-index时

设置z-index为负数时

设置z-index为正数时

CSS学习笔记6——网页布局

目录一、元素的浮动属性、清除浮动清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响原理 overflow属性二、元素的定位 1、相对定位 2、绝对定位编辑 3、固定定位 z-index层叠等级属性一、元素的浮动…...

编程日记 2026/2/16 12:48:31

dubbo http流量接入dubbo后端服务

简介 dubbo协议是基于TCP的二进制私有协议，更适合作为后端微服务间的高效RPC通信协议，也导致dubbo协议对于前端流量接入不是很友好。在dubo框架中，有两种方式可以解决这个问题： 多协议发布【推荐】，为dubbo协议服务暴…...

编程日记 2025/4/9 10:00:40

线程同步——互斥锁

线程同步——互斥锁目录一、基本概念二、打印成对出现的字母三、生产者消费者（有限缓冲问题） 3.1 基本概念 3.2 代码实现一、基本概念互斥锁是一种用于控制对共享资源访问的同步机制。它确保在同一时间内，只有一个线程可以访问被…...

编程日记 2026/2/16 7:40:26

机试题——村落基站建设

题目描述假设村落以二叉树的形状分布，我们需要选择在哪些村落建设基站。如果某个村落建设了基站，那么它和它相邻的村落（包括本节点、父节点和子节点）也会有信号覆盖。目标是计算出最少需要建设的基站数。输入描述输入为一个…...

编程日记 2026/2/16 13:05:11

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址：https://github.com/sometiny/http HTTP还有重要的一块：文件上传。这篇文章将详细讲解下，前面实现了同一个链接处理多个请求，为了方便，我们独立写了一个HTTP基类，专门处理HTTP请求。 ht…...

编程日记 2026/2/19 9:57:52

leetcoed0044. 通配符匹配 hard

1 题目：通配符匹配官方难度：难给你一个输入字符串 (s) 和一个字符模式 ( p ) ，请你实现一个支持 ‘?’ 和 ‘*’ 匹配规则的通配符匹配： ‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符序列（包括空字符序…...

编程日记 2026/2/12 10:00:32

蓝桥杯嵌入式第十二届程序设计题

一、题目概览设计一个小型停车计费系统二、分模块实现 1、LCD void disp_proc() {if(view0){char text[30];sprintf(text," Data");LCD_DisplayStringLine(Line2,(uint8_t *)text);sprintf(text," CNBR:%d ",Cnum);LCD_DisplayStri…...

编程日记 2026/2/15 0:30:48

第十四届MathorCup高校数学建模挑战赛-C题：基于 LSTM-ARIMA 和整数规划的货量预测与人员排班模型

目录摘要一、问题重述 1.1 背景知识 1.2 问题描述二、问题分析 2.1 对问题一的分析 2.2 对问题二的分析 2.3 对问题三的分析 2.4 对问题四的分析三、模型假设四、符号说明五、问题一模型的建立与求解 5.1 数据预处理 5.2 基于 LSTM 的日货量预测模型 5.3 日货量预测…...

编程日记 2026/2/16 20:07:51

python多态、静态方法和类方法

目录一、多态二、静态方法三、类方法一、多态多态（polymorphism）是面向对象编程中的一个重要概念，指的是同样的方法调用可以在不同的对象上产生不同的行为。在Python中，多态是通过方法的重写（override&#x…...

编程日记 2026/2/19 15:00:10

DTMF从2833到inband的方案

概述 freeswitch是一款简单好用的VOIP开源软交换平台。之前的文章中介绍过通过dialplan拨号计划配置的方法，实现2833到inband的转换，但是实际生产环境中的场景会更复杂，无法预先在dialplan中设置好相关参数和函数。环境 CentOS 7.9 fr…...

编程日记 2026/2/14 7:12:43

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 TypeScript Vite 项目中安装和使用 SCSS 1、安装 SCSS 的相关依赖 npm install sass --save-dev2、配置 Vite 对于 Vue 3，Vite 已经内置了对 SCSS 的支持，通常不需要额外的配置。但是，如果需要自定义配置，可以在路径…...

编程日记 2026/2/17 2:56:25

Uni-app入门到精通：tabBar节点实现多页面的切换

tabBar节点用于实现多页面的切换。对于一个多tabBar应用，可以通过tabBar节点配置项指定一级导航栏，以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置，不仅是为了方便快速开发导航，更重要的是提示App平台和小程序…...

编程日记 2026/2/19 9:57:45

Qt正则表达式QRegularExpression

在 Qt 中，正则表达式是处理文本的强大工具，它能够帮助我们匹配、搜索和替换特定的字符串模式。自 Qt 5 起，QRegularExpression 类提供了对 ECMAScript 标准的正则表达式支持，这使得它在处理各种复杂的字符串任务时变得更加高效和灵…...

编程日记 2026/1/21 3:52:57

文章目录 Properties of types and valuesRepresentation of valuesUnderlying types【底层类型】Core types【核心类型】Type identityAssignabilityRepresentabilityMethod sets BlocksDeclarations and scopeLabel scopesBlank identifierPredeclared identifiersExported i…...

编程日记 2025/11/21 18:35:06

小林coding-17道Java基础面试题

1.说一下Java的特点?Java 的优势和劣势是什么？Java为什么是跨平台的？JVM、JDK、JRE三者关系？为什么Java解释和编译都有？ jvm是什么?编译型语言和解释型语言的区别？ Python和Java区别是什么？ 2.八种基本的…...

编程日记 2026/1/14 23:39:15

ETCD --- 租约（Lease）详解

一、租约的核心概念 1. 租约（Lease）一个租约是一个有时间限制的“授权”，绑定到键值对上。每个租约有一个唯一的ID（64位整数），通过etcdctl或客户端API创建。创建租约时需指定TTL（Time-To-Live），即租约的有效期（单位：秒）。客户端需定期向etcd发送续约（KeepAl…...

编程日记 2026/2/16 18:10:11

运筹说第134期 | 矩阵对策的解法

上一期我们了解了矩阵对策的基本理论，包含矩阵对策的纯策略、矩阵对策的混合策略和矩阵对策的基本定理。接下来小编将为大家介绍矩阵对策的解法，包括图解法、方程组法和线性规划法三种经典方法。 01 图解法本节首先介绍矩阵对策的图解法，…...

编程日记 2026/2/19 4:29:24

3. 轴指令（omron 机器自动化控制器）——＞MC_CamOut

机器自动化控制器——第三章轴指令 15 MC_CamOut变量▶输入变量▶输出变量▶输入输出变量功能说明▶时序图▶指令的中止▶重启运动指令▶多重启动运动指令▶异常 MC_CamOut 结束通过输入参数指定的轴的凸轮动作指令名称FB/FUN图形表现ST表现MC_CamOut解除凸轮动作FBMC_Cam…...

编程日记 2026/2/17 1:25:43

TF32 与 FP32 的区别

TF32（Tensor Float 32）与FP32（单精度浮点数）是两种用于深度学习和高性能计算的浮点格式，其核心区别体现在精度、性能优化和应用场景上。以下是两者的详细对比分析： 一、位宽与结构差异 FP32的位宽结构 FP32…...

编程日记 2026/2/18 19:11:51

【大模型】视觉语言模型：Qwen2.5-VL的使用

官方github地址：https://github.com/QwenLM/Qwen2.5-VL 目录 Qwen家族的最新成员：Qwen2.5-VL 主要增强功能模型架构更新快速开始使用Transformers聊天 Docker Qwen家族的最新成员：Qwen2.5-VL 主要增强功能强大的文档解析功能&am…...

编程日记 2026/2/18 10:24:31

Web前端之UniApp、Taro、ReactNative和Flutter的区别

MENU 前言介绍及公司技术差异使用方法使用场景差异注意事项打包与部署差异框架应用实例结语前言在移动应用开发领域，跨平台框架已成为开发者的得力工具。UniApp、Taro、ReactNative和Flutter它们在Android（安卓）或iOS（苹果&…...

编程日记 2025/4/4 17:00:01

测试用例与需求脱节的修复方案

测试用例与需求脱节的问题可通过明确需求定义、加强需求追踪、建立有效沟通机制进行修复。其中，加强需求追踪尤为关键，能确保测试用例与实际需求的精确匹配，避免资源浪费和测试效果不佳。据行业研究，约70%的软件缺陷源于需求管理不…...

编程日记 2026/2/18 16:42:52

【Unity】鼠标拖动物体移动速度跟不上鼠标，会掉落

错误示范： 一开始把移动的代码写到update里去了，发现物体老是掉(总之移动非常不流畅，体验感很差） void Update(){Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit, M…...

编程日记 2026/2/17 18:53:35

Ollama及HuggingFace路径环境变量设置

日常经常用到这俩的一些环境变量，特记录下来，如有错误，还请指正。 1. Ollama路径环境变量设置 Ollama 模型路径变量名为OLLAMA_MODELS，设置示例： 变量名示例OLLAMA_MODELS C:\Users\Administrator\.ollama\models D…...

编程日记 2025/5/27 9:34:03

VLAN 高级特性

VLAN Access 类型端口：只能属于 1 个 VLAN，发出数据时只能根据 PVID 剥离一个 VLAN Tag 入方向：针对没有 tag 的数据包打上 PVID 的 tag出方向：将 tag 为本接口 PVID 的数据包去掉 tag，发出数据。（只有在与…...

编程日记 2026/2/16 14:35:25

学习中学习的小tips（主要是学习苍穹外卖的一些学习）

目录架构的细分使用实体类来接收配置文件中的值 webMvcConfig类： jwt令牌管理端的拦截器： JwtProperties： JwtTokenAdminInterceptor ： 对密码加密操作 Redis： 分页查询整体思想为什么动态 SQL 推荐传实体…...

编程日记 2026/2/18 6:13:51

【极速版 -- 大模型入门到进阶】LORA：大模型轻量级微调

文章目录 🌊 有没有低成本的方法微调大模型？🌊 LoRA 的核心思想🌊 LoRA 的初始化和 r r r 的值设定🌊 LoRA 实战：LoraConfig参数详解论文指路：LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE M…...

编程日记 2026/2/13 16:25:04

3d pose 指标和数据集

目录 3D姿态估计、3维重建指标：数据集 EHF数据集 SMPL-X 3D姿态估计、3维重建指标： MVE、PMVE 和 p-MPJPE 都是用于评估3D姿态估计、三维重建等任务中预测结果与真实数据之间误差的指标。 MVE (Mean Vertex Error)：是指模型重建过程中每个顶点的预测位置与真实位置之间…...

编程日记 2026/2/17 22:38:08