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

HTML---网页布局

news 2025/9/14 4:25:53

文章目录

一.常见的网页布局

二.标准文档流

标准文档流常见标签

三.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属性

浮动属性的特点

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

演示案例：

<!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;}

五. 解决边框塌陷问题

父级边框塌陷的原因：

浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界，进而导致边框塌陷的现象发生。
相邻的两个元素的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 普通存款（单利）计算公式： 代码如下： #普通存款单利计算公式：a:原值，n:计算年限，li：利率（小数）, def danli(a,n,li):print("普通存款(单利)计…...

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

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

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

编程日记 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. 认识线程（Thread） 1.1 关于线程 1.1.1 线程是什么由前一节的内容可知，进程在进行频繁的创建和销毁的时候，开销比较大（主要体现在资源的申请和释放上），线程就是为了解决上述产生的问题而提…...

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

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

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

编程日记 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 项目启动成功前言上一篇文章：基于SpringBoot整合RocketMQ异步发送短信功能在项目启动的过程中报了 RocketMQ 连接错误。针对这个问题，本文给予记…...

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

设计模式--桥接模式

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

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

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

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

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

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

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

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

Vue3组合式-依赖注入provideinject

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

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

SRE 与 DevOps 的不同之处

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

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

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

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

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

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

遇到的问题在微服务项目中有A、B、C三个服务其中 A调用B服务 ，B调用C， 这些就是跨服务调用了，在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总线的物理层）

建议同时阅读本专栏的： Autosar CAN开发03（从实际应用认识CAN总线的物理层） Autosar CAN开发04（从实际应用认识CAN报文） Autosar CAN开发05（从实际应用认识CAN波特率） 前言在上一章的《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数据报实现回显服务器/客户端程序

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

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

sqlilabs第三十二三十三关

Less-32（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

第二十一章博客

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

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2025/9/9 21:40:44

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2025/9/10 3:57:22

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决问题背景在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...

编程新知 2025/9/9 10:10:19

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2025/9/13 17:42:11