CSS中的几种布局模型

来源：互联网发布：qq三国单刀赴会第一js 编辑：程序博客网时间：2024/06/05 20:13

1、流动模型（Flow）

流动模型是默认的网页布局模式。即：网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特性：

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

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型（float）

由于块状元素都是独占一行，那么如果想让两个块状元素并列显示，则可通过元素浮动来实现（float:left;）

如：

div{    width:200px;    height:200px;    border:2px red solid;    float:left;}<div id="div1"></div><div id="div2"></div>

3、层模型

现HTML元素的在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层都能够精确定位操作

层模型的三种形式：

绝对定位（position:absolute）、相对定位（position:relative）、固定定位（position:fixed）

a、绝对定位：

作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

<style type="text/css">div{    width:200px;    height:200px;border:2px red solid;position:absolute;    right:100px;    top:20px; }</style>

b、相对定位：

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来 )，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

<style type="text/css">#div1{    width:200px;    height:200px;border:2px red solid;position:relative;    left:100px;    top:50px;}</style></head><body><div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></body>

效果：

c、固定定位

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

<style type="text/css">#div1{    width:200px;    height:200px;border:2px red solid;position:fixed;    bottom:0;    right:0; }</style>

d、绝对定位与相对定位的组合使用

<style type="text/css">div{border:2px red solid;}#box1{    width:200px;    height:200px;    position:relative;        }#box2{ position:absolute;bottom:20px;left:15px;        }</style></head><body><div id="box1"><div id="box2">相对参照元素进行定位</div></div></body>

效果：

0 0