CSS层模型的形式有哪些

CSS层模型的形式有哪些

本文小编为大家详细介绍“CSS层模型的形式有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS层模型的形式有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

　　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的位置去再定位

读到这里，这篇“CSS层模型的形式有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道。