CSS样式(四)- CSS定位

本文详细介绍了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>

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

 

盒子不给高度用浮动效果这样,显然不行,而网页中的布局经常有不给高度的情况,不定高可以随着内容延伸,所以需要处理完之后清除浮动,有两种方法,一种直接加<div style="clear:both;"></div>这个要单独给个盒子,但是要和内容同级嵌套

第二种做成通用样式

.clear{clear:both;}

<div class="clear"></div>

第二种更加常用,用到清除浮动的地方会很多,而一个一个的写显然浪费时间,同时也降低效率

加了清除浮动之后效果:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Moresweet猫甜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值