HTML学习笔记（5）——CSS浮动，相对定位与绝对定位

最新推荐文章于 2023-06-04 14:37:47 发布

EaVanCN

最新推荐文章于 2023-06-04 14:37:47 发布

阅读量637

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u011200062/article/details/47375039

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、浮动

div是块级元素，独占一行。

浮动可以理解为将一个块级元素脱离标准流，漂浮在标准流之上。

浮动的设置方法：

Float:left/right;

不想标准流之中的元素受影响，可以设置：

Clear:both;不允许有浮动对象。

Left;不允许有左浮动对象。

Right;不允许有右浮动对象。

如果多个元素设置浮动，被设置浮动的元素会组成一个流，并且会横着排队，知道父元素的宽度不够才会换一行排列。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>浮动</title>
<style type="text/css">
#div1{
	width:200px;
	height:100px;
	background:#99cc33;
	float:left}
#div2{
	width:150px;
	height:150px;
	background:#cc33cc;
	float:left;}
#div3{
	width:200px;
	height:100px;
	background:#33ffff;
	float:left;}
#div4{
	width:350px;
	height:60px;
	background:#999966;
	clear:both;
	}
</style>
 </head>
 <body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
 </body>
</html>

二、相对定位与绝对定位

相对定位：

position：relative;

再设置left，right，top，bottom的值，就是它相对于原来位置进行偏移。

绝对定位：

Position :absolute;

再设置left，right，top，bottom的值，就是它相对于body位置进行偏移。为元素设置了绝对偏移之后，元素就脱离了原来的队伍。

固定定位：

Position : fixed;

再设置left，right，top，bottom的值，设置了绝对定位之后，不会随着滚动条移动。

可以通过z-index的值来设置已经经过定位的元素的层级，数值越大所在的层越靠上。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>相对定位于绝对定位</title>
<style type="text/css">
body{
height:2000px;}
#div1{
	width:200px;
	height:100px;
	background:#99cc33;}
#div2{
	width:150px;
	height:150px;
	background:#cc33cc;
	position:relative;
	left:30px;
	top:120px;}
#div3{
	width:200px;
	height:100px;
	background:#33ffff;
	position:absolute;
	left:30px;
	top:500px;}
#div4{
	width:350px;
	height:60px;
	background:#999966;
	position:fixed;
	//top:180px;
	clear:all}
</style>
 </head>
 <body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
 </body>
</html>

EaVanCN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（5）——CSS浮动，相对定位与绝对定位

一、浮动 div是块级元素，独占一行。浮动可以理解为将一个块级元素脱离标准流，漂浮在标准流之上。浮动的设置方法： Float:left/right; 不想标准流之中的元素受影响，可以设置： Clear:both;不允许有浮动对象。
复制链接

扫一扫