从网页布局中学浮动与定位(HTML+CSS)

●自动居中——列布局

·涉及知识点

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

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

从网页布局中学浮动与定位(HTML+CSS)_第1张图片
居中模型

模型源码:




    
    自动居中-列布局
    


mainbody

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

·涉及的知识点:

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

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

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

从网页布局中学浮动与定位(HTML+CSS)_第2张图片
模型图

模型源码;




    
    横向两列布局
    


left
right
mainbody

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

涉及技能知识点:
通过设置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
位置固定,不会随滚动条变化;
被他遮盖的元素,可以从其下穿过

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

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

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

从网页布局中学浮动与定位(HTML+CSS)_第3张图片



    
    绝对定位布局
    


slider
content

★主要应用技能知识点:

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

【注意】:固定宽度列的高度>自适应宽度的列

你可能感兴趣的:(从网页布局中学浮动与定位(HTML+CSS))