CSS佈局入門

zting科技發表於2017-10-04
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，才會有所謂的 div+css 佈局方式，以前用 HTML 都是 table 佈局。

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

框模型

每個div對於css來說都是一個 框 。每個框由內到外由4部分組成 content padding border margin

div 的長和框由這4部分的長之和和寬之和組成

示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
    <div>Content</div>
  </body>
</html>

body {
  background-color: #FAEBD7;
}

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

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

  1. 從外到內 依次是 margin, border, padding, content
  2. div 的 width 和 height 只是 content 的大小

定位

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

定位分為絕對定位和相對定位。

絕對定位

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>CSS Sample</title>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<div id="div1">Content1</div>
<div id="div2">Content2</div>
</body>
</html>

body {
  background-color: #FAEBD7;
}

div {
  width: 100px;
  height: 100px;
  padding: 30px;
  border: 10px solid blue;
  margin: 10px;
  background-color: red;
  text-align: center;
  position: absolute;
}

#div1 {
  top: 100px;
  left: 100px;
}

#div2 {
  top: 200px;
  left: 200px;
}

絕對定位明確但不靈活，除非螢幕大小能固定，否則需要多套css。設定不好會造成元素的重疊。

絕對定位中有個很關鍵的設定是 position: absolute

相對定位

相對定位中每個 div 的 top 和 left 不再是相對瀏覽器的左上角了。而是相對剩餘位置的左上角。

同樣是上面的例子，把 position: absolute 換成 position: relative 可以發現2個div 不再重疊了。

浮動

div 預設是 inline的，也就是每個 div 佔據了一行。

佈局時，如果希望多個div排列在一行，那麼就會用到浮動（或者用以前的 table方式）

設定 div 浮動屬性之後，就可以用div佈局出各種結構。

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>CSS Sample</title>
    <link href="index.css" rel="stylesheet"/>
  </head>
  <body>
      <div id="head">head</div>
      <div id="middle">
        <div id="nav">nav</div>
        <div id="content">content</div>
      </div>
      <div id="foot">foot</div>
  </body>
</html>

body {
  background-color: #FAEBD7;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div {
  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 的方式也不適合元件化。

本文轉自wang_yb部落格園部落格，原文連結：http://www.cnblogs.com/wang_yb/p/6066036.html，如需轉載請自行聯絡原作者


相關文章