css3基础知识第四章布局
布局是网站制作的第一步，让我们来了解一下怎么布局
布局默认是流体布局，还有水平布局和定位布局。很多只是叫法不一样而已
流体布局：
在了解流体布局之前，我们应该先明白行内元素（内联元素），块元素和内联块元素
块元素：div ; p ; h1~h6 ; ol ; ul ; dl ; table ; address ; blockquote ; form
行内元素：a ; span ; br ; i ; em ; strong ; label ; q ; var ; cite ; code
内联块元素：img ; input
块元素：每个块级元素都各占一行，可以设置长和宽，设置display:inline可以转为行内元素;
行内元素：可以和其他元素占用同一行，没有长和宽，设置display:block可以转为块元素;
内联块元素：同时具备内联元素和块元素；和其他元素都在一行，元素的宽和高以及顶部和底边的距离都可以设置；设置display:inline-block;
流体布局中，块元素是从上到下一次排列，而行内元素是先从左到右再从上到下排列
很好理解，我就不上代码了。
水平布局：
水平布局需要用到浮动float，可以让霸道的块元素水平布局
可以同时在左 float:left;
可以同时在右 float:right;
一左一右 {
float:left;
} {
float:right;
}
学习代码：
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>html模板</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.centent{width:300px;border:1px solid red;margin:150px auto;}
.centent .one{width:100px;height:200px;background:#66CCFF;float:left;}
.centent .two{width:200px;height:200px;background:#FFCC33;float:right;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="centent">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
</body>
</html>one div使用了向左浮动，two div使用了向右浮动，clear div使用了清除浮动，如果不清楚，红色边框会出现在最上层
效果图：
定位布局：
定位布局就稍微难一点，想要弄清楚定位。
定位
1.绝对定位 position: absolute
2.相对定位 position: relative
3.固定定位 position: fixed
relative和absolute组合使用
需要注意的是
1.参照定位的元素必须是相对定位元素的前辈元素
2.参照定位的元素必须加入position:relative
3.定位元素加入position:absolute便可以使用top；bottom；right；left开始定位
我是比较喜欢用固定定位的，很多地方都会用到。
学习代码：
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>html模板</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.head{width:1000px;height:40px;background:#ccc;position:fixed;}
.centent{width:1000px;border:1px solid red;}
.centent .one{width:200px;height:500px;background:#6CF;float:left;}
.centent .three{width:200px;height:500px;background:#FC3;float:right;}
.bottom{width:1000px;height:40px;background:#666;position:absolute;bottom:0px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="head"></div>
<div class="centent">
<div class="one"></div><span style="white-space:pre">
<div class="three"></div>
<div class="clear"></div>
</div>
<div class="bottom"></div>
</body>
</html>效果图：
一点点进步，一点点成长，如果有问题可以留言，我会及时更正