常见布局

一列布局

特点：一列布局在大显示器下放文本会过长，阅读效果不好，故一般采用固定宽度

样例：百度

<style type=”text/css”>

.main{

width:800px;

height:300px;

background:#ccc;

margin:0 auto;/*实现水平居中效果，需要width来支持，否则是占满窗口的*/

}

</style>

<div class=”main”>

</div>

二列布局

<style type=”text/css”>

.left{

width:20%;

height:500px;

float:left;

background:#ccc;

}

.right{

width:80%;

height:500px;

float:right;

background:#ddd;

}

</style>

<div class =”left”>

</div>

<div class=”right”>

</div>





三列布局

<style type=”text/css”>

.left{

width:33%;

height:500px;

float:left;

background:#ccc;

}

.middle{

width:33%;

height:500px;

float:left;

background:#ddd;

}

.right{

width:33%;

height:500px;

float:right;

background:#ddd;

}

</style>

<div class =”left”>

</div>

<div class=”middle”>

</div>

<div class=”right”>

</div>

要求：左边固定200px 右边固定300px

.left{

width:200px;

height:500px;

float:left;

background:#ccc;

}

.middle{

width:100%;宽度不能为100% 会撑到下面，应为减去左右的大小

margin-left:200px;/*已经浮动了，左边会紧贴*/

margin-right:300px;

height:500px;

float:left;

background:#ddd;

}

.right{

width:300px;

height:500px;

float:right;

background:#ddd;

}

也可以

.left{

width:200px;

height:500px;

position :absolute;

/*块会变为行内样子，且不占文档流空间*/

left:0;

top:0;

background:#ccc;

}

.middle{

height:500px;

float:left;

margin:0 200px 0 300px;

background:#ddd;

}

.right{

width: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 用于后面的元素

width:100%和overflow:hidden：父元素和后面元素

<br/> 不建议用，且无意义

子元素设置了浮动，父元素无法按照内容扩展高度

定位

相对定位，不脱离文档流，相对原先位置，设置了便也拥有了偏移属性和z-index属性

绝对定位，脱离文档流（不会影响其父元素高度，也不会影响其他的相邻元素），相对祖先元素非static

，宽度随内容而增长，设置了便有了偏移和z-index属性。指定父参照元素，给该父元素设置relative













来自为知笔记(Wiz)