css布局模式

最新推荐文章于 2024-05-14 18:25:49 发布

mike_1998

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量183

点赞数

文章标签：前端 css 布局模型

本文链接：https://blog.csdn.net/qq_41621267/article/details/84476727

版权

css布局模式

在网页中，元素有三种布局模型

流动模型（Flow）
浮动模型（Float）
层模型（Layer）

1. 流动模型（Flow）

流动模型是网页默认的布局模式。它有两个特征

块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布。
内联元素都会在所处的包含元素内从左到右水平分布显示。
##浮动模型（Float）

float:left;

可以将元素定义为浮动。浮动可以让两个块状元素并排一行。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
	border:2px red solid;
    width:200px;
    height:400px;
    float:left;
	
}

</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

结果为
在这里插入图片描述
可以看到，两个块级元素（div）并排到一行了。

层模型（重点）

什么是层模型，你可以想象一下图像处理软件ps，它有各种图层，而每个图层又能精确定位。
如何对每个图层精确定位操作，CSS定义了一组positioning属性来支持布局模式
层模式有三种形式

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

1.层模型-绝对定位

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

2. 层模型-相对定位

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

层模型-固定定位

为元素设置固定定位-“positon-fixed”
固定定位和绝对定位有些类似，但是固定定位相对的位移的坐标是视图（屏幕内的网页窗口）。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。
一些参考资料来自慕课： https://www.imooc.com/code/2071