盒子理论学习：
http://www.chinaui.com/school/schoolView.aspx?ARTICLE_ID=297
技巧摘录：
1、并排排列 like this: http://www.blueidea.com/articleimg/2007/03/4545/css1.html
<style type="text/css">
<!--
.mainBox {
float: left;/*这个很重要哦！*/
/*还有很多其他标签，省略*/
1、并排排列 like this: http://www.blueidea.com/articleimg/2007/03/4545/css1.html
<style type="text/css">
<!--
.mainBox {
float: left;/*这个很重要哦！*/
/*还有很多其他标签，省略*/
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
2、通配符使用：
* {
margin: 0px;
padding: 0px;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。
* {
margin: 0px;
padding: 0px;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。
3、当两个并排内容需要其中一个靠右的话，需要使用到浮动向右：
#right {
float: right;
width: 280px;
background: darkgreen;
}
因为向右浮动，可以理解为浮动于整个盒子之上向右，它的下面还是可以让#left_content 填东西的，所以需要：
#left_content {
margin-right: 280px;
background: green;
}
这样就不会#right的内容和#left_content 的内容重叠了。
#right {
float: right;
width: 280px;
background: darkgreen;
}
因为向右浮动，可以理解为浮动于整个盒子之上向右，它的下面还是可以让#left_content 填东西的，所以需要：
#left_content {
margin-right: 280px;
background: green;
}
这样就不会#right的内容和#left_content 的内容重叠了。
4、clear:both的使用:
若出现这种情况：
表现如下：
怎么让Footer像这样呢?
那就需要用到
#footer {
clear: both;
}
若出现这种情况：
表现如下：
怎么让Footer像这样呢?
那就需要用到
#footer {
clear: both;
}
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
