AI 助理
备案控制台
开发者社区 云原生 文章 正文

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用

2025-10-09 214
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月
函数计算FC，每月15万CU 3个月
服务治理 MSE Sentinel/OpenSergo，Agent数量 不受限
简介： position定位（核心）我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。三大属性：position属性，display属性，float属性。position 属性控制页面上元素间的位置关系。display 属性控制页面元素是否显示或者是堆叠还是并排显示。float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。position属性是干嘛用的？怎么用？有哪些属性值？position属性控制页面上元素间的位置关系，也就是排版。怎么用？要知道怎么用

背景

background-color:背景颜色。

background-image:用于设置背景图片。

注意：如果同时设置背景颜色(background-color)
和背景图片(background-image)，背景颜色会被背景图片覆盖。该属性

需要使用url()函数指定图片地址，图片的地址既可以是相对的，也可以是绝对的。

background-repeat:用于设置对象的背景图片是否平铺(重复显示)。
在指定该属性之前，必须先指定背景图片(background-image)
该属性有4个值。

  • repeat(纵横同时重复)
  • no-repeat(不重复)
  • repeat-x(x轴方向重复)
  • repeat-y(y轴方向重复)

background-position:用于控制背景图片的位置。
background-position有5个关键字值分别是：

  • top,left,bottom,right,center。

可以通过任意两个关键字组合来定位。
也可以通过百分比来定位。

  • 例如：background-position: 50% 50%.
    第一个百分比对应横坐标，第二个百分比对应纵坐标。

background-attachment:设置背景图片是随对象内容滚动还是固定。

  • 在指定该属性之前，必须先指定背景图片。

该属性的两个值：

  • scroll(默认)
  • fixed(固定)

background:这是一个复合属性，可以同时设置背景颜色、背景图片、背景重复、背景位置等。

CSS3还可以给元素背景添加多个背景图片。

示例

  • body
    <body>
  <div class="divcolor"></div>
  <div class="divone"></div>
  <div class="divtwo"></div>
  <div class="divone"></div>
  <div id="divfive"></div>
</body>
    ```css
    .divcolor{
    width:800px;
    height:30px;
    background-color:#900;
    margin:0px auto;
    }
    .divone {
    width: 800px;
    height: 400px;
    border: 3px solid #900;
    margin:20px auto;
    background-image:url(image/flower.gif), 
          url(image/haha.png), url(image/backgroundimage.jpg);
    background-repeat:repeat-y, repeat-x, repeat;
    background-position:center top, left center, left top;

}
.divtwo {
width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background-image:url(image/backgroundimage.jpg);
background-attachment:fixed;
}

divfive { 

width: 800px;
height: 400px;
border: 3px solid #900;
margin:20px auto;
background:#900 url(image/flower.gif) repeat-x center;

}

# 浮动和定位
## 浮动
**在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。**
浮动(float)的三个属性值：
- `left(左浮动)`
- `right(右浮动)`
- `none`

浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，
原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。

> **如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。**

- 浮动(float)的三个属性值：left(左浮动),right(右浮动),none.
- clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both
---
### 示例1
- body
```html
<body>
    <div class="divone"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
</body>
  • css
    ````css
    div {
    width:300px;
    height:200px;

}
.divone{
float:left;
background:#900;
}
.divtwo{
float:left;
background:#BD19D3;
}
.divthree{
float:left;
background:#6D7DDC;
}

### 示例2
- body
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float 应用----多栏布局</title>
</head>

<body>
    <div class="header"></div>
    <div class="content">
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
  • css
    .*{
     
  margin:0;
  padding:0;
}
.header{
     
  width:900px;
  height:80px;
  margin:0 auto;
  background:#DF999B;
}
.content{
     
  width:900px;
  height:300px;
  margin:0 auto;
  background:#E42DE9;
}
.footer{
     
  width:900px;
  height:80px;
  margin:0 auto;
  background:#DF999B;
  }
.content-one{
     
  width:300px;
  height:300px;
  background-color:#5936EB;
  float:left;
}
.content-two{
     
  width:300px;
  height:300px;
  background-color:#0FE8E5;
  float:left;
}
.content-three{
     
  width:300px;
  height:300px;
  background-color:#15E720;
  float:left;
}

    示例3

  • html
    ```html
    <!doctype html>









- css
```css
@charset "utf-8";
/* CSS Document */
/*取消所有标签默认的内外边距*/
*{
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
    color:#000;
    font-size:20px;
    display:block;
}
.nav{
    width:800px;
    height:40px;
    background:#eee ;
    margin:10px auto;
}
ul li{
    list-style:none;
    line-height:40px;
    float:left;
}
ul li a{
    padding:0 10px;
}
ul li:hover a{
    background:#900;
    color:#fff;
}

position定位（核心）

我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。
三大属性：position属性，display属性，float属性。

  1. position 属性控制页面上元素间的位置关系。
  2. display 属性控制页面元素是否显示或者是堆叠还是并排显示。
  3. float 属性提供控制方法。
    • 通过float这种控制方法，可以实现多栏布局，导航菜单等等。

position属性是干嘛用的？怎么用？有哪些属性值？

  1. position属性控制页面上元素间的位置关系，也就是排版。
  2. 怎么用？要知道怎么用就要先了解position的属性值。
  3. 属性值：
    • static（默认状态）：页面元素默认的定位。
    • relative（相对定位）

      relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）

    • absolute（绝对定位）

      absolute绝对定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）。

    • fixed（固定定位）

      fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

想一想，我们的absolute绝对定位，它的定位点在哪里？
定位点：浏览器的左上角。能不能改变它的定位点？
答案是肯定的。

用relative和absolute配合使用就能改变我们的定位点。

示例1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<style>
a{
    
    background:url(image/top_bg.png);
    width:40px;
    height:80px;
    display:block;
    position:fixed;
    top:540px;
    left:1310px;
}
</style>
</head>

<body>
    <div class="one">
        <img src="image/天猫tmall.com.png"/>
    </div>
    <a href="#"></a>
</body>
</html>

示例2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>    position---fixed固定定位</title>
<style>
* {
    
    margin: 0px;
    padding: 0px;
}
div {
    
    width: 800px;
    height: 200px;
    margin: 10px auto;
}
#two{
    
    position:fixed;
    top:100px;
    left:30px;
}
</style>
</head>

<body>
    <div style="background:#900;">红色div</div>
    <div id="two" style="background:#F90;">橙色</div>
    <div style="background:#FF0;">黄色div</div>
    <div style="background:#0F0;">绿色div</div>
    <div style="background:#00C;">蓝色div</div>
    <div style="background:#90F;">紫色div</div>
</body>
</html>

示例3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position--absolute 绝对定位</title>
<style>
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    margin:100px;
    background:#900;
}
.two{
    
    width:200px;
    height:200px;
    background:#000;
    position: absolute;
    top: 0px;
    left: 100px;
    /*position:absolute;
    top:0px;
    left:0px;*/
}
/*.three{
    width:800px;
    height:300px;
    margin-left:200px;
    background:#E721D3;
    position:relative;
}
.four{
    width:200px;
    height:200px;
    background:#E9F42D;
    position:absolute;
    top:20px;
    left:20px;
}
.five{
    width:800px;
    height:300px;
    margin-left:200px;
    background: #17D763;
}*/
</style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
   <!-- <div class="three">
        <div class="four"></div>
    </div>
    <div class="five"></div>-->
</body>
</html>

示例4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position---relative相对定位</title>
<style type="text/css">
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    background:#900;
    position:relative;/*设置相对定位*/
    top:20px;/*向下偏移20px*/
    left:20px;/*向左偏移20px*/
}
</style>
</head>

<body>
    <div class="one"></div>
</body>
</html>

示例5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>position 定位</title>
<style type="text/css">
*{
    
    margin:0;
    padding:0;
}
.one{
    
    width:300px;
    height:300px;
    background:#900;
    position:relative;
    top:20px;
    left:20px;
}
.two{
    
    width:400px;
    height:200px;
    background:#000;
    position:absolute;
    top:200px;
    left:100px;
}
</style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div></div>
</body>
</html>

#

清除浮动

clear清除浮动
float浮动这种控制方法，可以实现多栏布局，导航栏等功能。

但是float不是万能的，她也有她的副作用。
副作用是什么？被设置了float的元素后面的元素，会在空间允许的情况下，向上提升到浮动元素平起平坐的位置。

如果我并不想紧跟在我后面的元素浮动，也就是让它自己停留在原来的位置上，不跟着浮动，那么我们就对该元素设置clear（清除浮动）属性。

  • clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both。
    ```html
    <!doctype html>










```

🤩CSS教学往期回顾

  1. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
  2. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  3. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
  4. 【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距

    💕👉博客专栏

文章标签：
前端开发
Java
容器
Docker
算法
关键词：
前端清除浮动
CSS前端
float分析
float浮动清除浮动
CSS float浮动
凉凉心.
目录
相关文章
凉凉心.
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化， 让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发， 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 在默认样式中声明元素的初始状态样式； 声明过渡元素最终状态样式，比如悬浮状态； 在默认样式中通过添加
凉凉心.
127 1
凉凉心.
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。 transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transitio
凉凉心.
108 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
201 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法，以便于把元素组成成多栏布局。 盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒
凉凉心.
111 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下： 属性名 属性值 animation-name 指定动画名称，该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation：这是一个复合属性。
凉凉心.
84 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制： 当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则： 层叠规则一：找到应用给每个元素和属性的声明。 说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则， 并标识出所有受到影响的HTML元素。
凉凉心.
59 0
划雨悦潭之赋
|
10月前
|
人工智能 前端开发 架构师
2025年前端局势分析，我该不该转行？
2024年，前端领域经历了快速变化，AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码，但AI无法完全取代前端工程师，因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码，还包括需求分析、代码评审等。未来，前端不会“死亡”，而是持续演变。面对大环境的压力，提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年，需适应变化、不断学习并探索更多可能性。
划雨悦潭之赋
1413 16
蓝易云
|
存储 Java
百度搜索：蓝易云【Java语言之float、double内存存储方式】
由于使用IEEE 754标准进行存储，float和double类型可以表示非常大或非常小的浮点数，并且具有一定的精度。然而，由于浮点数的特性，它们在进行精确计算时可能会存在舍入误差。在编写Java程序时，需要注意使
蓝易云
202 0
米果粒
|
存储 C语言
使用 sizeof 操作符计算int, float, double 和 char四种变量字节大小
【10月更文挑战第13天】使用 sizeof 操作符计算int, float, double 和 char四种变量字节大小。
米果粒
469 1
龙腾九州
|
存储 C语言
C 语言实例 - 计算 int, float, double 和 char 字节大小
C 语言实例 - 计算 int, float, double 和 char 字节大小。
龙腾九州
173 1

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    重塑云上的 Java 语言
  • 4
    容器镜像服务 Docker镜像的基本使用
  • 5
    利用Helm简化Kubernetes应用部署
  • 6
    理解Docker容器的进程管理
  • 7
    在阿里云容器服务上开发基于Docker的Spring Cloud微服务应用
  • 8
    Docker社区版中Kubernetes开发
  • 9
    分布式事务中间件 Fescar—RM 模块源码解读
  • 10
    Kafka、RabbitMQ、RocketMQ消息中间件的对比—— 消息发送性能
  • 1
    【赵渝强老师】使用Helm简化Kubernetes（K8s）应用的部署和管理
    30
  • 2
    升级 GoLand 2025.1 = 云原生开发提速 80%！微服务 + 容器化一键适配+安装包
    33
  • 3
    基于uniapp+vue3 setup+pinia2+uni-ui跨多端仿携程app酒店预订系统模板
    35
  • 4
    七、Docker核心技术：深入理解网络模式 (Bridge, Host, None, Container)
    69
  • 5
    六、Docker 核心技术：Dockerfile 指令详解
    50
  • 6
    五、Docker 核心技术：容器数据持久化之数据卷
    66
  • 7
    四、Portainer图形化管理实战与Docker镜像原理
    37
  • 8
    三、Docker常用命令
    47
  • 9
    二、Docker安装部署教程
    51
  • 10
    警惕数字雾霾：伪GEO操作正在为企业埋下AI信任陷阱
    29

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于Web前端的可用性优化
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、