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

HTML---网页布局

news 2026/2/7 20:40:55

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结

一.常见网页布局

二.标准文档流 

 标准文档流常见标签

标准文档流的组成
块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等
内联元素<span>、<a>、<strong>、<em>、<img>等

 三.display属性

 在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：

  •  总结--display特性

 实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px seagreen solid;width: 100px; height: 100px;}span{border: 1px red solid;}</style></head><body><div>我是元素</div><span>我是Span元素</Span></body>
</html>

  • none属性

设置的元素不会被显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: none;}

  •  inline

元素被视为内联元素，并在同一行内显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline;}

  •  inline-block

该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline-block;}

四.float属性

  • 浮动属性的特点
  1. 元素浮动后会脱离文档流，不再占据原来的空间，而是向左或向右移动，其他元素会填充到浮动元素所占据的空间。
  2. 浮动元素并可以与其他元素并排显示，如果空间不够，会自动换行或换列，并可以设置宽度和高度：浮动元素可以通过设置宽度和高度来确定其占据的空间大小

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮动</title><style>div{margin: 10px; padding: 5px;}#father{border: 1px red solid;}.layer01{border: 1px blue dashed; }.layer02{border: 1px pink dashed; }.layer03{border: 1px green dashed; ;}.layer04{border: 1px skyblue dashed; font-size: 30px; line-height: 100px;}</style></head><body><div id="father"><div class="layer01"><img src="picture1.png" alt="日用品"></div><div class="layer02"><img src="picture2.png" alt="图书"></div><div class="layer03"><img src="picture3.png" alt="鞋子"></div><div class="layer04">浮动盒子可以向左浮动，也可以向右浮动，直到外边缘碰到包含框或另一个浮动盒子为止这里使用三个图片和本段文字来讲解浮动属性在网页中的应用，根据所在的div分别向左/        右/不浮动。</div></div></div>	</body>
</html>

  •  left

设置元素向左浮动

.layer01{border: 1px blue dashed;float: left;}

  • 设置向左浮动后产生上述网页布局的原因： 

    设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。

.layer02{border: 1px darkorange dashed; float: left;}

  • right 
.layer01{border: 1px blue dashed;float: right;}

.layer02{border: 1px darkorange dashed; float: right;}
  • 总结： 

浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。

清除浮动

 清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。

移动规则：

清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。

清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。

案例： 

  •  向右浮动并清除向左浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: left;}

  • 上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。

  •  向右浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: right;}

  •  上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。

  •  向左浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: left;clear: right;}

  •  向右移动并清除两侧浮动

清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。

.layer03{border: 1px green dashed; float: right;clear: both;}

五. 解决边框塌陷问题

  • 父级边框塌陷的原因：
  1. 浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界，进而导致边框塌陷的现象发生。
  2. 相邻的两个元素的margin相遇时较大的margin会覆盖较小的margin，导致边框塌陷的现象发生。

下图为元素浮动导致的父级边框塌陷 

  •  overflow属性

在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素，并清除浮动，例如：

语法：

#father{border: 1px red solid;overflow: hidden;}

  •  after伪类

在浮动元素的父元素中添加一个带有 content:""; display:table; clear:both; 属性的伪元素。例如:

语法：

#father:after{content: '';/**内容清空**/display: block;/**设置该元素为块元素**/clear: both;/**清除两侧浮动**/}

六.解决内容溢出问题

overflow属性

 内容溢出案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{width: 200px;height: 200px;border: 1px solid rebeccapurple;}</style></head><body><div id="d1"><img src="picture1.png"/><p>都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄</p></div></body>
</html>

  •  overflow：scroll

无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。

语法：

#d1{overflow: scroll;}

  •   overflow：auto

 若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。

 练习

一.制作热门活动页面

 二.制作电视剧详情列表页面

三. 制作QQ会员页面导航

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0px; padding: 0px;}/**设置根边框的内外边距**/a{text-decoration:none ;}/**去除超链接下划线**/.nav-header{height: 90px; width: 100%; background: rgba(0, 0, 0, .6); border: 1px red solid;}.head-contain{width: 1180px; height: 90px; margin: 0 auto; text-align: center; border: 1px yellow dashed; border-width: 5px;}.top-logo,.top-nav,.top-nav li,.top-right{  /**针对上述选择器同时设置样式**/height: 90px;display: inline-block;vertical-align: top;/**垂直对齐方式：靠上**/}.top-nav{margin: 0,55; border: 1px blue solid; border-width: 5px;}/**设置右外长度边距**/.top-nav li{line-height: 90px; width: 90px;}.top-nav li a{display: block; text-align: center; font-size: 15px; color: aliceblue;}.top-nav li a:hover{color: blue;}/**设置鼠标点击链接的样式**/.top-right{border: 1px green solid; border-width: 5px;}.top-right a{display: inline-block; font-size: 15px; text-align: center; margin-top: 15px;border-radius: 35px;/**设置边框为圆角**/}.top-right a:nth-child(2){width: 93px;border: 1px solid orange ;position: relative;top: 20px;}.top-right a:nth-child(3){position: relative; top: 20px;}.top-right a:nth-child(2):hover{color: gold;background-color: orange;}</style></head><body><div class="wrap"><header class="nav-header"><!--设置一个根边框用于添加class="head-contain"中的元素--><div class="head-contain"><!--设置一个二级边框添加下列元素--><a href="#" class="top-logo"><img src="picture1.png" width="145px" height="90px"/></a><nav class="top-nav"><!--<nav标签：定义导航模块>--><ul><!--定义一个列表--><li><a href="">功能特权</li><li><a href="">游戏特权</li><li><a href="">生活特权</li><li><a href="">会员活动</li><li><a href="">成长体系</li><li><a href="">年费专区</li><li><a href="">超级会员</li></ul></nav><div class="top-right"><!--设置另一个框架用于存放下列元素--><a href="">登录</a><a href="">开通超级会员</a></div></div>		</header></div></body>
</html>

 黄色边框为二级边框 -黄色边框外层红色边框为根边框-蓝色边框为子边框1-绿色边框为子边框2

总结

相关文章：

HTML---网页布局

目录 文章目录 一.常见的网页布局 二.标准文档流 标准文档流常见标签 三.display属性 四.float属性 总结 一.常见网页布局 二.标准文档流 标准文档流常见标签 标准文档流的组成 块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等内联元素<…...

编程日记 2023/12/26 2:15:13

python 普通存款（单利）计算公式：

python 普通存款&#xff08;单利&#xff09;计算公式&#xff1a; 代码如下&#xff1a; #普通存款 单利计算公式&#xff1a;a:原值&#xff0c;n:计算年限&#xff0c;li&#xff1a;利率&#xff08;小数&#xff09;, def danli(a,n,li):print("普通存款(单利)计…...

编程日记 2023/12/26 2:12:10

什么是 PHP 内存溢出 ？遇到了要如何解决呢 ？

PHP内存溢出指的是在PHP应用程序中&#xff0c;分配给脚本执行的内存超出了PHP配置文件中设置的限制。当脚本尝试使用比可用内存更多的内存时&#xff0c;就会发生内存溢出错误。 一、内存溢出可能由以下几个原因引起&#xff1a; 循环引用&#xff1a;如果存在循环引用&#…...

编程日记 2023/12/26 2:11:09

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…...

编程日记 2023/12/26 2:07:05

【JavaEE初阶一】线程的概念与简单创建

1. 认识线程&#xff08;Thread&#xff09; 1.1 关于线程 1.1.1 线程是什么 由前一节的内容可知&#xff0c;进程在进行频繁的创建和销毁的时候&#xff0c;开销比较大&#xff08;主要体现在资源的申请和释放上&#xff09;&#xff0c;线程就是为了解决上述产生的问题而提…...

编程日记 2023/12/26 2:05:02

三叠云工程劳务管理，优化建筑施工管理，提升效率与质量

随着建筑行业的蓬勃发展&#xff0c;工程施工现场管理变得愈发复杂。传统的人员管理方式已经无法满足企业快速发展的需求。如何提高施工效率、优化人力资源管理成为了建筑企业亟待解决的问题。逐渐走向数字化的工程建设行业&#xff0c;急需一种足以匹配这一时代变革、高效管理…...

编程日记 2023/12/26 1:57:56

RocketMQ连接报错RemotingConnectException: connect to ＜192.168.57.129:9876＞解决

文章目录 前言一、RocketMQ 连接报错处理1.1 报错信息1.2 修改 broker.conf 文件1.3 Linux 开放端口1.4 项目启动成功 前言 上一篇文章&#xff1a;基于SpringBoot整合RocketMQ异步发送短信功能在项目启动的过程中报了 RocketMQ 连接错误。针对这个问题&#xff0c;本文给予记…...

编程日记 2023/12/26 1:54:53

设计模式--桥接模式

实验9&#xff1a;桥接模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解桥接模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用桥接模式解决实际问题。 [实验任务]&#xff1a;两个维度的桥接模式 用桥接模式…...

编程日记 2023/12/26 1:53:52

redis基本用法学习（C#调用StackExchange.Redis操作redis）

StackExchange.Redis是基于C#的高性能通用redis操作客户端&#xff0c;也属于常用的redis客户端之一&#xff0c;本文学习其基本用法。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装StackExchange.Redis&#xff0c;如下图所示&#xff1a;   StackExchange.…...

编程日记 2023/12/26 1:52:51

单挑力扣（LeetCode）SQL题：1308. 不同性别每日分数总计

相信很多学习SQL的小伙伴都面临这样的困境&#xff0c;学习完书本上的SQL基础知识后&#xff0c;一方面想测试下自己的水平&#xff1b;另一方面想进一步提升&#xff0c;却不知道方法。 其实&#xff0c;对于技能型知识&#xff0c;我的观点一贯都是&#xff1a;多练习、多实…...

编程日记 2023/12/26 1:49:48

Vue3组合式-依赖注入provideinject

一、注意点 专门强调了是3.0且是组合式&#xff0c;不是2.0不支持也不是选项式不支持provide&&inject&#xff0c;是支持但是有很明显的弊端&#xff0c;不建议使用 二、场景 官方的解释: 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会…...

编程日记 2023/12/26 1:47:46

SRE 与 DevOps 的不同之处

尽管网站可靠性工程 (SRE) 理念早在 2003 年就由 Google 的 Ben Treynor Sloss 提出&#xff0c;但其近年来却一直受到追捧。随着 DevOps 实践已经在许多组织中牢固确立&#xff0c;两者之间的冲突是否已经显现&#xff1f;SRE 只不过是一种过时的趋势吗&#xff1f;是 SRE 补充…...

编程日记 2023/12/26 1:45:45

【湖仓一体尝试】MYSQL和HIVE数据联合查询

爬了两天大大小小的一堆坑&#xff0c;今天把一个简单的单机环境的流程走通了&#xff0c;记录一笔。 先来个完工环境照&#xff1a; mysqlhadoophiveflinkicebergtrino 得益于IBM OPENJ9的优化&#xff0c;完全启动后的内存占用&#xff1a; 1&#xff09;执行联合查询后的…...

编程日记 2023/12/26 1:44:43

SpringCloud跨服务调用失败Seata无法回滚解决办法

遇到的问题 在微服务项目中 有A、B、C三个服务 其中 A调用B服务 &#xff0c;B调用C&#xff0c; 这些就是跨服务调用了&#xff0c;在A服务中 还调用了一个当前模块执行插入数据的方法(在这里我就叫它为AA 也就是mybatis/spring管理的本地事务) A服务开启全局事务注解 Globa…...

编程日记 2023/12/26 1:43:43

OSG三维渲染引擎编程学习之一百零一：“第十一章：OSG粒子” 之 “11.2 粒子模拟过程”

目录 第十一章 OSG粒子 11.2 粒子模拟过程 第十一章 OSG粒子 虚拟现实中有很多效果，如雨效、雪效、雾效等，这些都可以通过粒子条统来实现。一个真实的粒子系统的模式能使三维场景达到更好的效果。 粒子系统是一个非常复杂的粒子模拟过程。在OSG中，专门定义了新的名字空间o…...

编程日记 2023/12/26 1:40:38

Autosar CAN开发03（从实际应用认识CAN总线的物理层）

建议同时阅读本专栏的&#xff1a; Autosar CAN开发03&#xff08;从实际应用认识CAN总线的物理层&#xff09; Autosar CAN开发04&#xff08;从实际应用认识CAN报文&#xff09; Autosar CAN开发05&#xff08;从实际应用认识CAN波特率&#xff09; 前言 在上一章的《AU…...

编程日记 2023/12/26 1:31:29

vue中父子组件传值

父传子 传: 在"标签"上传属性 <Card :name"name"></Card> 接: 在props中 export default {props: {name: String},setup(props) {console.log(props.name);} } 子传父 传: 触发,给一个事件传值 setup(props,{emit}) {emit("get…...

编程日记 2023/12/26 1:29:27

【网络编程】基于UDP数据报实现回显服务器/客户端程序

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 前言 我们如果…...

编程日记 2023/12/26 1:27:25

sqlilabs第三十二三十三关

Less-32&#xff08;GET - Bypass custom filter adding slashes to dangerous chars) 手工注入 由 宽字符注入可知payload 成功触发报错 http://192.168.21.149/Less-32/ ?id1%df 要写字符串的话直接吧字符串变成ascii码 注意16进制的表示方式 自动注入 sqlmap -u http:…...

编程日记 2023/12/26 1:26:24

第二十一章博客

计算机应用实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互之间可以交换数据。编写网络应用程序前&#xff0c;首先必须明确所要使用的网络协议…...

编程日记 2023/12/26 1:24:22

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02