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

CSS—显示模式display、定位position、元素溢出overflow、float浮动

news 2026/4/1 20:28:37

目录

1.显示模式display

2.定位position

3.元素溢出overflow

4.float浮动

1.显示模式display

显示模式常见元素特点
块级元素div标签、h1-h6、p、form、header、footer、section、ul、li、ol、dl、dt独占一行，默认垂直布局，没有设置宽高时宽度继承父级，高度由内容撑开。可以设置宽高，具有盒子模型的特点
行内元素span标签、strong、em、i、a、b一行可存放多个，默认水平布局，默认宽度和高度由内容撑开，不能设置宽高，只能设置左右的外边距、上下左右的内边距和边框。一般容纳文本或者其他行内元素，不嵌套块级和行内块级元素
行内块元素img、input一行存放多个，默认水平布局，默认宽度和高度由内容撑开，可以设置宽高，具有盒子模型的特点

2.定位position

可让标签压在一起显示

  • 静态定位：position-static，不受left、rigth等方位设置的影响。

  • 相对定位： position: relative;改变位置的参照物是自己原来的位置，不脱标，占位，标签显示模式特点不变。受left、rigth等方位设置的影响。

  • 绝对定位： position:absolute;子级绝对定位，父级相对定位（子绝父相）。子级先找最近的已经定位的祖先元素，如果祖先元素都没有定位，则参照浏览器可视区域位置。宽高生效，具备了行内块的特点。受left、rigth等方位设置的影响。

  • 定位居中：

 

 

  • 固定定位： position:fixed; 元素的位在网页滚动时不滚动。脱标，不占位；参照物是浏览器窗口。受left、rigth等方位设置的影响。

  • 粘性定位：position-sticky，根据滚动位置在相对（relative）和固定（fixed）之间切换。

<!DOCTYPE html>
<html>
<head>
<style>
/* 注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。*/
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
</style>
</head>
<body><p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p><div class="sticky">我是有粘性的！</div><div style="padding-bottom:2000px"><p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p><p>向上滚动以消除粘性。</p><p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div></body>
</html>

 

  • 堆叠层级：按照标签书写顺序，后来者居上；作用，设置定位元素的层级顺序，改变定位元素的显示顺序。

z-index: xx默认是0，为整数，取值越大显示顺序越靠上

3.元素溢出overflow

属性描述
overflow规定如果内容溢出元素框会发生什么情况。
overflow-x规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y指定在元素的内容区域溢出时如何处理内容的上/下边缘。

4.float浮动

作用：让块状元素水平排列

属性名：float

属性值：left/right

特点：顶对齐，具备行内块显示模式特点，浮动的盒子可能“脱标”（脱离标准流的控制，不再占标准流的位置）

清除浮动：

场景：浮动元素脱标，如果父级没有高度，子级无法撑开父级高度，可能导致页面布局错乱。如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

解决办法：清除浮动

  • 额外标签法：在父级元素内容的最后添加一个块级元素（一般将标签类名设置为clearfix），设置CSS属性 clear:both

  • 单伪元素法：给父级元素添加类名clearfix，在CSS中写如以下代码

  • 双伪元素法（推荐常用）：给父级元素添加类名clearfix，在CSS中写如以下代码

  • overflow：给父级元素添加CSS属性 overflow:hidden

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】 

相关文章：

CSS—显示模式display、定位position、元素溢出overflow、float浮动

目录 1.显示模式display 2.定位position 3.元素溢出overflow 4.float浮动 1.显示模式display 显示模式常见元素特点块级元素div标签、h1-h6、p、form、header、footer、section、ul、li、ol、dl、dt独占一行&#xff0c;默认垂直布局&#xff0c;没有设置宽高时宽度继承父级…...

编程日记 2025/3/4 9:50:22

Linux调试器gdb和cgdb的使用【Ubuntu】

文章目录 一、样例代码二、预备三、常见使用1、cgdb调试操作2、gdb调试操作 四、常见技巧1、 **安装cgdb:**2、watch3、set var确定问题原因4、条件断点 一、样例代码 // mycmd.c #include <stdio.h>int Sum(int s, int e) {int result 0;for(int i s; i < e; i){r…...

编程日记 2025/3/4 9:49:20

清华大学DeepSeek详细使用教程共6版免费下载

「清华北大-Deepseek使用手册」 链接&#xff1a;https://pan.quark.cn/s/98782f7d61dc 「清华大学Deepseek整理&#xff09; 1&#xff0d;6版本链接&#xff1a;https://pan.quark.cn/s/72194e32428a AI学术工具公测链接:https://pan.baidu.com/s/104w_uBB2F42Da0qnk78_ew …...

编程日记 2025/3/4 9:48:19

使用黑森林实验室发布的Flux.1 文生图模型进行 UI 创作以及 PS 操作

我们前期介绍了黑森林实验室发布的 Flux.1 文生图大模型&#xff0c;其模型是一个扩散模型。扩散模型通过迭代细化噪声图像来生成最终图像。这种去噪过程使扩散模型能够创建更连贯、更逼真的图像&#xff0c;因为扩散是一个多步骤过程&#xff0c;这与 GAN&#xff08;生成对抗…...

编程日记 2025/3/4 9:47:16

React Native 0.78新特性

此版本在 React Native 中发布了 React 19，以及其他相关功能，例如对 Android Vector drawables 的原生支持以及对 iOS 的更好的 Brownfield 集成。 亮点 React 19 React 19 现在可在 React Native 上使用！React 19 需要更新您的应用，因为我们从 React 18 引入了一些更改…...

编程日记 2025/3/4 9:46:15

11.24 SpringMVC（1）@RequestMapping、@RestController、@RequestParam

一.RequestMapping("/user")//HTTP 请求方法既支持get也支持post&#xff0c;可表示为类路径与方法路径 二.RequestMapping(value "/m7", method {RequestMethod.POST, RequestMethod.GET}) value这个参数指定了请求的 URL 路径。method 参数指定了允许…...

编程日记 2025/3/4 9:45:13

webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果

前言 我们平时在前端网页修改好代码要点击刷新再去看修改的效果&#xff0c;这样比较麻烦&#xff0c;那么很多软件都提供了实时预览的功能&#xff0c;我们一边编辑代码一边可以看到效果。下面说的是webstorm。 1 Live Edit 首先我们需要在webstorm的settings里安装插件Live …...

编程日记 2025/3/4 9:40:07

ROS环境搭建

ROS首次搭建环境 注&#xff1a;以下内容都是在已经安装好ros的情况下如何搭建workplace 一、创建工作空间二、创建ROS包三、注意 注&#xff1a;以下内容都是在已经安装好ros的情况下如何搭建workplace 如果没有安装好&#xff0c;建议鱼香ros一步到位:鱼香ROS 我也是装了好久…...

编程日记 2025/3/4 9:35:58

Cherry Studio + 火山引擎 构建个人AI智能知识库

&#x1f349;在信息化时代&#xff0c;个人知识库的构建对于提高工作效率、知识管理和信息提取尤为重要。尤其是当这些知识库能结合人工智能来智能化地整理、分类和管理数据时&#xff0c;效果更为显著。我最近尝试通过 Cherry Studio 和 火山引擎 来搭建个人智能知识库&#…...

编程日记 2025/3/4 9:34:57

Spring Boot 与 MyBatis 版本兼容性

初接触Spring Boot&#xff0c;本次使用Spring Boot版本为3.4.3&#xff0c;mybatis的起步依赖版本为3.0.0&#xff0c;在启动时报错&#xff0c;报错代码如下 org.springframework.beans.factory.BeanDefinitionStoreException: Invalid bean definition with name userMapper…...

编程日记 2025/3/4 9:33:54

《 C++ 点滴漫谈： 二十九 》风格 vs. C++ 风格：类型转换的对决与取舍

摘要 类型转换是 C 编程中的重要机制&#xff0c;用于在不同数据类型之间进行安全高效的转换。本博客系统介绍了 C 提供的四种类型转换运算符&#xff08;static_cast、dynamic_cast、const_cast 和 reinterpret_cast&#xff09;的用法及适用场景&#xff0c;分析了它们相较于…...

编程日记 2025/3/4 9:28:48

AI预测福彩3D新模型百十个定位预测+胆码预测+杀和尾+杀和值2025年3月3日第11弹

前面由于工作原因停更了很长时间&#xff0c;停更期间很多彩友一直私信我何时恢复发布每日预测&#xff0c;目前手头上的项目已经基本收尾&#xff0c;接下来恢复发布。当然&#xff0c;也有很多朋友一直咨询3D超级助手开发的进度&#xff0c;在这里统一回复下。 由于本人既精…...

编程日记 2025/3/4 9:26:45

ArcGIS Pro高级应用：高效生成TIN地形模型

一、引言 在地理信息科学与遥感技术的快速发展背景下&#xff0c;数字高程模型&#xff08;DEM&#xff09;已成为地形表达与分析的关键工具。 三角网&#xff08;TIN&#xff09;作为DEM的一种重要形式&#xff0c;因其能够精准描绘复杂地形特征而广受青睐。 ArcGIS Pro为用…...

编程日记 2025/3/4 9:25:43

【学术会议论文投稿】Spring Boot实战：零基础打造你的Web应用新纪元

第七届人文教育与社会科学国际学术会议&#xff08;ICHESS 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看&#xff1a;https://ais.cn/u/nuyAF3 目录 一、Spring Boot简介 1.1 Spring Boot的诞生背景 1.2 Spring Boot的核心特性 二、搭建开发环境 2.1…...

编程日记 2025/3/4 9:23:40

OpenWebUI提示器：Prompt工程的“智能助手”还是“自动化革命”？

引言&#xff1a;当AI对话成为日常&#xff0c;如何让模型更懂你&#xff1f; 在AI技术爆炸式发展的今天&#xff0c;从写邮件到生成代码&#xff0c;大型语言模型&#xff08;如ChatGPT、Claude等&#xff09;已深入日常场景。但你是否遇到过这样的问题&#xff1f; “为什么…...

编程日记 2025/3/4 9:21:38

Spring Boot 异步编程深入剖析

Spring Boot 异步编程深入剖析 1. 异步方法的使用 原理深度解析 Spring Boot 的异步方法基于 Spring 的 AOP&#xff08;面向切面编程&#xff09;实现。当在方法上添加 Async 注解时&#xff0c;Spring 会为该方法所在的类创建一个代理对象。当调用该异步方法时&#xff0c…...

编程日记 2025/3/4 9:19:36

使用pyinstaller和tinyaes，对加密文件文件源码进行打包

使用pyinstaller和tinyaes&#xff0c;对加密文件文件源码进行打包 winr后&#xff0c;进入cmd命令行 1. 安装虚拟环境 pip install virtualenv pip install virtualenvwrapper-win2. 制作虚拟环境 mkvirtualenv -p"你的Python解释器地址" py版本号 例如&#xff…...

编程日记 2025/3/4 9:17:29

分布式和微服务的理解

分布式系统 概念&#xff1a;分布式系统是由多个通过网络连接的节点组成的系统&#xff0c;这些节点分布在不同的地理位置或计算机上&#xff0c;它们相互协作&#xff0c;共同完成一个或多个任务&#xff0c;对用户或外部系统而言&#xff0c;就好像是一个单一的、统一的系统…...

编程日记 2025/3/4 9:16:26

麒麟V10-SP2-x86_64架构系统下通过KVM创建虚拟机及配置虚机的NAT、Bridge两种网络模式全过程

文章目录 一、什么是虚拟化&#xff1f;虚拟化具有哪些优势 二、常见的虚拟化技术1、kvm介绍2、kvm工作原理3、kvm功能 三、安装kvm并启动第一个kvm机器1、环境准备2、安装kvm工具3、启动并设置开机自启 libvirtd 服务4、验证 KVM 模块是否加载5、上传系统镜像到指定目录6、网络…...

编程日记 2025/3/4 9:15:25

watchEffect的用法

watchEffect的用法 watchEffect的回调方法里&#xff0c;用到了哪个属性&#xff0c;就监视哪个属性 let temp 0; let height 0; watchEffect(()>{if(temp.value > 60 || height.value > 80){console.log(给服务器发请求)} })...

编程日记 2025/3/4 9:14:23

告别手动调参：Neural MHE如何让无人机在风扰中‘稳如老狗’

Neural MHE&#xff1a;无人机抗风扰控制的智能调参革命 四旋翼无人机在物流配送、农业喷洒、电力巡检等场景的应用日益广泛&#xff0c;但突发的风场扰动始终是飞控系统面临的严峻挑战。传统移动视界估计(MHE)虽能有效处理状态估计问题&#xff0c;却困在手动调参的泥潭中——…...

编程新知 2026/4/1 20:19:44

MATLAB xyz2stl实战：手把手教你修复GitHub热门工具包的常见报错（含stlWrite函数缺失解决方案）

MATLAB xyz2stl实战&#xff1a;从报错排查到完整工作流搭建 当你从GitHub下载了NWRichmond/xyz2stl工具包&#xff0c;满心期待地运行却看到"未定义函数或变量stlWrite"的红色报错时&#xff0c;这种挫败感我深有体会。作为MATLAB社区中下载量排名前10%的三维数据处…...

编程新知 2026/4/1 19:31:10

告别‘夜盲症’：用Python+OpenCV手把手教你实现红外与可见光图像融合（附完整代码）

实战指南&#xff1a;PythonOpenCV实现红外与可见光图像融合技术 夜间监控画面总是模糊不清&#xff1f;自动驾驶系统在低光照环境下识别率骤降&#xff1f;这些问题本质上都是"视觉夜盲症"的表现。今天我们将用最实用的方式&#xff0c;带你用Python和OpenCV构建一个…...

编程新知 2026/4/1 19:27:09

通信确定性可视化冗余现场总线技术开发白皮书(能源化工交通高可靠行业 Profibus DP CAN PROFINET EtherNet/IP SPE APL)

1.前言现场总线是工业物联网的核心支撑技术&#xff0c;但当前国际主流方案在国内应用中普遍存在开发门槛高、硬件成本高、调试维护复杂、冗余配置昂贵等问题&#xff0c;难以满足中小型自动化项目及国产控制系统对高性价比、高可靠性通信的需求。CANWeb现场总线深度融合CAN的高…...

编程新知 2026/4/1 19:23:07

终极指南：如何用Captum快速理解PyTorch模型的决策逻辑

终极指南&#xff1a;如何用Captum快速理解PyTorch模型的决策逻辑 【免费下载链接】captum Model interpretability and understanding for PyTorch 项目地址: https://gitcode.com/gh_mirrors/ca/captum 在当今人工智能快速发展的时代&#xff0c;PyTorch已成为深度学习…...

编程新知 2026/4/1 19:13:04

学术场景实战：DeepSeek-OCR-2驱动深求·墨鉴实现论文公式精准提取

学术场景实战&#xff1a;DeepSeek-OCR-2驱动深求墨鉴实现论文公式精准提取 1. 引言&#xff1a;学术研究中的公式提取痛点 如果你是一名理工科的研究生、科研工作者&#xff0c;或者经常需要阅读学术论文&#xff0c;你一定遇到过这样的场景&#xff1a;在PDF论文里看到一个…...

编程新知 2026/4/1 19:11:01

终极Übersicht小部件调试指南：10个实用工具和高效方法

终极bersicht小部件调试指南&#xff1a;10个实用工具和高效方法 【免费下载链接】uebersicht ˈyːbɐˌzɪt 项目地址: https://gitcode.com/gh_mirrors/ue/uebersicht bersicht是一款强大的macOS桌面小部件工具&#xff0c;让开发者能够在桌面上创建和运行自定义小部…...

编程新知 2026/4/1 18:48:44

万兴剧厂AI漫剧APP2025推荐，打造个性化漫剧体验

万兴剧厂AI漫剧APP2025推荐&#xff0c;打造个性化漫剧体验在当今数字化娱乐的浪潮中&#xff0c;漫剧以其独特的表现形式和丰富的内容吸引了众多用户。据《2025中国数字娱乐行业发展报告》显示&#xff0c;2025年漫剧市场规模持续增长&#xff0c;用户对于优质漫剧的需求也日益…...

编程新知 2026/4/1 17:39:24

还在用老掉牙的HashTab？2024年最新文件哈希校验工具横向评测（附下载）

2024年文件哈希校验工具终极指南&#xff1a;告别过时方案&#xff0c;拥抱高效验证 还在为文件完整性验证发愁&#xff1f;每次下载重要软件都要反复核对哈希值却找不到趁手工具&#xff1f;作为从业十年的信息安全顾问&#xff0c;我见证了哈希校验工具从简陋到专业的演变。今…...

编程新知 2026/4/1 17:26:55

H5-Dooring零基础入门终极指南：无需编码制作专业H5页面

H5-Dooring零基础入门终极指南&#xff1a;无需编码制作专业H5页面 【免费下载链接】h5-Dooring H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台. 项目地址: https://g…...

编程新知 2026/4/1 17:24:50