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

凉凉心.

发布于 2025-10-13 17:57:26

1410

文章被收录于专栏：CSDN专栏CSDN专栏

背景

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>

.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

<body>
    <div class="divone"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
</body>

div {
	width:300px;
	height:200px;

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

示例2

body

<!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>

.*{
	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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float应用-----菜单栏(一级菜单)</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
	<div class="nav">
    	<ul>
        	<li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">ACCOMMODATION</a></li>
            <li><a href="#">FACILITIES</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</body>
</html>

@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。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>clear_float  清除浮动</title>
<style type="text/css">
div {
	width:300px;
	height:200px;

}
.divone{
	float:left;
	background:#900;
}
.divtwo{
	float:right;
	background:#BD19D3;
}
.divthree{
	clear:left;
	background:#6D7DDC;
}
</style>
</head>

<body>
    <div class="divone"></div>
    <div class="divtwo"></div>
    <div class="divthree"></div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-14，如有侵权请联系 cloudcommunity@tencent.com 删除

css