css的盒子模型

网页布局的本质就是把网页中的元素，例如文字。图片等放在一个盒子里，而后利用css来摆放盒子达成想要的效果，就是网页布局

css的三大模型

1.普通流

2.浮动

元素添加浮动之后，会自动转换成行内块元素

浮动的目的就是为了让多个块元素显示在同一行上

必需要消除浮动，由于若是不消除浮动，就会形成排版混乱

在父元素中加入overflower=hidden或者在浮动的盒子后面加一个标准流的空div让这个div clear=both去消除浮动

 

3.定位

定位的属性包括边偏移和定位模式

 

postion有4个属性 static， 默认定位，relative相对定位，absolute绝对定位，fixed固定定位

static默认定位，是默认的，是不能够固定位置de

relative每次移动的时候都是以本身的左上角为移动 ，是不脱标的 

absolute是脱标的 是不占用位置的是依靠父盒子去定位的，若是不设置偏移的话，就是跟着父盒子走

只要追寻原则子绝父相就彻底没问题了，吧父亲的定位作成相对的定位，孩子的定位就会跟着父亲走 

网页布局的流程

1.先肯定页面的版心

2.分析页面中的行模块，以及每一行的列模块

3.制做html结构

4.css初始化，而后利用盒子模型，div+css控制页面的模块