目錄

流（Flow）

用float浮動元素

用clear解決重疊問題

流體佈局（liquid layouts）

凍結佈局（frozen layouts）

凝膠布局（Jello）

絕對定位absolute

CSS表格

固定定位

四種定位方式（position屬性）

• 流（Flow）

        瀏覽器在頁面上擺放HTML元素所用的方法。

        瀏覽器從HTML檔案最上面開始，從上到下沿著元素流逐個顯示所遇到的元素，並且在每個塊元素

        內聯元素在水平方向上挨著，總體上會從左上方流向右下方。

• 用float浮動元素

        float屬性儘可能遠的向左或向右浮動一個元素。然後它下面的所有內容會繞流這個元素。

        注意！浮動元素必須設定寬度。

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  width:280px;
  float:right;
}
 

• 用clear解決重疊問題

#footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin:           10px;
  font-size:        90%;
  clear:right;
  /*檢視頁尾郵編有沒有一個浮動的元素，如果有，就把頁尾下移，直到右邊無浮動內容*/
}

• 流體佈局（liquid layouts）

        不論瀏覽器調整到多大的寬度，佈局都會擴充套件，填滿

• 凍結佈局（frozen layouts）

        凍結元素，讓他們鎖定在頁面上，根本不能移動，避免由於視窗擴充套件帶來的問題。

• 凝膠布局（Jello）

       介於流體佈局和凍結佈局之間。

• 絕對定位absolute

        絕對定位元素對其他元素沒有影響。可通過index-z屬性決定離使用者的距離。

#main {
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  margin:           0px 330px 10px 10px;
}

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  position:			absolute;
  top:				128px;
  right:			0px;
  width:			280px;
}

• CSS表格

    <div id="tableContainer">
		<div id="tableRow">
			<div id="main">
			  <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
			  <p>...
			  </p>
			</div>

			<div id="sidebar">
			  <p class="beanheading">
				....
			  </p>
			</div>
		</div>
	</div>

#main {
	display:		table-cell;
	background:		#efe5d0 url(images/background.gif) top left;
	font-size:		105%;
	padding:		15px;
	vertical-align:	top;
	/*margin:			0px 10px 10px 10px;*/
}

#sidebar {
	display:		table-cell;
	background:		#efe5d0 url(images/background.gif) bottom right;
	font-size:		105%;
	padding:		15px;
	/*margin:           0px 10px 10px 10px;*/
	vertical-align:	top;
}
#tableContainer {
	display:table;
	border-spacing:10px;
}
#tableRow{
	display:table-row;
}

• 固定定位

        像絕對定位一樣為元素指定位置，位置是距離瀏覽器視窗邊界的一個偏移量，而不是距頁面邊界的距離.

<div id="coupan">
    <a href="freecoffee.html" title="Click here to get your freecoffee.">
        <img src="images/ticket.gif"
        alt="Starbuzz coupan ticket">
    </a>
</div>

• 四種定位方式（position屬性）