网页布局的本质就是把网页中的元素,例如文字。图片等放在一个盒子里,然后利用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控制页面的模块