Web前端认识day-07

最新推荐文章于 2023-10-27 23:56:06 发布

太平盛世一俗人

最新推荐文章于 2023-10-27 23:56:06 发布

阅读量118

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46516571/article/details/108286259

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

布局
文档流
所谓文档流就是按照元素的顺序从左到右、由上而下的方式排列。

定位
默认的文档流很多时候不能满足我们的布局要求，需要更丰富的布局手段，这就需要用到定位了。定位方式有：static、fixed、relative、absolute。
Static静态定位（默认）
无定位，元素正常出现在文档流中
不受left，right，top，bottom的影响

Relative相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            position: relative;
            left: 50px;
            top: 20px;
            background-color: red;
        }
        .div3{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

在这里插入图片描述
Absolute绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px black solid;
        position: relative;
    }
    #div21{
        background-color: green;
    }
    #div22{
        background-color: yellow;
        position: absolute;
        top:20px;
        left:30px;
    }
    #div23{
        background-color: red;
    }


</style>
<body>
<div id="div1"></div>
<div id="div2">
    <div id="div21"></div>
    <div id="div22"></div>
    <div id="div23"></div>
</div>
</body>
</html>

在这里插入图片描述
z-index
重新定位之后可能会出现重叠，通过z-index可以调整其顺序。z-index默认值为auto，即与父元素相同，可以设置为数值，数值大的层位于相对小的上方。

定位总结
（1）标准文档流按照从左到右、自上而下的方式依次排列元素。若要改变默认布局方式则需使用relative、absolute、fixed等定位方式；
（2）relative是相对于其原有位置进行偏移；
（3）absolute是相对于其父容器进行偏移，注意其父容器必须是有定位的，即非默认（static）定位方式，否则会一直往上追溯，直到页面；
（4）fixed是相对于整个页面进行偏移。
（5）relative不会从标准流脱离，而absolute和fixed都从标准流中脱离出来

浮动
通过设定浮动（float），可以使得元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#div1,#div5{		
			width: 500px;
			height: 100px;
			background-color: skyblue;
		}
		#div2,#div4{
            width: 100px;
			height: 300px;
			background-color: silver;
			float: left;
        }
		#div3{            
			width: 300px;
			height: 300px;
			background-color: greenyellow;
			float: left;
        }
	</style>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
		<div id="div5"></div>
	</body>
</html>

在这里插入图片描述
从结果中可以看出，div5不见了，实际上div是被浮动的div2、div3、div4给覆盖了，可以通过调试工具查看到。
如何让div5能够正常显示呢？
需要清除浮动，在div4后增加一个div，并设置其样式为清除浮动