一列布局
特点：一列布局在大显示器下放文本会过长，阅读效果不好，故一般采用固定宽度
样例：百度
<style type=”text/css”>
.main{
800px;
height:300px;
background:#ccc;
margin:0 auto;/*实现水平居中效果，需要width来支持，否则是占满窗口的*/
}
</style>
<div class=”main”>
</div>
二列布局
<style type=”text/css”>
.left{
20%;
height:500px;
float:left;
background:#ccc;
}
.right{
80%;
height:500px;
float:right;
background:#ddd;
}
</style>
<div class =”left”>
</div>
<div class=”right”>
</div>
三列布局
<style type=”text/css”>
.left{
33%;
height:500px;
float:left;
background:#ccc;
}
.middle{
33%;
height:500px;
float:left;
background:#ddd;
}
.right{
33%;
height:500px;
float:right;
background:#ddd;
}
</style>
<div class =”left”>
</div>
<div class=”middle”>
</div>
<div class=”right”>
</div>
要求：左边固定200px 右边固定300px
.left{
200px;
height:500px;
float:left;
background:#ccc;
}
.middle{
100%;宽度不能为100% 会撑到下面，应为减去左右的大小
margin-left:200px;/*已经浮动了，左边会紧贴*/
margin-right:300px;
height:500px;
float:left;
background:#ddd;
}
.right{
300px;
height:500px;
float:right;
background:#ddd;
}
也可以
.left{
200px;
height:500px;
position :absolute;
/*块会变为行内样子，且不占文档流空间*/
left:0;
top:0;
background:#ccc;
}
.middle{
height:500px;
float:left;
margin:0 200px 0 300px;
background:#ddd;
}
.right{
300px;
height:500px;
position :absolute;
right:0;
top:0;
background:#ddd;
}
混合布局
前三种混合起来
块与块关系：挨着嵌套 叠压
margin：-xx 用于定位
text：indent来定位
网页布局基础：1.盒子 2.浮动 3.定位
定位:标准文档流浮动 绝对定位
默认布局样式：流式布局
行内 span strong img input 表单元素
块 div ul li ul dt p
盒子模型：默认高度自适应
自动居中margin:0 auto; width不能是100%，否则看不出效果。不能再设置浮动和绝对定位。也可以使用margin负数来定位。
text-indent 在不改变盒子大小的同时改文字位置 text-align:center
浮动：
块元素默认在尾部换行
浮动的元素尾部不换行，宽度随内容而变化
解决浮动影响的常用方法
clear:both 用于后面的元素
100%和overflow:hidden：父元素和后面元素
<br/> 不建议用，且无意义
子元素设置了浮动，父元素无法按照内容扩展高度
定位
相对定位，不脱离文档流，相对原先位置，设置了便也拥有了偏移属性和z-index属性
绝对定位，脱离文档流（不会影响其父元素高度，也不会影响其他的相邻元素），相对祖先元素非static
，宽度随内容而增长，设置了便有了偏移和z-index属性。指定父参照元素，给该父元素设置relative
