首页 > 代码库 > css 布局模型
css 布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
1.流动模型（flow）
默认的网页布局模式。
流动布局有两个典型的特征
1.块状元素都会在所处的包含元素内自上二下按顺序垂直延伸分布，默认情况下，块状元素的宽度都是100%。
实际上块状元素都会以行的形式占据位置。
2.流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示（内联元素可不会像快状元素霸道独占一行）
2.浮动模型（float）
实现让两个块装元素并排显示
float：left；
3.层模型（layer）在网页局部使用层模型有优势
1.绝对定位（position：absolute）
2.相对定位（position：relative）
3.固定定位（position：fixed）
1.绝对定位（position：absolute）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
position:absolute; left:100px;//靠左100px top:50px;//靠上50px
2相对定位（position:relative）
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
3.层模型 固定定位（fixed）
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
例子：打开网页右下角的惹人恨的小广告
基于absolute与relative的例子
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 div{ 8 border:2px solid red; 9 } 10 #box1{ 11 width:200px; 12 height:200px; 13 /*定位子元素 */ 14 position:relative; 15 } 16 #box2{ 17 /*使用top,left进行偏移定位(参照对象是任意位置)*/ 18 position:absolute; 19 top:50px; 20 left:30px; 21 } 22 23 </style> 24 </head> 25 26 <body> 27 <div id="box1"> 28 <div id="box2">相对参照元素定位</div> 29 </div> 30 </body> 31 </html>
css 布局模型