html页面布局模型,css布局模型有哪些？

css布局模型有哪些？下面本篇文章给大家介绍一下css的布局模型。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css三种基本网页布局模型：流动模型(flow)：元素没有转换类型，没有设置float的默认显示状态

浮动模型(float)：通过给元素设置float进行页面布局

层模型：语法：position:static|absolute | relative |fixed

流动模型(默认状态下的模型)

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

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

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

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

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

浮动模型

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动div{float:left;}

div{float:right;}

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

层模型

让元素在网页中精确定位，像Photoshop中的图层一样对每个图层精确定位，定义position 属性

层模型三种形式：

1、 绝对定位(position：absolute)

2、相对定位(position：relative)

3、固定定位(position：fixed)

绝对定位：position：absolute ---将元素从文档流中拖出，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在包含块，则相对于body元素，也就是浏览器窗口绝对定位

相对定位：position：relative --- 通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，相对于以前的位置偏离，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

固定定位：position：fixed ,不会随浏览器滚动条滚动而滚动，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

relative和absolute组合使用实现相对于其它元素进行定位

参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative;定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

实现box2相对于父元素box1定位：

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

更多web前端知识，请查阅 HTML中文网 ！！