一直做C/S开发的工作，但是很少做和布局相关的工作，往往都是同事将界面设计好，自己填写代码而已，对于B/S的工作，做过，但是很少没有像C/S这么多，界面布局的话，更无从谈起。
日子就这么过，一天一个样字，时间多了自己写博客，写心得，时间紧张了，要么转载别人的，要么干脆就不写了，这种心情不知道大家能理解不？今天心血来潮，决定自己尝试一下这个传说中的CSS，其实做布局首先是要分块，将界面分为自己想要的几个部分，在Winform中，一般都是通过panel+doc属性搞定，如果仔细想想，其实这个panel实际上是起到了划分占位的作用，那么在CSS中布局，划分就应该是用div来完成，本人不才，习惯了Winform的开发，所以第一个布局还是按照Winform的风格来练习的。
在CSS中DIV 属于块级别元素，块元素（例如div）在没有任何布局属性作用时，默认排列方式是换行排列，也就是说宽度是100%，即便它的高度是1px，它也会占居整行。但是在今天使用div的时候，发现一个问题，这个问题让我找了半天，我的效果本应该是下面的：
效果的代码如下，大家不要嘲笑，这个布局在做C/S开发的时候很常见，也很容易，但是在CSS这，我搞了半天。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_10_1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#t1
{
float:left;
}
body
{
width : 100%;
height:100%;
margin:0,0,0,0
}
#top
{
width : 100%;
height:50px;
background-color:Silver
}
.mapstyle1
{
height : 100%;
width:40px;
background-color:Purple
}
#t2
{
height: 60px;
width :100%;
}
#main
{
width:100%;
height:300px;
}
#main #t2 #t3
{
width:56px;
height:100%;
float:right;
background-color:Red;
}
#main #t2 #map
{
height: 60px;
width:95%;
background-color:Orange;
float:left
}
#main .bottom
{
height:10px;
background-color: Green
}
</style>
<script type="text/javascript">
window.onload = function () {
// var btn1 = document.getElementById("map");
// btn1.className = "mapstyle1"
// btn1.onclick = function () {
// alert("hello");
// }
}
</script>
</head>
<body>
<div id="main">
<div id ="top"></div>
<div id="t2" >
<div id="t1" class="mapstyle1" >
</div>
<div id="map"></div>
<div id="t3">
</div>
</div>
<div id ="bt" class="bottom"></div>
</div>
</body>
</html>
在开始的时候，我将id为top的div 写成
<div id ="top"/>
结果效果成了下面的样子：
这个结果是id为top的div没有出现，在google浏览器中调试发现高度为0，当将
<div id ="top"/>
改成
<div id ="top"></div>
效果就出来了，看来div必须成对出现呀！
在这里还学习了float的用法。
上面说过，如果给div不做任何布局，那么这个div会占据正行，该div下面的一个新的div会另起一行，如何让这两个div元素并排显示呢？float就可以解决这个问题。
CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，使用了float标记的元素将脱离标准流, 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则，块状元素从上往下，内联元素从左向右的排列，当使用了relative，float等设置后，排列就不是按照标准流了。
浮动(float)细节：
1.左(右)浮动元素，尽量靠近父元素左(右)内边沿。
2.浮动元素尽量不去重叠交叉。
3.浮动元素尽可能高，当不会高于父元素顶内边沿。
