CSS中的几种布局模型

最新推荐文章于 2024-10-01 15:25:46 发布

原创最新推荐文章于 2024-10-01 15:25:46 发布 · 595 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css

HTML与CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了网页布局中的三种关键模型：流动模型、浮动模型及层模型，并详细解释了每种模型的特点及其应用场景，包括绝对定位、相对定位和固定定位的具体用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、流动模型（Flow）

流动模型是默认的网页布局模式。即：网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特性：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置啊；

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

2、浮动模型（float）

由于块状元素都是独占一行，那么如果想让两个块状元素并列显示，则可通过元素浮动来实现（float:left;）

如：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

3、层模型

现HTML元素的在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层都能够精确定位操作

层模型的三种形式：

绝对定位（position:absolute）、相对定位（position:relative）、固定定位（position:fixed）

a、绝对定位：

作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

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

b、相对定位：

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来 )，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

<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><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

效果：

c、固定定位

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与bac kground-attachment:fixed;属性功能相同。

<style type="text/css">
#div1{
    width:200px;
    height:200px;
	border:2px red solid;
	position:fixed;
    bottom:0;
    right:0; 
}
</style>

d、绝对定位与相对定位的组合使用

<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
 	position:absolute;
	bottom:20px;
	left:15px;        
}
</style>
</head>
<body>
<div id="box1">
	<div id="box2">相对参照元素进行定位</div>
</div>
</body>

效果：