CSS3学习教程，从入门到精通，CSS3 元素的浮动与定位语法知识点及案例代码（17）

CSS3 元素的浮动与定位语法知识点及案例代码

一、CSS3 浮动（float）

知识点

1. **定义** ：浮动使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。浮动主要用于布局，如实现图文绕排等效果。
2. **取值** ：* `left` ：向左浮动。* `right` ：向右浮动。* `none` ：默认值，不浮动。3. **清除浮动** ：浮动会使父元素高度塌陷，需要清除浮动来避免布局问题。常用方法有：* `clear:both` ：清除浮动，使元素位于浮动元素下方。* 使用 `overflow:hidden` 给父元素添加隐藏溢出样式。

案例代码

<!DOCTYPE html>
<html>
<head><title>CSS3 浮动案例</title><style>/* 父容器 */.container {border: 2px solid black;padding: 10px;overflow: hidden; /* 清除浮动 */}/* 左浮动元素 */.left-float {float: left;width: 100px;height: 100px;background-color: lightblue;margin: 5px;}/* 右浮动元素 */.right-float {float: right;width: 100px;height: 100px;background-color: lightgreen;margin: 5px;}/* 清除浮动的元素 */.clear {clear: both;height: 20px;background-color: lightgray;}</style>
</head>
<body><div class="container"><div class="left-float">左浮动</div><div class="right-float">右浮动</div><div class="clear">清除浮动</div></div>
</body>
</html>

注释 ：在这个案例中，我们创建了一个父容器 container，里面有两个浮动元素（一个左浮动，一个右浮动）和一个清除浮动的元素。通过 overflow:hidden 清除了父容器内部浮动元素导致的高度塌陷问题，确保父容器能够正确包裹浮动子元素。左浮动和右浮动元素分别向左和向右对齐，清除浮动的元素位于它们下方。

二、CSS3 定位（position）

知识点

1. **定义** ：定位用于指定元素在文档中的位置，通过不同的定位方式可以实现复杂的布局效果。
2. **取值及特点** ：* `static` ：默认值，元素按照正常文档流进行排列，不进行定位。* `relative` ：相对定位，元素相对于其正常位置进行偏移，不脱离文档流，原位置保留。* `absolute` ：绝对定位，元素相对于最近的已定位（非 `static`）的祖先元素进行定位，脱离文档流，原位置不保留。* `fixed` ：固定定位，元素相对于浏览器窗口进行定位，即使窗口滚动，元素位置不变。* `sticky` ：粘性定位，是一种相对定位和固定定位的混合，根据滚动位置来决定其行为方式。3. **定位属性** ：* `top` 、`right` 、`bottom` 、`left` ：用于指定定位元素的位置偏移量。

案例代码

<!DOCTYPE html>
<html>
<head><title>CSS3 定位案例</title><style>/* 相对定位元素 */.relative-box {position: relative;width: 200px;height: 200px;background-color: lightpink;top: 20px; /* 相对于原位置向下偏移 20px */left: 20px; /* 相对于原位置向左偏移 20px */}/* 绝对定位元素 */.absolute-box {position: absolute;width: 150px;height: 150px;background-color: lightcoral;top: 50px; /* 相对于最近的已定位祖先元素向下偏移 50px */left: 50px; /* 相对于最近的已定位祖先元素向左偏移 50px */}/* 固定定位元素 */.fixed-box {position: fixed;width: 100px;height: 100px;background-color: lightgreen;top: 10px; /* 相对于浏览器窗口向下偏移 10px */right: 10px; /* 相对于浏览器窗口向右偏移 10px */}/* 粘性定位元素 */.sticky-box {position: sticky;top: 10px; /* 当元素距离顶部 10px 时触发粘性定位 */background-color: lightblue;padding: 10px;}</style>
</head>
<body><div class="relative-box">相对定位</div><div class="absolute-box">绝对定位</div><div class="sticky-box">粘性定位（滚动页面可查看效果）</div><div style="height: 1500px;">（用于测试固定定位和粘性定位的长页面内容）</div>
</body>
</html>

注释 ：在这个案例中，我们展示了相对定位、绝对定位、固定定位和粘性定位的效果。相对定位的元素相对于自身原位置偏移；绝对定位的元素相对于最近的已定位祖先元素（如果没有则相对于 body）定位；固定定位的元素始终相对于浏览器窗口定位，即使页面滚动位置也不变；粘性定位的元素在滚动到一定位置时会切换为固定定位，常用于导航栏等需要在滚动过程中保持可见的元素。

以下是开发中常用的CSS3元素浮动与定位的实际具体案例：

CSS3 浮动实际案例

案例一：图文混排

<!DOCTYPE html>
<html>
<head><title>图文混排案例</title><style>.box {width: 150px;height: 100px;background-color: lightblue;float: left;margin-right: 15px;}p {line-height: 1.6;}</style>
</head>
<body><h1>图文混排案例</h1><div class="box">图片</div><p>这是一个图文混排的案例。通过将图片设置为左浮动，文字会自动环绕在图片的右侧。这种方式常用于文章中的插图，使页面布局更加美观和紧凑。</p><p>CSS3 的浮动属性使元素脱离正常文档流，从而实现图文混排的效果。在实际开发中，这种方法简单实用，能够快速实现所需的布局。</p>
</body>
</html>

注释 ：在这个案例中，我们创建了一个浮动的 div 元素作为图片，然后在后面添加了两段文字。通过设置 float:left，图片会向左浮动，文字则会自动环绕在图片的右侧，实现图文混排的效果。这种方式在文章排版中非常常见，能够使页面布局更加美观和紧凑。

案例二：两栏布局

<!DOCTYPE html>
<html>
<head><title>两栏布局案例</title><style>.container {width: 80%;margin: 0 auto;overflow: hidden;}.left {width: 30%;float: left;background-color: lightpink;padding: 10px;}.right {width: 70%;float: right;background-color: lightgreen;padding: 10px;}</style>
</head>
<body><div class="container"><div class="left">左侧栏</div><div class="right">右侧栏</div></div>
</body>
</html>

注释 ：在这个案例中，我们创建了一个父容器 container，里面有两个子元素 left 和 right。通过设置 float:left 和 float:right，分别将左侧栏和右侧栏向左和向右浮动，实现两栏布局的效果。父容器通过 overflow:hidden 清除了内部浮动元素导致的高度塌陷问题，确保父容器能够正确包裹浮动子元素。这种两栏布局在网页设计中非常常见，如博客、新闻网站等。

CSS3 定位实际案例

案例一：固定导航栏

<!DOCTYPE html>
<html>
<head><title>固定导航栏案例</title><style>.nav {position: fixed;top: 0;width: 100%;background-color: #333;color: white;padding: 10px 0;z-index: 100;}.nav ul {list-style-type: none;margin: 0;padding: 0;text-align: center;}.nav ul li {display: inline-block;margin: 0 15px;}.nav ul li a {color: white;text-decoration: none;}.content {margin-top: 60px; /* 为内容区域留出导航栏的高度 */padding: 20px;}</style>
</head>
<body><nav class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">产品中心</a></li><li><a href="#">联系我们</a></li></ul></nav><div class="content"><h1>固定导航栏案例</h1><p>这是一个固定导航栏的案例。当用户滚动页面时，导航栏始终固定在页面顶部，方便用户随时访问各个页面部分。</p><p>通过设置 `position:fixed` 和 `top:0`，导航栏会相对于浏览器窗口定位，即使页面滚动，导航栏位置也不变。这种方式在实际开发中非常常见，能够提高用户体验。</p><div style="height: 1500px;">（用于测试固定导航栏效果的长页面内容）</div></div>
</body>
</html>

注释 ：在这个案例中，我们创建了一个固定导航栏。通过设置 position:fixed 和 top:0，导航栏会相对于浏览器窗口定位，即使页面滚动，导航栏位置也不变。这种方式在实际开发中非常常见，能够提高用户体验，方便用户随时访问各个页面部分。

案例二：模态框

<!DOCTYPE html>
<html>
<head><title>模态框案例</title><style>.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;z-index: 200;}.modal-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;background-color: white;padding: 20px;border-radius: 5px;}.btn {display: inline-block;padding: 8px 15px;background-color: #333;color: white;text-decoration: none;border-radius: 3px;cursor: pointer;}</style>
</head>
<body><button class="btn" onclick="openModal()">打开模态框</button><div class="modal" id="myModal"><div class="modal-content"><h2>模态框</h2><p>这是一个模态框的案例。模态框会覆盖在页面内容之上，用户必须与模态框交互后才能继续操作页面其他部分。</p><button class="btn" onclick="closeModal()">关闭</button></div></div><script>function openModal() {document.getElementById('myModal').style.display = 'block';}function closeModal() {document.getElementById('myModal').style.display = 'none';}</script>
</body>
</html>

注释 ：在这个案例中，我们创建了一个模态框。通过设置 position:fixed 和 top:0、left:0，模态框会覆盖在页面内容之上，用户必须与模态框交互后才能继续操作页面其他部分。模态框的内容通过 position:absolute 和 transform:translate(-50%, -50%) 居中显示，这种方式在实际开发中非常常见，用于实现弹出窗口、提示框等效果。

案例三：粘性定位导航栏

<!DOCTYPE html>
<html>
<head><title>粘性定位导航栏案例</title><style>.nav {position: sticky;top: 0;width: 100%;background-color: #333;color: white;padding: 10px 0;z-index: 100;}.nav ul {list-style-type: none;margin: 0;padding: 0;text-align: center;}.nav ul li {display: inline-block;margin: 0 15px;}.nav ul li a {color: white;text-decoration: none;}.content {padding: 20px;}</style>
</head>
<body><nav class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">产品中心</a></li><li><a href="#">联系我们</a></li></ul></nav><div class="content"><h1>粘性定位导航栏案例</h1><p>这是一个粘性定位导航栏的案例。当用户滚动页面到一定位置时，导航栏会固定在页面顶部，方便用户随时访问各个页面部分。</p><p>通过设置 `position:sticky` 和 `top:0`，导航栏会在滚动到一定位置时切换为固定定位，这种方式在实际开发中非常常见，能够提高用户体验。</p><div style="height: 1500px;">（用于测试粘性定位导航栏效果的长页面内容）</div></div>
</body>
</html>

注释 ：在这个案例中，我们创建了一个粘性定位导航栏。通过设置 position:sticky 和 top:0，导航栏会在滚动到一定位置时切换为固定定位，这种方式在实际开发中非常常见，能够提高用户体验，方便用户随时访问各个页面部分。

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

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

相关文章

数据结构：汉诺塔问题的递归求解和分析

数据结构：汉诺塔问题的递归求解和分析

递归方法求解该类问题&#xff0c;是一种简单的思维方法&#xff0c;通常比使用迭代方法更简单。但是&#xff0c;递归方法也有劣势。此处以典型的汉诺塔问题&#xff08;Tower of Hanoi&#xff09;为例给予说明。 汉诺塔是根据一个传说形成的数学问题&#xff0c;最早是由法国…
阅读更多...
3.27学习总结 算法题

3.27学习总结 算法题

自己用c语言做的&#xff0c;不尽如意 后面看了题解&#xff0c;用的是c&#xff0c;其中string 变量和字符串拼接感觉比c方便好多&#xff0c;可以用更少的代码实现更好的效果&#xff0c;打算之后去学习c&#xff0c;用c写算法。 递归&#xff0c;不断输入字符&#xff0c;…
阅读更多...
vue 图片放大到全局

vue 图片放大到全局

背景&#xff1a; 在vue项目中&#xff0c;el-image组件图片组件用于展示图片&#xff0c;组件自带的属性preview-teleported&#xff0c;设置为true可以控制图片放大到全局 实现效果&#xff1a; 核心代码&#xff1a; //图片地址&#xff1a;BASEUrl /file/ item.file //这…
阅读更多...
【商城实战(75)】数据分析指标体系搭建：从0到1的技术指南

【商城实战(75)】数据分析指标体系搭建：从0到1的技术指南

【商城实战】专栏重磅来袭&#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建&#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用户、商品、订单等核心模块开发&#xff0c;再到性能优化、安全加固、多端适配&#xf…
阅读更多...
seatunnel配置mysql2hive

seatunnel配置mysql2hive

SeaTunnel安装教程 # 执行流程 # 下载&#xff0c;解压 # https://mirrors.aliyun.com/apache/seatunnel/2.3.8/?spma2c6h.25603864.0.0.2e2d3f665eBj1E # https://blog.csdn.net/taogumo/article/details/143608532 tar -zxvf apache-seatunnel-2.3.8-bin.tar.gz -C /opt/mo…
阅读更多...
SSH项目负载均衡中的Session一致性解决方案‌

SSH项目负载均衡中的Session一致性解决方案‌

SSH项目负载均衡中的Session一致性解决方案‌ 1. 粘性会话&#xff08;Session Sticky&#xff09;‌2. Session复制&#xff08;集群同步&#xff09;‌3. 集中式Session存储‌4. 客户端存储&#xff08;Cookie加密&#xff09;‌方案选型建议‌注意事项‌ 1. 粘性会话&#x…
阅读更多...
MySQL 表连接（内连接与外连接）

MySQL 表连接（内连接与外连接）

&#x1f3dd;️专栏&#xff1a;Mysql_猫咪-9527的博客-CSDN博客 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 1、表连接的核心概念 1.1 为什么需要表连接&#xff1f; 2、内连接&a…
阅读更多...
解锁Spring Boot异步编程：让你的应用“飞“起来！

解锁Spring Boot异步编程：让你的应用“飞“起来！

引言&#xff1a;从点餐说起 &#x1f354; 想象你在快餐店点餐&#xff1a; 同步模式&#xff1a;排队等餐&#xff0c;队伍越来越长&#xff08;就像卡死的服务器&#xff09;异步模式&#xff1a;拿号后去旁边坐着等&#xff08;服务员喊号通知你&#xff09; 今天我们就…
阅读更多...
做一个有天有地的css及html画的旋转阴阳鱼

做一个有天有地的css及html画的旋转阴阳鱼

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天地阴阳</title><style>/* 重置默认样…
阅读更多...
ngx_http_core_main_conf_t

ngx_http_core_main_conf_t

定义在 src\http\ngx_http_core_module.h typedef struct {ngx_array_t servers; /* ngx_http_core_srv_conf_t */ngx_http_phase_engine_t phase_engine;ngx_hash_t headers_in_hash;ngx_hash_t variables_hash;…
阅读更多...
计算机二级（C语言）考试高频考点总汇（二）—— 控制流、函数、数组和指针

计算机二级（C语言）考试高频考点总汇（二）—— 控制流、函数、数组和指针

目录 六、控制流 七、函数 八、数组和指针 六、控制流 76. if 语句可以&#xff08;嵌套&#xff09;&#xff0c; if 语句可以嵌套在另一个 if 语句内部&#xff0c;形成&#xff08;嵌套的条件判断结构&#xff09;&#xff0c;用于处理更复杂的条件判断逻辑。 77. els…
阅读更多...
WebRTC协议全面教程：原理、应用与优化指南

WebRTC协议全面教程：原理、应用与优化指南

一、WebRTC协议概述 **WebRTC&#xff08;Web Real-Time Communication&#xff09;**是一种开源的实时通信协议&#xff0c;支持浏览器和移动应用直接进行音频、视频及数据传输&#xff0c;无需插件或第三方软件。其核心特性包括&#xff1a; P2P传输&#xff1a;点对点直连…
阅读更多...
使用 WSL + Ubuntu + Go + GoLand（VSCode） 开发环境配置指南

使用 WSL + Ubuntu + Go + GoLand（VSCode） 开发环境配置指南

1. 安装和配置 WSL 与 Ubuntu 启用 WSL 功能（以管理员身份运行 PowerShell）： wsl --install 或手动启用： dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart dism.exe /online /enable-feature /featurename:VirtualMachi…
阅读更多...
element-plus中，Tour 漫游式引导组件的使用

element-plus中，Tour 漫游式引导组件的使用

目录 一.Tour 漫游式引导组件的简单介绍 1.作用 2.基本使用 3.展示效果 二.实战1&#xff1a;介绍患者病历表单 1.要求 2.实现步骤 3.展示效果 结语 一.Tour 漫游式引导组件的简单介绍 1.作用 快速了解一个功能/产品。 2.基本使用 从官网复制如下代码&#xff1a; &…
阅读更多...
39-Ajax工作原理

39-Ajax工作原理

1. 简明定义开场 “AJAX(Asynchronous JavaScript and XML)是一种允许网页在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新部分网页内容的技术。它通过JavaScript的XMLHttpRequest对象或现代的Fetch API实现异步通信。” 2. 核心工作原理 "AJAX的工作…
阅读更多...
Python 爬虫案例

Python 爬虫案例

以下是一些常见的 Python 爬虫案例&#xff0c;涵盖了不同的应用场景和技术点&#xff1a; 1. 简单网页内容爬取 案例&#xff1a;爬取网页标题和简介 import requests from bs4 import BeautifulSoup url "https://www.runoob.com/" response requests.get(url) …
阅读更多...
【C++进阶】函数：深度解析 C++ 函数的 12 大进化特性

【C++进阶】函数：深度解析 C++ 函数的 12 大进化特性

目录 一、函数基础 1.1 函数定义与声明 1.2 函数调用 1.3 引用参数 二、函数重载&#xff1a;同名函数的「多态魔法」&#xff08;C 特有&#xff09; 2.1 基础实现 2.2 重载决议流程图 2.3 与 C 语言的本质区别 2.4 实战陷阱 三、默认参数&#xff1a;接口的「弹性设…
阅读更多...
Redis的基础，经典，高级问题解答篇

Redis的基础，经典，高级问题解答篇

目录 一&#xff0c;基础 二&#xff0c;经典 缓存雪崩&#xff1a; 1. Redis事务的原子性 2. 与MySQL事务的区别 1. 主从复制原理 2. 哨兵模式故障转移流程 3. 客户端感知故障转移 三&#xff0c;高级 一&#xff0c;基础 Redis的5种基础数据类型及使用场景&#xf…
阅读更多...
【蓝桥杯】好数

【蓝桥杯】好数

好数 问题描述代码解释代码 好数 问题描述 一个整数如果按从低位到高位的顺序&#xff0c;奇数位 (个位、百位、万位 ⋯ ) 上的数字是奇数&#xff0c;偶数位 (十位、千位、十万位 ⋯ ) 上的数字是偶数&#xff0c;我们就称之为 “好数”。 给定一个正整数 N&#xff0c;请计算…
阅读更多...
利用 Patroni + etcd + HAProxy 搭建高可用 PostgreSQL 集群

利用 Patroni + etcd + HAProxy 搭建高可用 PostgreSQL 集群

在生产环境中&#xff0c;数据库的高可用性是系统稳定运行的关键。本文将详细讲解如何利用 Docker 部署一个由 etcd、Patroni 和 HAProxy 组成的 PostgreSQL 高可用集群&#xff0c;实现自动故障转移和负载均衡。 架构概述 本架构主要包括三部分&#xff1a; etcd 集群 etcd …
阅读更多...
最新文章

Copyright @ 2022~2023