學習CSS版面入門教程

概述

Web 興起之後，關於CSS的介紹和學習資料已經鋪天蓋地。
本文不涉及特定的CSS語法之類的，而是希望從初學者的角度，讓沒有接觸或很少接觸CSS的人能快速的了解 CSS 到底是什麼以及如何使用。

什麼是 CSS

了解一個概念，首先看到的就是它的名字，而常被忽略的，也是它的名字。
CSS (cascading style sheets)，可以翻譯成中文 層疊樣式表 。從名字可以看出：

• 層疊：說明樣式可以疊加，所以會有優先權

• 樣式表：說明CSS是描述樣式的，而且只是個表，不是程式語言，所以後來隨著CSS 的應用越來越多，才會有Sass 和Less 這些擴充CSS 語法的語言出來

CSS 的作用

CSS 的作用就是樣式，其實Web 只用HTML也可以做出來，只是隨著機器和瀏覽器效能的提升，人們對網頁的美觀和易用性要求越來越高，CSS的重要性才逐漸凸顯。
CSS 我覺得有2個主要的作用：

• 可以將Web 的樣式統一管理，便於修改，類似於程式語言中的變數或者設定檔

• 將網頁內容與樣式分離開，讓靈活呈現內容成為可能

注意HTML 是網頁的實際內容，CSS只是控制HTML元素的如何顯示，顯示與否。

CSS for 佈局

CSS 在佈局上用的最多，就是因為了有了CSS，才會有所謂的p+css 佈局方式，以前用HTML都是table 版面。

初步了解 p+css 的佈局，我覺得了解3點就夠了，框模型，定位和浮動。

框模型

每個p對css來說都是一個 框 。每個框由內到外由4部分組成content padding border margin
#p 的長和框由這4部分的長總和和寬總和組成
範例：

nbsp;html>

  
    <meta>
    <title>CSS Sample</title>
    <link>
  
  
    <p>Content</p>
  

body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
}

範例很簡單，但是可以看出：

1. #從外到內依序是margin, border, padding, content

2. #p 的width 和height 只是content 的大小

#定位

理解了框模型之後，定位也很簡單，其實就是將一個個框定位在頁面上。
定位分為絕對定位和相對定位。

絕對定位

就是在瀏覽器上的絕對位置，透過top 和left 屬性設定相對於瀏覽器左上角的距離

nbsp;html>


<meta>
<title>CSS Sample</title>
<link>


<p>Content1</p>
<p>Content2</p>


body {
  background-color: #FAEBD7;
}
p {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
  position: absolute;
}
#p1 {
  top: 100px;
  left: 100px;
}
#p2 {
  top: 200px;
  left: 200px;
}

絕對定位明確但不靈活，除非螢幕大小能固定，否則需要多套css。設定不好會造成元素的重疊。
絕對定位中有個很關鍵的設定是position: absolute

相對定位

#相對定位中每個p 的top 和left 不再是相對瀏覽器的左上角了。而是相對剩餘位置的左上角。
同樣是上面的例子，把 position: absolute 換成 position: relative 可以發現2個p 不再重疊了。

浮動

p 預設是 inline的，也就是每個 p 佔據了一行。
佈局時，如果希望多個p排列在一行，那麼就會用到浮動（或用以前的 table方式）
設定 p 浮動屬性之後，就可以用p佈局出各種結構。

下面以常見的管理系統為例，做一個簡單的 p+css 佈局

nbsp;html>

  
    <meta>
    <title>CSS Sample</title>
    <link>
  
  
      <p>head</p>
      <p>
        </p><p>nav</p>
        <p>content</p>
      
      <p>foot</p>
  

body {
  background-color: #FAEBD7;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
p {
  border: 1px solid black;
  text-align: center;
}
#head {
  height: 50px;
  width: 100%;
}
#middle {
  width: 100%;
  top: 50px;
  bottom: 100px;
  left: 0px;
  position: absolute;
}
#nav {
  float: left;
  width: 200px;
  height: 100%;
}
#content {
  height: 100%;
  overflow: hidden;
}
#foot {
  height: 100px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  position: absolute;
}

上面的範例中，head，foot 高度固定，nav 寬度固定。其他都是自適應的，可以透過調整瀏覽器視窗的大小看到效果。

總結

CSS 佈局很簡單，如果還有其他的互動動作，可以透過js來實現（例如導航和內容的連動）。
現在已經基本上沒有人會用 table 的佈局方式了，因為 table 本來只展現資料的一種方式，row，cell 的方式也不適合元件化。

以上是學習CSS版面入門教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！