CSS样式（四）- CSS定位

最新推荐文章于 2025-03-27 10:32:18 发布

Moresweet猫甜

最新推荐文章于 2025-03-27 10:32:18 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_38853759/article/details/82769461

本文详细介绍了CSS定位中的相对定位、绝对定位以及浮动的概念和使用方法，并提供了清除浮动的两种常见实现方式。

CSS样式 - CSS定位

css定位(Positioning)属性
允许定义元素框相对于其正常位置应该改出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
<1>块级元素：div、h1或p标签即：显示为一块内容称之为 “块框“
<2>行内元素： span,strong,a等元素即：内容显示在行中称 "行内框"
<3>使用display属性改变成框的类型
即：display:block;让行内元素设置为会计元素
display:block 升级为块级元素，和块级元素的属性一样
display:inline-block 显示为内联元素，元素前后没有换行符

1.相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。

通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动

.adv_relative {

position: relative;

left: 30px;

top: 20px;

}

2.绝对定位

元素的位置相对于最近的已定位祖先元素，如果元素没有已定位

的祖先元素，它的位置相对于最初的包含块。

.adv_absolute {

position: absolute;

left: 30px;

top: 20px;

}

3.float浮动

float 属性定义元素在哪个方向浮动，在 CSS 中，任何元素都可以浮动

float属性定义了向哪浮动

4.清除浮动

<div style="clear: both;"></div>
div不加高度使用了浮动，边框就会不能将盒子包围起来
所以就会用到清除浮动

比如：

<!doctype html> 
<html>
	<head>
		<!--声明当前页面的编码集：中文编码（GBK/GB2312）,国际编码（utf-8）-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<!--声明当前页面的三要素-->
		<title>简易网页变色小按钮</title>  
		<meta name="Keywords" content="关键词,关键词,关键词">
		<meta name="description" content="">  
		
		<!--css/js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#666;}
			.di{width:400px;border:10px solid red;}
			.di .a{width:200px;height:400px;background-color:#ff6;float:left;}
			.di .b{width:200px;height:400px;background-color:#0f6;float:left;}
		</style>
		
	</head>
<body>
	<h1>清除浮动</h1>
	<div class="di">
		<div class="a"></div>
		<div class="b"></div>
	</div>
</body>
</html>

如果这样不加清除浮动的话，效果是这样的