行效果图

技术要点

• 类选择器

语法： 类选择器名称 { }

• 标签选择器

语法：标签名 { }

• 行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其 中<span>是最典型的行内元素

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个。

2、高度，宽度直接设置无效

3、宽度默认是本身内容的宽度

4、行内元素只能容纳文本或其它行内元素

注意：

1、链接里不能再放其它链接

2、特殊情况<a>链接里面可以放块级元素，但是给<a>转换一下块级模式最安全。

• 块元素

常见的块元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的块元素

块元素的特点：

1、独占一行。

2、高度，宽度，外边距以及内边距都可以控制。

3、宽度默认是容器（父级容器的100%）

4、是一个容器及盒子，里面可以放行内或者块级元素

注意：

1、文字类的元素内不能使用块级元素

2、<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

3、同理,<h1>--<h6>等都是文字类块级元素，里面也不能放其它块级元素

代码如下：

、js实现div自适应高度

js代码：

<script type="text/javascript">
  window.onload=window.onresize=function(){
    if(document.getElementById("mm2").clientHeight < document.getElementById("mm1").clientHeight){
      document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight + "px";
    }else{
      document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight + "px";
    }
  }
</script>

这里只计算本身的高度，不含边框、内外边距的因素

2、加背景图片

这个方法，很多大网站在使用，如163，sina等。这个方法，很多大网站在使用，如163，sina等。原理是利用了背景图的repeat-y重复，从而达到看起来左右一致的效果

HTML代码：

<div id="wrap">
  <div id="column1">这是第一列</div>
  <div id="column1">这是第二列</div>
  <div class="clear"></div>
</div>

CSS代码:

#wrap{ width:776px; background:url("bg.gif") repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

3、三个栏目自适应

HTML代码:

<div id="container">
		<div id="leftRail">
			<p>Left Sidebar</p>
			<p>Left Sidebar</p>
			<p>Left Sidebar</p>
			<p>Left Sidebar</p>
		</div>
		<div id="center"><p>Center Column Content</p></div>
		<div id="rightRail"><p>Right Sidebar</p></div>
	</div>

CSS代码:

body{
			margin:0 100px;
			padding:0 200px 0 150px;
		}
		#container{
			background-color:#0ff;
			float:left;
			width:100%;   
			border-left:150px solid #0f0;
			border-right:200px solid #f00;
			margin-left:-150px;
			margin-right:-200px;
			display:inline; /* So IE plays nice */
		}
		#leftRail{
			float:left;
			width:150px;
			margin-left:-150px;
			position:relative;
		}
		#center{
			float:left;
			width:100%;
			margin-right:-100%;
		}
		#rightRail{
			float:right;
			width:200px;
			margin-right:-200px;
			position:relative;
		}

原理:

作者: Alan Pearce

原文: Multi-Column Layouts Climb Out of the Box

地址: http://alistapart.com/articles/multicolumnlayouts

我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。

最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度，但是不行。绝望之余，几乎要用table布局，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div相对与“content”的div浮动，就可以实现多栏目相同高度。这个方法在很多地方介绍过：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来，用更简洁清楚的代码 实现了两个栏目的动态变化。

给content div右加border，颜色宽度和rail一样，并相对于rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变得比rail div 高，border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样，如果rail div达到最高，container随之变高，这样就给我们content变高的效果。

看看效果。See it in action 。试试改变字体大小，布局随之变化。

3个栏目：3个颜色

3个栏目的布局有点不同:直接给container div加border.

中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动，使旁边栏目在正确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。

因为边栏在container div外，浮动在border上。使用overflow: hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需要设置颜色，它会于container div的颜色保持一致。

流动布局

了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽度，很多浏览器不支持border:**%的属性。但是我们可以使中间栏目自适应。