第十三课:浮动与定位
学习目标
- 理解CSS浮动的基本概念和用法。
- 理解CSS定位的各种类型及其用法。
- 学会使用浮动和定位来创建网页布局。
浮动(Float)
概念:
浮动是一种CSS布局技术,允许元素脱离文档流,并可以向左或向右移动,直到它的外边缘紧靠包含块或另一个浮动元素。浮动元素的主要用途是实现文本环绕图片效果,但也常用于布局设计。
参数用法:
float: left;
- 元素向左浮动。float: right;
- 元素向右浮动。float: none;
- 元素不浮动,保持在常规文档流中。
代码示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>浮动示例</title>
<style>
.clearfix::after {
content: "";
clear: both;
display: table;
}
.box {
float: left;
width: 100px;
height: 100px;
margin: 5px;
background: #e3e3e3;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<!-- 清除浮动 -->
<div style="clear: both;"></div>
</div>
</body>
</html>
预计输出效果:
在浏览器中显示三个灰色的正方形盒子,它们将从左至右排列,每个盒子之间有一定间距。clearfix
类解决了由浮动引起的父元素高度塌陷问题。
定位(Positioning)
概念:
定位允许开发者精确地控制元素位置。定位的元素可以脱离文档流,并可以放置在页面上的任意位置。定位是一个复杂的概念,因为它涉及到多种类型的定位方式。
参数用法:
position: static;
- 默认定位方式,元素按照正常文档流定位。position: relative;
- 元素相对于其原始位置进行定位,不脱离文档流。position: absolute;
- 元素相对于最近的非静态(position: static以外的)定位祖先元素定位。position: fixed;
- 元素相对于浏览器窗口定位,即使滚动页面也会固定在窗口的特定位置。position: sticky;
- 元素根据用户的滚动位置,在relative
和fixed
定位之间切换。
代码示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定位示例</title>
<style>
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: yellow;
}
.absolute {
position: absolute;
top: 80px;
left: 80px;
background-color: blue;
}
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
background-color: green;
}
.sticky {
position: sticky;
top: 0;
background-color: red;
}
.container {
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="relative">相对定位</div>
<div class="absolute">绝对定位</div>
<div class="fixed">固定定位</div>
<div class="sticky">粘性定位</div>
</div>
</body>
</html>
预计输出效果:
在浏览器中显示四种不同颜色和不同定位方式的盒子。相对定位盒子脱离原始位置向下和向右移动了20px;绝对定位盒子相对于container
容器定位在80px的位置;固定定位盒子在窗口右下角,不随页面滚动移动;粘性定位的盒子在滚动到页面顶部时固定。
课后练习
- 浮动练习:创建一个HTML页面,添加三个
div
元素,为它们添加类box
并应用浮动来让它们水平排列。尝试在box
元素后添加其他内容,看看内容如何围绕浮动元素流动。 - 定位练习:
- 在页面中创建一个
div
,应用相对定位,并通过修改top
和left
值来移动它。 - 创建一个
div
,应用绝对定位,将其放在页面的右下角。 - 创建一个
div
,应用固定定位,创建一个始终显示在页面顶部的导航栏。 - 创建一个
div
,应用粘性定位,当页面滚动时,观察其如何固定在页面顶部。
- 在页面中创建一个
浮动练习
这里是一个简单的HTML页面,它包含三个使用float
属性的div
元素,这会使它们水平排列。添加了一些文本内容在box
元素之后,以便观察周围内容的流动情况。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>浮动练习</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix">
<p>这段文本展示了浮动元素之后内容的流动情况。如果浮动正确,这段文本会围绕上面的三个框流动。</p>
</div>
</body>
</html>
定位练习
接下来是一个包含各种定位示例的HTML页面。
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定位练习</title>
<style>
.relative-box {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: lightblue;
}
.absolute-box {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-color: lightgreen;
}
.fixed-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: lightcoral;
z-index: 1000;
}
.sticky-box {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: lightgoldenrodyellow;
padding: 10px;
margin-top: 60px; /* 为了演示sticky效果,给定足够的滚动空间 */
}
</style>
</head>
<body>
<div class="relative-box">相对定位的盒子</div>
<div class="absolute-box">绝对定位的盒子</div>
<div class="fixed-box">固定定位的导航栏</div>
<div class="sticky-box">粘性定位的盒子</div>
<div style="height: 2000px;"> <!-- 为了使页面有足够的滚动空间 -->
<p>向下滚动页面,观察粘性定位的盒子行为。</p>
</div>
</body>
</html>
在这个练习中,你将看到:
- 相对定位的
div
向下和向右移动了20px。 - 绝对定位的
div
被放置在页面的右下角。 - 固定定位的导航栏始终显示在页面的顶部。
- 当你滚动页面时,粘性定位的
div
在顶部粘性位置和其原始位置之间切换。
通过这些练习,你可以更好地理解CSS中浮动和定位的工作原理及其影响。