常见布局

一列布局

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

样例：百度

<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)