CSS布局模型

2024年6月3日 230次阅读 来源: ybdesire 
在网页中，元素有三种布局模型：
1、流动模型（Flow）
default，就是块级元素都自上而下的分布，宽度都为100%。内联元素都从左到右水平分布。

2、浮动模型 (Float)
div、p、table、img 等元素都可以设置为浮动。两个 div 显示在一行的代码如下：
div{
    width:200px;
    height:400px;
    border:2px red solid;
    float:left;
}

3、层模型（Layer）
层模型有三种形式：
(1)绝对定位(position: absolute)
div{
    width:200px;
    height:400px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

(2)相对定位(position: relative)

(3)固定定位(position: fixed)

层模型中，各元素可能出现堆叠。堆叠顺序可以用z-index控制，z-index大者在上。z-index相同时，根据CSS声明顺序，靠后者在上。

[1] http://www.5idev.com/p-css_z_index.shtml

    原文作者：ybdesire
    原文地址: https://blog.csdn.net/ybdesire/article/details/49338569
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞