CSS3 布局模型 （十四）

CSS3 布局模型 （十四）

标签（空格分隔）： 前端学习

---

参考CSS布局模型

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

• 流动模型(Flow)默认的
• 浮动模型(Float)
• 层模型(Layer)

流动模型(Flow)
默认的网页布局模式。其有两个特征：

• 块状元素(block)都会在所处包含元素内自而下按顺序垂直分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
• 行内元素(inline)都会在所处的包含元素内从左到右水平分布显示。

浮动模型(Float)
任何元素在默认情况下是不可浮动的，但是可以用CSS定义为浮动。

层模型(Layer)
层模型三种形式：

• 相对定位position: relative
• 绝对定位position: absolute
• 固定定位position: fixed

相对定位
设置position: relative,通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置
相对于以前的位置位移，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他任然占据着它没偏移前的空间。
ps:类似于标准盒子模型中的margin

绝对定位
设置position: absolute，使元素从文档流中脱离，然后使用top,right,bottom,left属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器视口
被设置了绝对定位的元素，在文档流中不占据空间。
可以通过z-index来设置它们的堆叠顺序

因为设置了绝对定位的元素已经脱离了正常的文档布局流，所以普通文档流中元素的布局就当绝对定位的元素不存在一样，任然在文档流中的其他元素将忽略该元素并填补他原先的空间
浮动元素的定位还是基于正常的文档流的，只是将浮动元素从文档流中抽出并尽可能远的移动至左侧或右侧，文字内容会围绕在浮动元素周围，它只是改变了文档流的显示，而没有脱离文档流。

固定定位
设置position: fixed，fixed和absolute类似，但是它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置或者改变浏览器窗口的显示大小。

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

拓展：
z-index：

• 只对定位元素有效，如果元素是没有定位的，那么对其设置z-index是无效的。
• 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。
• 相同z-index时，定位元素覆盖未定位元素，按文档流顺序，后面的覆盖前面的