21.HTML 浮动、定位和显示属性 htmldiv浮动
lipiwang 2024-10-22 15:43 6 浏览 0 评论
CSS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动（Float）
浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
使用场景
- 文字环绕图片。
- 创建水平导航栏。
- 无网格系统时的列布局。
注意事项
- 清除浮动（Clearing Floats）：使用clear属性可以防止元素被浮动元素覆盖。
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
- 包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过清除浮动或使用其他技术（如overflow）来解决这个问题。
- 浮动塌陷（Float Collapse）：浮动元素不占据空间，可能导致父元素高度塌陷。
定位（Position）
定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
使用场景
- 相对定位（Relative Positioning）：元素相对于其正常位置进行偏移。
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
- 绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素进行定位。
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
- 固定定位（Fixed Positioning）：元素相对于视口进行定位，即使页面滚动也不会移动。
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
- 粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。
.sticky-element {
position: sticky;
top: 10px;
}
注意事项
- 定位元素可能会脱离文档流，影响周围元素的布局。
- z-index属性可以控制堆叠顺序。
- 绝对定位元素的容器应有position: relative;，以便正确定位。
显示（Display）
display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
使用场景
- 块级元素（Block）：display: block;使元素表现为块级，占据新的行。
.block-element {
display: block;
}
- 内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。
.inline-element {
display: inline;
}
- 内联块元素（Inline-Block）：display: inline-block;允许元素并排排列，同时拥有块级元素的宽度和高度属性。
.inline-block-element {
display: inline-block;
}
- 弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵活地在容器内排列。
.flex-container {
display: flex;
}
- 网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。
.grid-container {
display: grid;
}
- 隐藏元素（None）：display: none;将元素隐藏，且不为元素保留空间。
.hidden-element {
display: none;
}
注意事项
- 使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
- display: flex;和display: grid;为现代布局提供了更多控制，通常比浮动和定位更优。
示例
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
CSS样式
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。
结语
浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。
- 上一篇：css之定位 css定位详解
- 下一篇：27、如何解决 margin“塌陷”(必会)
相关推荐
- 如何在 Linux 中压缩文件和目录?（linux压缩文件夹到指定目录）
-
在Linux系统中，文件和目录的压缩是一项常见且重要的操作。无论是为了节省存储空间、便于文件传输，还是进行备份管理，掌握压缩技术都能极大地提升工作效率。Linux中常用的压缩工具1.tar：打...
- 什么是LIM模具?与普通硅胶模具有何本质区别?
-
要深入理解LIM模具及其与普通硅胶模具的本质区别，需从成型逻辑、技术架构、应用价值三个层面拆解，以下是系统性解析：一、LIM模具：定义与核心技术1.定义LIM模具（LiquidInj...
- 前后端安全机制（前后端分离安全的token）
-
一、密钥安全管理方案1.动态密钥分发机制密钥与会话绑定后端为每个用户会话生成临时密钥（如AES-256密钥），通过HTTPS加密传输给前端，会话结束后自动失效。例如：javascript//...
- Switch 2芯片细节曝光，英伟达专门定制支持DLSS，网友:掌机模式相当于PS4
-
Switch2处理器，细节被实锤！数毛社（DigitalFoundry）消息，已经确定Switch2采用的是英伟达真·定制版芯片，包含8核CPU和12GBLPDDR5X内存。GPU则基于Amp...
- 独立站的PageSpeed Insights 指标在seo中的作用?
-
这是一个非常关键的问题，关于独立站（如Shopify、WordPress、自建FastAPI/Vue等网站）的PageSpeedInsights指标（Google的网页性能评分工具）在...
- 前端工程化-webpack 分包的方式有哪些?
-
Webpack的分包（CodeSplitting）是优化应用性能的重要手段，主要通过合理拆分代码减少首次加载体积、提升缓存利用率。以下是常见的分包方式及生产/开发环境配置建议：一、Webpack...
- 液态硅胶(LSR)套啤注塑件的关键技术难点与解决方案?
-
液态硅胶（LSR）套啤注塑件（即二次注塑成型，一次成型基材+二次LSR包胶）在医疗、电子、汽车等领域应用广泛，但其关键技术难点需从材料、模具、工艺等多维度突破。以下是核心难点及解决方案：一、关...
- spa首屏加载慢怎样解决（spa首屏优化）
-
SPA（SinglePageApplication，单页应用）首屏加载慢是一个常见问题，主要原因通常是首次加载需要拉取体积较大的JavaScript文件、样式表、初始化数据等。以下是一些常见的...
- 揭秘|为什么新华三(H3C)要自主研发运维管理软件?
-
1概述1.1产生背景随着互联网技术的快速发展，企业对计算、网络的需求也越来越大。为了保证整个数据系统可靠、稳定地运行，相关企业对运维系统的要求越来越高，运维成本也在随之逐步增加。H3C公司自主研发的运...
- 动态主机配置协议——DHCP详解（dhcp动态主机配置协议的功能是?）
-
一、DHCP简介DHCP(DynamicHostConfigurationProtocol),动态主机配置协议，是一个应用层协议。当我们将客户主机ip地址设置为动态获取方式时，DHCP服务器就会...
- OGG同步到Kafka（oggforbigdata到kafka）
-
目的：测试使用OGG将数据单向同步到Kafka上。简要说明：Kafka使用单节点单Broker部署；单独部署简单ZooKeeper；需要使用到JAVA1.8；OGG需要2个版本，一个fororacl...
- Zabbix入门操作指南（zabbix4.0使用手册）
-
上篇：安装与配置一.概述在开始之前，一些概念和定义需要我们提前了解一下（以下内容摘自官方网站）。1.1几个概念架构Zabbix由几个主要的功能组件组成，其职责如下所示。ServerZabbixs...
- 绝对干货!升级MySQL5.7到MySQL8.0的最佳实践分享
-
一、前言事出必有因，在这个月的某个项目中，我们面临了一项重要任务，即每年一次的等保测评整改。这次测评的重点是Mysql的一些高危漏洞，客户要求我们无论如何必须解决这些漏洞。尽管我们感到无奈，但为了满足...
- pytorch v2.7.0震撼发布!Blackwell GPU支持+编译性能狂飙，AI开发
-
重点内容测试版（Beta）：oTorch.Compile支持Torch函数模式oMega缓存原型（Prototype）：o支持NVIDIABlackwell架构oPyTorch...
- kubernetes1.31.3集群搭建(上)（kubectl连接集群）
-
1集群规划1.1物理机环境电脑操作系统CPU内存硬盘网卡IP地址（静态）虚拟机软件服务器操作系统联想Windows11Intel12900K24核128GB4TBPcIE4.0无线网卡192...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)