●自动居中——列布局
·涉及知识点
标准文档流
块级元素
margin属性-设置居中对齐
★知识点【margin属性-设置居中对齐：】
margin左右设置为auto，且同时必须为width设置一个值。
居中模型
模型源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动居中-列布局</title>
<style>
*{margin:0;padding:0;}
#wrap{width: 770px;margin: 0 auto;}
#header{width: 100%;height: 200px;background:red;}
#mainbody{width: 100%;height: 200px;background:blue;}
#footer{width: 100%;height: 200px;background:green;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="mainbody">mainbody</div>
<div id="footer">footer</div>
</div>
</body>
</html>
●利用浮动原理的横向两列布局
·涉及的知识点：
float属性-使纵向排列的块级元素，横向排列
margin属性--设置两列之间的距离
★知识点
【浮动导致的问题】
父元素高度无法自动扩展
元素上移，填满浮动元素右侧（或中间）的间隙
导致页面布局混乱
【float清除浮动】：
清除浮动的常用方法：
·clear属性——常用clear:both;
clear:left;或者clear:right
·设置width:100%（或固定宽度）+overflow:hidden
·在受到浮动影响的元素之前添加空的兄弟元素
【备注】：当父包含块缩成一条时，clear：both方法无效，需要用设置width+overflow:hidden方法。
模型图
模型源码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横向两列布局</title>
<style>
*{margin:0;padding:0;color: #fff;font-size: 40px;text-align: center;}
#wrap{
background: #00C;margin:0 auto;width: 960px;
}
#header{background: #FF3300;width: 100%;}
#mainbody{background: #FC0;width: 100%;overflow: hidden;}
.left{width: 800px;height: 200px;background: #000;float: left;}
.right{width: 140px;height: 500px;background:#690;float: right;}
#footer{background: #639;width: 100%;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="mainbody">
<div class="left">left</div>
<div class="right">right</div>
mainbody
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
●横向多列等较复杂的布局——利用绝对定位实现
涉及技能知识点：
通过设置position属性实现
相对定位、绝对定位
★知识点【position属性】
·拥有3种定位形式：1.静态定位、2.相对定位、3.绝对定位
【相对定位】：
相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
【绝对定位】：
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
·position可设置4个属性值:
static（静态定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
其中absolute和fixed都属于绝对定位
·absolute与fixed相同点：
-完全脱离了标准文档流—兄弟元素不再受其影响
-以父包含块为基准定位—初始位置在父包含块的左上角
·absolute和fixed的区别：
1.）偏移参照基准：
-absolute:
无已定位祖先元素，以<html>为偏移参照基准；有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
-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:
无已定位祖先元素，以<html>为偏移参照基准；有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
-fixed
有、无已定位祖先元素，均以浏览器可视窗口为偏移参照基准。
2.)表现形式（产生滚动条时）
-absolute
位置会随滚动条变化
-fixed
位置固定，不会随滚动条变化；
被他遮盖的元素，可以从其下穿过
【注意】：当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节！
●利用相对、绝对定位实现——横向两列布局
使用定位实现横向两列布局—常用于一列固定宽度，另一列宽度自适应的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位布局</title>
<style>
*{
margin: 0;padding: 0;
}
#wrap{
width: 980px;
margin: 0 auto;
}
#header{
height:200px;
background: red;
}
#mainbody{
height:200px;
background: gray;
position: relative;
}
.slider{
height: 200px;
width: 180px;
background:blue;
}
.content{
height: 200px;
width: 780px;
background: yellow;
position: absolute;
top:0;
margin-left: 200px;
}
#footer{
height:50px;
background: green;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="mainbody">
<div class="slider">slider</div>
<div class="content">content</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
★主要应用技能知识点：
relative—父元素相对定位
absolute—自适应宽度元素绝对定位
“子绝父相”
网友评论