CSSDay03

最新推荐文章于 2024-05-22 07:58:56 发布

肖帆咪

最新推荐文章于 2024-05-22 07:58:56 发布

阅读量178

点赞数 4

分类专栏： CSS 文章标签： html 定位 css

本文链接：https://blog.csdn.net/XiaoFanMi/article/details/109342314

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文档流

文档中标签在排列时所占的位置，在每行中按从左至右的顺序排放标签，即为文档流。

改变排放顺序的两种办法

1·浮动float

2·css定位

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            /*
            	float:none,left,right
            */
            /*
            	浮动带来的问题:浮动后的标签没有撑开标签
            	会影响后面的网页布局
           		俗称:高度塌陷
            	解决方法:
            	1.给父标签设置具体的高度
          		2.清除浮动,会默认将父标签撑开与浮动标签相应的高度
           		在浮动标签后新建一个空白的标签,清除以上左浮动标签
            	style="clear: left;"
            */
            .nvg_Dao{
				background-color: #8A2BE2;
				float: left;
				width: 90px;
				padding: 20px;
			}
            #nvg{
				width: 1000px;
				margin: 0px auto;
			}	
		</style>
	</head>
	<body>
		<div id="nvg">
			<div class="nvg_Dao">导航1</div>
			<div class="nvg_Dao">导航2</div>
			<div class="nvg_Dao">导航3</div>
			<div class="nvg_Dao">导航4</div>
			<div class="nvg_Dao">导航5</div>
			<div class="nvg_Dao">导航6</div>
			<div class="nvg_Dao">导航7</div>
			<div style="clear: left;"></div>
		</div>
	</body>
</html>

定位

1.相对定位

position:relative激活相对定位

left right top bottom 设置标签的偏移量

特点:

没有设置位移量,标签没有任何变化

相对定位是相对于自己原来的位置进行定位

开启相对定位会使标签提升一个层次,但不会改变标签的性质

没有脱离文档流,位置还占用

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#circle1{
				 background-color: #00FFFF;
				 width: 300px;
				 height: 300px;
                /*
                开启相对定位,距原来的位置顶部50px,距左边50px
                */
				 position: relative;
				 top:50px;
				 left: 50px;
			}
			#circle2{
				background-color: #FF0000;
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		
		<div id="circle1">
			方块1
		</div>
		<div id="circle2">
			方块2
		</div>
	</body>

2.绝对定位

position:absolute开启绝对定位

left right top bottom四个属性来设置标签的偏移量

特点:

1.不占空间

2.会脱离文档流,浮动起来,可能会与其他标签重叠

3.绝对定位是以离他最近的祖先标签进行定位(开启子标签的绝对定位都会开启父标签的相对定位)

4.如果所有祖先标签都没有开启定位,那么它会以浏览器窗口进行定位

5.绝对定位会改变标签的性质,行级标签会变成块级标签

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		/*
			默认情况下,在两个标签都开启绝对定位后
			写在后面的标签会在前面标签的上层
			z-index;number
			定义标签的层数,数值越高,标签会在最上层
		*/
		#circle1{
			width: 300px;
			height: 300px;
			background-color: #00FFFF;
			position: absolute;
			z-index: 2;
		}
		#circle2{
			width: 300px;
			height: 300px;
			background-color: #FF8C00;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="circle1">
		方块1
	</div>
	<div id="circle2">
		方块2
	</div>
</body>

固定定位

position:fixed

left right top bottom四个属性来设置标签的偏移量

使标签悬浮起来,固定不动

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.Page{
			width: 1500px;
			height: 3000px;
			background-color: aqua;
		}
		.Page2{
			width: 1000px;
			height: 200px;
			background-color: #FF0000;
			text-align: center;font-size: 30px;
		}
	</style>
</head>
<body>
   		 <!-- 超链接跳转到指定的锚点  -->
		<a name="top"></a>
		<div style="position: fixed; top: 0px; height: 50px;" class="Page2">
			网页导航
		</div>
		<div class="Page">网页</div>
		<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a> 
</body>

总结

float:none,left,right	浮动
style="clear: left;" 清除浮动
position:relative 开启相对定位
position:absolute 开启绝对定位
position:fixed  固定定位
z-index:number 定义标签的层数,数值越高,标签会在最上层

肖帆咪

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSSDay03

文档流文档中标签在排列时所占的位置，在每行中按从左至右的顺序排放标签，即为文档流。改变排放顺序的两种办法1·浮动float2·css定位浮动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* float:none
复制链接

扫一扫