布局（一）——流体浮动三列布局

 今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。

    根据李炎恢老师总结的4种布局，分为：

    1.流体浮动布局

    2. 流体定位布局

    3. 固定浮动布局

    4. 固定定位布局

1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位）

规格：当视窗变化时跟着变化  

采用：浮动布局

兼容：兼容当前主流浏览器

实践代码

html文件代码:

style.css文件代码

//1.两列布局

//2.三列布局

//3.字体的垂直居中

// （1）左右居中设置text-align:center;

// （2）上下居中，将line-height:60px;必须将行高设置成与父级高度相同

//4.中间偏移法的设置——三列布局

//（1）处于中间的一个块不要设置浮动，即float属性

// （2）设置中间块与左右两块的间距，margin-left:percent;margin-right:percent;

//5.让布局随视窗的变化而跟着变化 ：布局时div的width以百分数来设置

//6.清除左右浮动——clear：both;

//7.注：width不设置，默认为auto——布满全浏览器

//8.设置 *{margin:0;padding:0;}清除浏览器对某些元素的默认设置，便于布局和样式调整

*{

margin:0;

padding:0;

}

#header{      //注：width不设置，默认为auto——布满全浏览器

border:1px solid black;

height:60px;

line-height:60px; //上下居中——必须让行高填满整个header

background:#ccc;

margin-bottom:10px;

}

#header h1{

font-size:16px;

text-align:center;  // 左右标题垂直居中

}

#nav{

border:1px solid black;

width:20%;

height:400px;

float:left;

margin-bottom:10px;

}

#nav ul, #navright ul{

text-align:center;

line-height:150%;

list-style-type:none;

}

#main{

border:1px solid black;

width:55%;

height:400px; 

margin-bottom:10px;

margin-left:22%; //中间偏移法——3列布局，兼容google和chrome

}

#main p{

padding:10px;

text-indent:36px; //首行缩进

letter-spacing:2px; //字体间的间距

line-height:150%; //行高

}

#navright{

border:1px solid black;

width:20%;

height:400px;

float:right;

margin-bottom:10px;

}

#footer{

border:1px solid black;

clear:both;

height:60px;

}

#footer p{  //设置字体垂直居中

text-align:center;  //左右居中

line-height:60px;   //上下居中——必须让行高填满整个footer

}

浏览器展示效果图：

正常窗体下