首页 / 知识

CSS布局之布局模型

2023-04-11 15:09:00

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

　　1、流动模型（Flow）默认的

　　2、浮动模型(Float)

　　3、层模型（Layer）

　　1、流动模型（Flow）

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

　　流动布局模型具有2个比较典型的特征：

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

　　（每一个便签都显示着自己本来默认的那个宽高）

　　第二点，在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

　　2、浮动模型(Float)

　　任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动

　　div{float:left;}div{float:right;}

　　可以为不同的div设置不同的浮动方式来布局。

　　3、层模型（Layer）

　　层模型有三种形式：

　　1、相对定位(position:relative)

　　2、绝对定位(position:absolute)

　　3、固定定位(position:fixed)

　　相对定位

　　如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。

　　相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

　　绝对定位

　　如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块（就是它前面的div并没有设置定位的属性），则相对于body元素，即相对于浏览器窗口。

　　被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除；

　　我们可以通过z-index来设置它们的堆叠顺序。

　　绝对定位使元素脱离文档流，因此不占据空间，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

　　浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

　　固定定位

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

　　#div1{

　　position:fixed;

　　bottom:0;

　　right:0

　　}(始终在屏幕由下端有一个div框，会一直跟着滚动条走)

　　相对定位可以和绝对定位混着使用原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位