CSS布局模型
Posted 成功人土
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局模型相关的知识，希望对你有一定的参考价值。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 html 网页元素都是根据流动模型来分布网页内容的。
流动布局（网页默认方式）模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
float为左对齐，右对齐，（注意要想让两个div框一行显示，要保证浮动距离小于容器的宽度，容器的宽度随时变化的，否则放不下的移到下一行）
层模型有三种形式：（层模型显示更精确的位置）
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>absolute样式</title> 6 <style type="text/css"> 7 div{ 8 width:200px; 9 height:200px; 10 border:2px red solid; 11 position:absolute; 12 right:100px; 13 top:20px; 14 15 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"></div> 21 </body> 22 </html>
以上是关于CSS布局模型的主要内容，如果未能解决你的问题，请参考以下文章