Css学习--三种布局模型（流动模型、浮动模型、层模型)

最新推荐文章于 2024-05-30 08:41:06 发布

我自是年少韶华倾负

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_38345598/article/details/79184950

版权

希望读者在阅读者这篇文章之前了解一下关于盒模型的相关知识

一、流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示.

样例代码

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>流动模式下的块状元素</title>
		<style type="text/css">
			#box1{    width:300px;    height:100px;}div,h1,p{    border:1px solid red;}
		</style>
	</head>
	<body>   
		<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->     
		<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->     
		<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->      
		<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
	</body>
</html>

结果显示：

二、浮动模型

浮动模型就是为了让两个块状元素可以在一行显示，可以将其设为浮动float:left 左浮 float:right 右浮

样例代码：

<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
float: left;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>

结果显示:

三、层模型

层模型就是相当于把网页分层，每一个图层有着自己的元素设计。然后层叠在一起，形成特殊的效果。

层模型有三种形式：绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)
1、绝对定位(position: absolute)

就是把元素相对于网页定位位置,一般来说的话如果你可以把所需的元素定位在网页的任何地方。如果想改变某一元素的位置就可以通过改变元素的right或者left或者top或者buttom的值。

样例代码:

</html>
<style type="text/css">
	div
	{
				    width:200px;
					height:200px;
					border:2px red solid;
					position:absolute;
					right:100px;
					top:50px;
					}
</style>
</head>
<body>
<div>div1</div>
</body>

结果实现:

2、相对定位(position: relative)

相对定位顾名思义就是相对以前的位置变动。它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

样例实现:

<html>
	<head>
	<meta http-equiv="content-type"content="text/html;charset=UTF-8">
<style type="text/css">
	#div1{
				width:200px;
				height:200px;
				border:2px red solid;
				position:relative;
				left:100px;
				top:50px;
			}
</style>
</head>
<body>	
<div id="div1">现在</div>
</body>
</html>

结果演示:

3、固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

样例实现:

<html>
	<head>
	<meta http-equiv="content-type"content="text/html;charset=UTF-8">
<style type="text/css">
	#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}


</style>
</head>
<body>	
<div id="div1">现在</div>
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
</body>
</html>

结果演示:

绝对定位与固定定位的区别

绝对定位就是定位在初始的窗口的位置，但是如果窗口下滑，绝对定位还是会保存在原来的位置，不会移动。
固定定位固定于屏幕内的网页窗口

我自是年少韶华倾负

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Css学习--三种布局模型（流动模型、浮动模型、层模型)

希望读者在阅读者这篇文章之前了解一下关于盒模型的相关知识一、流动模型流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧
复制链接

扫一扫