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

2025-10-09 268

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

可观测可视化 Grafana 版，10个用户账号 1个月

服务治理 MSE Sentinel/OpenSergo，Agent数量不受限

函数计算FC，每月15万CU 3个月

简介： 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属性。

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

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

position属性控制页面上元素间的位置关系，也就是排版。
怎么用？要知道怎么用就要先了解position的属性值。
属性值：
- 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】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用

背景

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

示例

divfive {

示例3

position定位（核心）

示例1

示例2

示例3

示例4

示例5

#

清除浮动

🤩CSS教学往期回顾

💕👉博客专栏

云原生

热门文章

最新文章

相关课程

相关电子书