行效果圖

技術要點

• 類選擇器

語法： 類選擇器名稱 { }

• 標簽選擇器

語法：標簽名 { }

• 行內元素

常見的行內元素有<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:**%的屬性。但是我們可以使中間欄目自適應。