从0开始学前端第十三课：浮动与定位

mls学习小记

已于 2024-01-24 17:06:54 修改

阅读量423

点赞数 11

分类专栏：从0开始学前端文章标签：前端

于 2024-01-24 15:38:40 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135823900

版权

从0开始学前端专栏收录该内容

81 篇文章 2 订阅

订阅专栏

第十三课：浮动与定位

学习目标

理解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中浮动和定位的工作原理及其影响。

章节目录
 第十四课：布局与定位（二）

mls学习小记

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
从0开始学前端第十三课：浮动与定位

浮动是一种CSS布局技术，允许元素脱离文档流，并可以向左或向右移动，直到它的外边缘紧靠包含块或另一个浮动元素。定位的元素可以脱离文档流，并可以放置在页面上的任意位置。定位是一个复杂的概念，因为它涉及到多种类型的定位方式。在浏览器中显示四种不同颜色和不同定位方式的盒子。粘性定位的盒子在滚动到页面顶部时固定。在浏览器中显示三个灰色的正方形盒子，它们将从左至右排列，每个盒子之间有一定间距。通过这些练习，你可以更好地理解CSS中浮动和定位的工作原理及其影响。接下来是一个包含各种定位示例的HTML页面。
复制链接

扫一扫