css 布局模型

最新推荐文章于 2022-11-20 10:58:35 发布

耳翼

最新推荐文章于 2022-11-20 10:58:35 发布

阅读量232

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ann_mi/article/details/85336077

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下是自己总结的部分内容，有问题欢迎大家指出。
css有三种布局模型：
1、流动模型 Flow（是默认的网页布局模式）
2、浮动模型 Float
3、层模型Layer
流动模型：是默认的网页布局，也就是说在默认状态下的html网页元素都是根据流动模型，来分为网页内容的。
特点：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
块状元素：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”（行内元素）。
可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 a元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
浮动模型浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
任何元素在默认情况下是不可以浮动，但可以用css定义为浮动
div{float:left;}　　div{float:right;}
可以为不同的div设置不同的浮动方式布局
w3c对于css浮动的解释可以点击链接仔细查看
层模型有以下3种形式
1、相对定位(position: relative)
2、绝对定位（position:absolute）
3、固定定位（position：fixed）
相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<!DOCTYPE html>
<html>

<body>
<div style="width:100px;height:100px;background-color:#0e0;"></div>
<div style="position:relative;width:100px;height:100px;background-color:#00e;left:50px">
</div>


</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>

<body>
<div style="width:100px;height:100px;background-color:#0e0;"></div>
<div style="position:relative;width:100px;height:100px;background-color:#00e;left:-50px">
</div>


</body>
</html>

在这里插入图片描述
相对定位会按照元素的原始位置对该元素进行移动。

样式 “left:-50px” 从元素的原始左侧位置减去 50 像素。

样式 “left:50px” 向元素的原始左侧位置增加 50 像素。
绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

<!DOCTYPE html>
<html>

<body>
<div style="width:100px;height:100px;background-color:#0e0;"></div>
<div style="position:absolute;width:100px;height:100px;background-color:#00e;left:100px;top:150px">
</div>


</body>
</html>

在这里插入图片描述
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
固定定位
这个好解释效果, 平常看网站那些小广告, 右下角啥的, 你划着屏幕, 他就在那里, 不上不下, 这个效果就是固定定位, 它的定位并不是跟着布局走的, 而是跟着相对浏览器走的.它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

耳翼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 布局模型

以下是自己总结的部分内容，有问题欢迎大家指出。css有三种布局模型：1、流动模型 Flow（是默认的网页布局模式）2、浮动模型 Float3、层模型Layer流动模型：是默认的网页布局，也就是说在默认状态下的html网页元素都是根据流动模型，来分为网页内容的。特点：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，...
复制链接

扫一扫