CSS:浮动

 文档流:

由于网页默认是一个二维平面,当我们在网页中一行行摆放标签时,块标签会独占一行,行标签则只占自身大小,这种情况下要实现网页布局就很麻烦了,所以我们就需要通过一些方法来改变这种默认的布局方式!

 浮动:

CSS中的浮动属性可以让标签脱离原来的文档流,也就是二维平面,浮动后的标签默认是内容的大小,且可以为其设置宽和高。

 语法:float:left(向左浮动)  /  right(向右浮动)  /  none(不浮动)

 存在问题:

 浮动后的标签不占用原来文档流的空间,下面的标签就会向上移动,会影响后面的网页布局。

 如何解决浮动问题?

 1. 为父级标签设置高度,将父级标签撑开。

 2. 在浮动的标签后使用清除浮动属性,自动让父级标签撑开(推荐)


 实战练习:

✎. 例如我们做一个导航栏,如图所示:


第一步:用4个<div>标签来修饰内容并通过css设置背景颜色和文字颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{//设置文字颜色和背景颜色color: antiquewhite;background-color: #50536e;		}</style></head><body><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></body>
</html>


第二步:通过css的浮动属性,让4个<div>漂浮在一行,且浮动后的div标签默认是内容大小

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;//向左浮动float: left;}</style></head><body>	<div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></body>
</html>


第三步:为浮动后的4个<div>标签设置宽和高,并使文本内容居中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;	float: left;//设置宽高以及文本居中text-align: center;width: 150px;height: 50px;line-height: 50px; }</style></head><body><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div>	</body>
</html>


第四步:使这4个<div>标签整体在页面上居中。需要在这4个div标签外部再套一个div标签,

并设置这个父级div标签宽度=4*子级div标签宽度,通过margin: 0% auto;使其居中即可。  🎀 这里只有让父级div标签宽度=4*子级div标签宽度 才能实现居中,否则该父级div标签是默认占一整行的,无法通过margin: 0% auto;使其居中.

📖 不了解margin属性的小伙伴可以参考之前 CSS:盒子模型 的文章:

CSS:盒子模型-CSDN博客

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; 	}.head{width: 600px;margin: 0% auto;} </style></head><body><div class="head"><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div></div></body>
</html>


第五步:清除浮动影响;即在浮动标签后添加一个clear属性修饰的空div标签即可。

      ➱     注意是在浮动的标签后添加,不要添加到父级标签之后了!

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} </style></head><body>	<div class="head"><div class="content">消息</div><div class="content">动态</div><div class="content">收藏</div><div class="content">投稿</div><div style="clear: left;"></div><!-- 清除浮动影响 --></div>	</body>
</html>

清除浮动后,在之后的网页布局中下面的标签就不会向上移动了;例如我们在这个导航栏后添加一个标题标签<h1>标题<h1>测试下:

这是不清除浮动效果的结果:



 本次的分享就到此为止了,希望我的分享能给您带来帮助,创作不易也欢迎大家三连支持,你们的点赞就是博主更新最大的动力!如有不同意见,欢迎评论区积极讨论交流,让我们一起学习进步!有相关问题也可以私信博主,评论区和私信都会认真查看的,我们下次再见

海漫浩浩,我亦苦作舟!大家一起学习,一起进步!  本人微信:g2279605572

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

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

相关文章

centos7离线安装pthon3.8

centos7离线安装pthon3.8 因服务器无外网环境&#xff0c;所以事先需要把所有离线的依赖都准备好。 安装前的准备 先在有外网环境的机器上准备依赖 安装 centos-release-scl 第三方yum源 yum install centos-release-scl安装 yum 依赖下载插件 yum install yum-plugin-do…

Javascript 位运算符(,|,^,<<,>>,>>>)

文章目录 一、什么是位运算&#xff1f;二、如何使用1. 位与&#xff08;AND&#xff09;&#xff1a;&用途&#xff08;1&#xff09;数据清零&#xff08;2&#xff09;判断奇偶 2. 位或&#xff08;OR&#xff09;&#xff1a;|用途&#xff08;1&#xff09;向下取整 3…

GO语言 gin框架 简述

原文地址 基本路由 Go语言中文文档 一、简介 Gin是一个golang的轻量级web框架&#xff0c;性能不错&#xff0c;API友好。 Gin支持Restful风格的API&#xff0c;可以直接从URL路径上接收api参数或者URL参数&#xff0c;也可是使用json或者表单 数据绑定的方式接收参数。 Gin响…

【传知代码】BERT论文解读及情感分类实战-论文复现

文章目录 概述原理介绍BERT模型架构任务1 Masked LM&#xff08;MLM&#xff09;任务2 Next Sentence Prediction (NSP)模型输入下游任务微调GLUE数据集SQuAD v1.1 和 v2.0NER 情感分类实战IMDB影评情感数据集数据集构建模型构建 核心代码超参数设置训练结果注意事项 小结 本文…

AIOps在线评测基准首阶段建设完成,面向社区发布真实运维数据!

本文根据必示科技算法研究员、产品总监聂晓辉博士在2024 CCF国际AIOps挑战赛线下宣讲会上的演讲整理成文。 2024年1月份OpenAIOps社区成立&#xff0c;随着越来越多的社区成员加入&#xff0c;各项工作在有条不紊的推进中。在线评测基准系统&#xff08;AIOps Live Benchmark&a…

积鼎CFDPro水文水动力模型,专为中小流域洪水“四预”研发的流体仿真技术

水动力模型与水文模型是水利工程与水文学研究中不可或缺的两大工具。水动力模型着重于流体运动的动力学机制&#xff0c;通过一系列方程组捕捉水流的时空变化&#xff0c;而概念性水文模型则侧重于流域尺度的水文循环过程&#xff0c;利用物理概念与经验关系进行近似模拟。两者…

Windows系统部署YOLOv5 v6.1版本的训练与推理环境保姆级教程

文章目录 一 概述二 依赖环境(prerequisites)2.1 硬件环境2.2 软件环境 三 环境安装3.1 创建并激活虚拟环境3.2 安装Pytorch与torchvision3.3 校验Pytorch安装3.4 下载 YOLOv5 v6.1 源码3.5 安装 YOLOv5 依赖3.6 下载预训练模型3.7 安装其他依赖3.8 测试环境安装3.9 测试训练流…

jupyter notebook更改位置

1.找到jupyer的配置文件 一般在c盘用户的.jupter文件夹下 2. 用记事本打开这个配置文件&#xff0c;定位到c.NotebookApp.notebook_dir /path_to_your_directory 替换你的位置 3.找到jupyer图标的位置&#xff0c;打开属性 添加要存放的位置在目标文件的末尾&#xff0c;重新…

python | spacy,一个神奇的 Python 库!

本文来源公众号“python”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;spacy&#xff0c;一个神奇的 Python 库&#xff01; 大家好&#xff0c;今天为大家分享一个神奇的 Python 库 - spacy。 Github地址&#xff1a;https:/…

一个全面了解Xilinx FPGA IP核的窗口:《Xilinx系列FPGA芯片IP核详解》(可下载)

随着摩尔定律的逐渐放缓&#xff0c;传统的芯片设计方法面临着越来越多的挑战。而FPGA以其并行处理能力和可编程性&#xff0c;为解决复杂问题提供了新的途径。它允许设计者在同一个芯片上实现多种不同的功能模块&#xff0c;极大地提高了资源的利用率和系统的综合性能。 FPGA…

领域数据模型建设步骤

领域数据模型建设步骤 以某音乐app为例: 1.数据调研和业务调研&#xff0c;识别业务过程&#xff0c;实体&#xff0c;关键指标 业务过程&#xff1a;播放&#xff0c;收藏&#xff0c;下载&#xff0c;点击&#xff0c;购买&#xff0c;支付 实体&#xff1a;音乐&#xff0c…

HCIA-ARP

ARP的由来 ARP这一种协议它会是在我们HCIA中第一个需要完全掌握的一个协议&#xff0c;不然对于数据通讯来说大家都会一直觉得很绕圈 协议栈&#xff0c;网线&#xff0c;网卡&#xff0c;它们组成了我们最小的数据通信的小脉络注&#xff1a;可以了解ARP攻击&#xff08;冒充访…

使用Java和MyBatis获取表头与数据

使用Java和MyBatis获取表头与数据 在数据处理与展示中&#xff0c;经常需要将数据库查询结果中的表头&#xff08;列名&#xff09;与实际数据提取出来。本文将介绍如何通过Java的JDBC和MyBatis来实现这一需求。 1. 使用JDBC获取表头与数据 在JDBC中&#xff0c;可以使用Res…

文献解读-群体基因组第二期|《中国人群中PAX2新生突变的检测及表型分析:一项单中心研究》

关键词&#xff1a;应用遗传流行病学&#xff1b;群体测序&#xff1b;群体基因组&#xff1b;基因组变异检测&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;Detection of De Novo PAX2 Variants and Phenotypes in Chinese Population: A Single-Cente…

new CCDIKSolver( OOI.kira, iks ); // 创建逆运动学求解器

demo案例 new CCDIKSolver(OOI.kira, iks); 在使用某个特定的库或框架来创建一个逆运动学&#xff08;Inverse Kinematics, IK&#xff09;求解器实例。逆运动学在机器人学、动画和计算机图形学等领域中非常重要&#xff0c;它用于根据期望的末端执行器&#xff08;如机器人的…

Compose第四弹 Compose项目

目标&#xff1a; 1.可供学习的Compose项目 一、官方提供项目 谷歌官方提供的Compose项目&#xff1a; GitHub - android/compose-samples: Official Jetpack Compose samples. 项目及主要页面展现 1.1 Reply项目 1.首页底部TAB栏 2.侧边栏菜单&#xff1a;拖动滑出和收起…

建设现代智能工业-智能化、数字化、自动化节能减排

建设现代智能工业-智能化节能减排 遵循“一体化”能源管理(Integrated Energy Management)的设计宗旨&#xff0c;集成城市各领域(如工业.交通、建筑等&#xff09;的能源生产和消费信息&#xff0c;面向城市政府、企业、公众三类实体&#xff0c;提供“一体化”的综合能源管理…

uniapp h5项目切换导航栏及动态渲染按钮颜色

1.效果图 2.html,动态渲染按钮样式---三元判断 <!-- 切换栏 --><view class"statusList"><block v-for"(item,index) in list" :key"index"><view class"swiper-tab-list" :class"current item.id?activ…

CEEMDAN +组合预测模型(CNN-Transfromer + XGBoost)

注意&#xff1a;本模型继续加入 组合预测模型全家桶 中&#xff0c;之前购买的同学请及时更新下载! 往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;Transformer-BiGRU预测模…

静态加速和动态加速是啥区别

以下是两者之间的主要区别&#xff1a; 加速对象与内容&#xff1a; 静态加速&#xff1a;主要针对网页中的静态资源&#xff0c;如HTML文件、CSS文件、JavaScript文件、图片、Flash动画等。这些资源的特点是更新频率较低&#xff0c;适合通过缓存技术加速。 动态加速&#xf…