从网页布局中学浮动与定位（HTML+CSS）

●自动居中——列布局

·涉及知识点

标准文档流
块级元素
margin属性-设置居中对齐

★知识点【margin属性-设置居中对齐：】
margin左右设置为auto，且同时必须为width设置一个值。

居中模型

模型源码：




    
    自动居中-列布局
    



    header
    mainbody
    footer

●利用浮动原理的横向两列布局

·涉及的知识点：

float属性-使纵向排列的块级元素，横向排列
margin属性--设置两列之间的距离

★知识点
【浮动导致的问题】
父元素高度无法自动扩展
元素上移，填满浮动元素右侧（或中间）的间隙
导致页面布局混乱

【float清除浮动】：
清除浮动的常用方法：
·clear属性——常用clear:both;
clear:left;或者clear:right
·设置width:100%（或固定宽度）+overflow:hidden
·在受到浮动影响的元素之前添加空的兄弟元素
【备注】：当父包含块缩成一条时，clear：both方法无效，需要用设置width+overflow:hidden方法。

模型图

模型源码;




    
    横向两列布局
    



    header
    
        left
        right
        mainbody
    
    footer

●横向多列等较复杂的布局——利用绝对定位实现

涉及技能知识点：
通过设置position属性实现
相对定位、绝对定位

★知识点【position属性】
·拥有3种定位形式：1.静态定位、2.相对定位、3.绝对定位

【相对定位】：

相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性

【绝对定位】：

建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性

·position可设置4个属性值:
static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

其中absolute和fixed都属于绝对定位

·absolute与fixed相同点：
-完全脱离了标准文档流—兄弟元素不再受其影响
-以父包含块为基准定位—初始位置在父包含块的左上角

·absolute和fixed的区别：
1.）偏移参照基准：
-absolute:
无已定位祖先元素，以为偏移参照基准；有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
-fixed
有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准。

2.)表现形式（产生滚动条时）
-absolute
位置会随滚动条变化
-fixed
位置固定，不会随滚动条变化；
被他遮盖的元素，可以从其下穿过

绝对定位布局

涉及技能：
通过设置position属性实现

★知识点【position属性】
·拥有3种定位形式：1.静态定位、2.相对定位、3.绝对定位

【相对定位】：

相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性

【绝对定位】：

建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性

·position可设置4个属性值:
static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

其中absolute和fixed都属于绝对定位
·absolute与fixed相同点：
-完全脱离了标准文档流—兄弟元素不再受其影响
-以父包含块为基准定位—初始位置在父包含块的左上角
·absolute和fixed的区别：
1.）偏移参照基准：
-absolute:
无已定位祖先元素，以为偏移参照基准；有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
-fixed
有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准。

2.)表现形式（产生滚动条时）
-absolute
位置会随滚动条变化
-fixed
位置固定，不会随滚动条变化；
被他遮盖的元素，可以从其下穿过

【注意】：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节！

●利用相对、绝对定位实现——横向两列布局

使用定位实现横向两列布局—常用于一列固定宽度，另一列宽度自适应的情况




    
    绝对定位布局
    



    header
    
        slider
        content
    
    footer

★主要应用技能知识点：

relative—父元素相对定位
absolute—自适应宽度元素绝对定位
“子绝父相”