布局模型

布局模型
CSS包含3种基本的布局模型，分别为：Flow、Layer 和 Float
1、流动模型（Flow）-->网页默认的布局模式
2、浮动模型 (Float) -->人为的让多个块级元素在一行显示
3、层模型（Layer） -->可以让不同的块级元素层叠显示

网页布局是制作静态页面的基础，只有把结构搭建完美，才能继续后续的样式美化和动态效果。

 

CSS包含3种基本的布局模型，分别为：Flow、Layer 和 Float
1、流动模型（Flow）-->网页默认的布局模式（文档流）
特点：块级元素都会在父级元素从上而下排布，默认宽度是父级元素的100%；
行内元素都会在父级元素内从左到右水平平均排布；
2、浮动模型 (Float) -->人为的让多个块级元素在一行显示
3、层模型（Layer） -->可以让不同的块级元素层叠显示
网页布局是制作静态页面的基础，只有把结构搭建完美，才能继续后续的样式美化和动态效果。

 

布局模型--浮动模型
特点：
1、脱离文档流
2、宽度收缩至自身宽度
3、对相邻元素来说，浮动元素已经不存在，而去霸占浮动元素的位置
4、文字会围绕浮动元素排列
5、行内元素浮动后会具有块状元素的特性，如可以设置宽高
6、清除浮动：只要让最外层的父标签认为里面有一个在正常文档流里的子元素即可,并且这个子元素是在浮动的元素最下面

 

布局模型--层模型
通过定位讲盒子从文档流中脱离出来，通过left、right、top、bottom的值来确定盒子的偏移位置。
层模型有三种形式：
1、相对定位(position: relative)
2、绝对定位(position: absolute)
3、固定定位(position: fixed)