二、CSS 基本介紹

本文轉載自查看原文 2014-01-30 14:14 2957 【Web Front-End】/ Web

[ 顯示目錄 ]

[ 隱藏 ]

基本概念
CSS組成部分
CSS的規則
引入CSS樣式的方法
顏色的表示
CSS Reset
選擇器分類
浮動
盒子模型
box-sizing屬性
實例：實現“田字格”布局
實例：實現metro風格布局
實例：畫三角形
實例：畫一棵樹
設置字體屬性
設置段落屬性
設置背景及背景圖片的屬性
自定義列表標志
display常用屬性
inline-block去除間距
例子：垂直居中對齊
position屬性
案例：實現頂部導航
案例：實現登錄界面
IE 6 雙倍margin的bug
overflow屬性
單頁面設計
響應式設計
常用工具
參考文獻

前言

本教程針對熟悉HTML4、初步使用過CSS的人。

基本概念

CSS(Cascade Style Sheet)，即層級樣式表。
HTML可以說只是給網頁填充了內容，CSS則是對網頁進行化妝、修飾，比如給文字設置字體、顏色、大小等。
我們實現網頁的第一步是使用DIV將頁面划分成多個塊，參見下面的"華東師范大學網頁布局例子"。
以前在HTML標簽中能夠通過設置屬性的方式(比如<div width="80px">)為標簽定義樣式（類似CSS的功能），但是現在推薦使用CSS設置(div{width:80px;})，即"HTML與CSS分離"，在web中還有“頁面展示與邏輯處理分離”等概念。
一般來說目前實現網頁時不需要從零做起，網上有很多好的CSS代碼可以使用（或者CSS框架，如：Yahoo Pure 等），但是為了能看懂那些代碼（或更好地學習CSS框架），我們需要學習CSS的基本知識。
CSS參考手冊：http://css.doyoe.com/

CSS組成部分

CSS的基本結構如下：

<selector>{
　　<attr1>:<value1>;
　　<attr2>:<value2>;
　　<attr3>:<value3>;
　　......
　　<attrN>:<valueN>;
}

解釋：

<selector>的中文名叫“選擇器”，表示對哪個元素設置樣式。<selector>大括號內部設置具體的樣式，如字體等。
設置樣式的方法是通過多對<attr>:<value>組合而成，中間用分號( ; )分隔。

這里舉個簡單的例子：

body{ //對<body>內的元素進行設置
　　font-size:12px; //設置字體大小為12px,px是pixel的縮寫，表示像素
　　font-family:sans-serif,Georgia; //設置首選字體為sans-serif,如果本機內沒安裝此字體，則使用Georgia
}

CSS的規則

繼承原則：如果父標簽定義了某樣式，則默認對應的子標簽也應用該樣式。
就近原則：離修飾標簽越近的CSS樣式優先級越高。

引入CSS樣式的方法

這里只介紹兩種最常用的：

內部樣式表：在<head></head>內部添加：<style type="text/css">......</style>
外部樣式表：將CSS放在文件(如home.css)中，並在<head></head>內部添加：<link rel="stylesheet" type="text/css" href="home.css"/>

顏色的表示

在CSS中不可避免會遇到顏色設置，因此這里我們需要學習怎么表示顏色。
共有4種顏色表示法：

1. 預定義顏色：例如“color:black”中的black就是預定義的顏色。
2. 十六進制表示法：#ABCDEF，其中AB、CD、EF分別對應R、G、B。例子：#FFFFFF 表示白色。
3. 短十六進制表示法：這是對第二種表示法的特例，當A=B時A和B只寫一個(同樣地，C=D、E=F 時也類似)。例子：#FF00CC 可簡寫為 #F0C.
4. rgb表示法：rgb(255,255,255) 表示白色。

CSS Reset

起因：在不同瀏覽器中的默認CSS樣式可能是不同的，比如按鈕，在IE中可能是樣式A，在Chrome中是樣式B，在Firefox中是樣式C，這種不一致性會讓開發者不爽。因此就需要CSS Reset來統一不同瀏覽器的默認樣式。
CSS reset 通俗地說就是“一段CSS代碼，這段代碼能夠初始化基本的標簽，使得在不同瀏覽器中，各標簽的顯示樣式是一樣的。”
可以在 http://www.cssreset.com/ 中尋找最近最流行的CSS Reset代碼。
還有一個更加應用廣泛的替代CSS Reset的代碼：Normalize.css，他被很多框架使用。
最常用的CSS Reset代碼是 Eric Meyer 寫的“CSS Reset 2.0”，代碼如下：

 1 /**
 2  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3  * http://cssreset.com
 4  */
 5 html, body, div, span, applet, object, iframe,
 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 a, abbr, acronym, address, big, cite, code,
 8 del, dfn, em, img, ins, kbd, q, s, samp,
 9 small, strike, strong, sub, sup, tt, var,
10 b, u, i, center,
11 dl, dt, dd, ol, ul, li,
12 fieldset, form, label, legend,
13 table, caption, tbody, tfoot, thead, tr, th, td,
14 article, aside, canvas, details, embed, 
15 figure, figcaption, footer, header, hgroup, 
16 menu, nav, output, ruby, section, summary,
17 time, mark, audio, video {
18     margin: 0;
19     padding: 0;
20     border: 0;
21     font-size: 100%;
22     font: inherit;
23     vertical-align: baseline;
24 }
25 /* HTML5 display-role reset for older browsers */
26 article, aside, details, figcaption, figure, 
27 footer, header, hgroup, menu, nav, section {
28     display: block;
29 }
30 body {
31     line-height: 1;
32 }
33 ol, ul {
34     list-style: none;
35 }
36 blockquote, q {
37     quotes: none;
38 }
39 blockquote:before, blockquote:after,
40 q:before, q:after {
41     content: '';
42     content: none;
43 }
44 table {
45     border-collapse: collapse;
46     border-spacing: 0;
47 }

CSS Reset

選擇器分類

* : 選擇任何元素。格式為：*{...}
標簽選擇器：選擇指定標簽。格式為：<tag>{...}
id選擇器：選擇指定 id 的元素。某個 id 在一個頁面中是唯一的。格式為：#<id>{...}
class選擇器：選擇指定class的元素。格式為：.<class>{...}。值得一提的是，class選擇器的變型：

與標簽選擇器一起使用，格式為：<tag>.<class>。表示只選擇具有class=<class>的<tag>標簽。
多個class一起使用，格式為：.<class1>.<class2>。表示class同時屬於<class1>和<class2>的元素。

后代選擇器：選擇指定元素的指定后代元素（后代和子元素是不同的，並不一定要緊跟在父元素里面）。格式為：<father> <空格><descendent> ，例如 div h3 解釋為“div元素的所有<h3>標簽”。
子元素選擇器：選擇指定元素的子元素（子元素指的是孩子，並不包含孫子...）。格式為：<father> > <child>。
屬性選擇器: 選擇具有指定屬性或指定屬性具有特定值的元素。格式為：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。
- 部分匹配屬性值：<selector>[<attribute>*="<value>"] 表示只要<attribute>屬性中包含<value>值即可。
相鄰兄弟選擇器：選擇(緊挨着的)相鄰的兄弟的元素。格式為：<selector1> + <selector2>。表示選擇緊跟在selector1后面的selector2。
偽類選擇器：
- <selector>:first-child{...} . 當<selector>為某個元素的第一個子元素時應用樣式。
- <selector>:focus{...} . 當<selector>擁有鍵盤輸入焦點時應用樣式。
- a:link{...} . 當<a>未被訪問過時應用樣式。
- a:visited{...}. 當<a>已被訪問時應用樣式。
- a:hover{...} . 當鼠標懸浮在<a>上時應用樣式。（隨着移動設備的越來越流行，我們發現移動設備是沒有鼠標的，因此沒有hover這個概念，hover變得不那么重要了。 --《2014年七個最明顯的web設計趨勢及其生存技巧》）
- a:active{...}. 當<a>被激活(激活指的是鼠標按下且未松開的這段時間)時應用樣式。
- 注意：在css中一定要以：link -> visited -> hover -> active 的順序進行聲明！！！！
偽元素選擇器：
- <selector>:first-line{...}. 選擇<selector>的第一行。注意：<selector>必須是塊級元素。
- <selector>:first-letter{...}. 選擇<selector>的第一個字母。注意：<selector>必須是塊級元素。
- <selector>:before{content:"..."}. 在<selector>的前面插入內容。例如：h1:before{content:url(1.jpg)}表示在<h1>前面插入一張圖片。
- <selector>:after{content:"..."}. 在<selector>的后面插入內容。
選擇器分組：多個選擇器可以用逗號（,）隔開，表示同時對多個選擇器設置樣式。格式為：<selector1>,<selector2>,<selector3>{...}

應用：

選擇一個有序列表中的第三行：ol > li:first-child + li + li
選擇class="c1"的div：div.c1

選擇器定義准則：

最常用的選擇器：id選擇器、class選擇器。
盡量少使用復雜層級關系。
使用class代替層級關系。

在不同的框架中(如 JQuery)可能會新增很多其他選擇器，但是以上的幾個選擇器是最基本的。

實例：實現“華東師范大學主頁”布局

此處只是實現布局，而不是實現全部效果。

效果：

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style type="text/css">
 5             #container{
 6                 margin:0 auto;
 7                 max-width:980px;
 8                 background:gray;
 9             }
10             #header{
11                 background:red;
12                 height:100px;
13             }
14             #nav{
15                 background:orange;
16                 height:50px;
17             }
18             #banner{
19                 background:blue;
20                 height:300px;
21             }
22             #news{
23                 background:green;
24                 width:30%;
25                 height:100px;
26                 float:left;
27             }
28             #focus{
29                 background:yellow;
30                 width:30%;
31                 height:100px;
32                 float:left;
33             }
34             #resources{
35                 background:gray;
36                 width:40%;
37                 height:100px;
38                 float:right;
39             }
40             #footer{
41                 background:purple;
42                 height:100px;
43                 clear:left;
44             }
45         </style>
46     </head>
47     <body>
48         <div id="container">
49             <div id="header">header</div>
50             <div id="nav">nav</div>
51             <div id="banner">banner</div>
52             <div id="main">
53                 <div id="news">news</div>
54                 <div id="focus">focus</div>
55                 <div id="resources">resources</div>
56             </div>
57             <div id="footer">footer</div>
58         </div>
59     </body>
60 </html>

float(浮動)

定義：我們可以把一個HTML頁面看成有兩層，高層是浮動層(存放浮動元素)，低層是一般層(存放一般元素)。而浮動元素會放在浮動層中（官方解釋為“脫離文檔流”）。如果浮動層元素和一般層元素重疊，則浮動層覆蓋一般層。
將DIV設置為浮動后會使得DIV不再獨占一行。
如果父DIV是非浮動的，而其子DIV是浮動的，則父DIV的高度是0，即父DIV的高度並沒有被子DIV撐起來。下面的例子中就體現了這一點：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 <style type="text/css">
 7     #child1{
 8         float:left;
 9         width:300px;
10         height:300px;
11         background:yellow;
12     }
13     #child2{
14         float:left;
15         width:300px;
16         height:300px;
17         background:blue;
18     } 
19 </style>
20 </head>
21 <body>
22     <div id="father"> 
23         <div id="child1"></div>
24         <div id="child2"></div>
25     </div>
26 </body>
27 </html>

那么怎么將父元素撐開呢？解決方法就是在父元素中加入"overflow:auto;zoom:1;"

盒子模型

為什么要叫盒子模型？前面已經說過一個網頁的設計布局其實就是怎么嵌套DIV標簽（參見："華東師范大學網頁布局例子"），每個DIV就是一個塊(這個塊就是盒子)，因此盒子模型就是對DIV標簽的介紹。
注意：盒子模型僅適用於塊級元素。
盒子模型的核心元素有 DIV標簽、對應的CSS屬性： width(存放內容的寬度)、height(存放內容的高度)、padding(內邊距)、border(邊框)、margin(外邊距)。圖示如下所示：

box-sizing屬性

在盒子模型中，我們可以看到一個盒子的真實寬度是：border-left+padding-left+width+padding-right+border-right，如果設置了兩個DIV的width屬性是一樣的，但是padding值不一樣會導致盒子寬度不一樣，這樣會很麻煩。
通常我們會設置："*{box-sizing:border-box}" 。這樣邊框和內邊距不會改變盒子的寬度，如果我們設置了width=200px，則盒子寬度永遠是200px。

實例：實現“田字格”布局

效果：

說明：

此實例主要使用“浮動”(float)、“清除浮動”(clear)兩個知識點。對四個div使用左浮動，對第三個div使用清除左浮動，使得第三個div的左側不允許有浮動元素。

代碼：

 1 <!--實現了田字格布局-->
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <style type="text/css">
 6             div{
 7                 border-style: solid;    
 8                 border-color: #000000; 
 9                 border-width:5px;    
10                 margin:10px;        
11                 width:100px;        
12                 height:100px;        
13             }
14             #c1,#c2,#c3,#c4{
15                 float:left;
16             }
17             #c3{
18                 clear:left;
19             }
20         </style>
21     </head>
22     <body>
23         <div id="c1"></div>
24         <div id="c2"></div>
25         <div id="c3"></div>
26         <div id="c4"></div>
27     </body>
28 </html>

實例：實現metro風格布局

如何文字在div中垂直居中？

將 line-height 屬性和 height 屬性的值設置成一樣即可。

效果：

代碼：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>實現metro布局</title>
  6 <style>
  7     html{
  8         font-family:"Microsoft YaHei UI";
  9         color:white;
 10     }
 11     #container{
 12         width:655px;
 13         height:90px;
 14     }
 15     #d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d10{
 16         float:left;
 17         text-align:center;    /*文字水平居中*/
 18         margin:1px;        
 19     }
 20     #d1{
 21         background-color:#CC3333;
 22         width:106px;
 23         height:58px;
 24         line-height:58px;    /*將height和line-height設置為一樣可以使文字垂直居中*/
 25         font-size:20px;
 26     }
 27     #d2{
 28         background-color:#0048BE;
 29         font-size:25px;
 30         width:215px;
 31         height:58px;
 32         line-height:58px;
 33     }
 34     #d3{
 35         background-color:#FF9900;
 36         font-size:12px;
 37         width:107px;
 38         height:28px;
 39         line-height:28px;
 40     }
 41     #d4{
 42         background-color:#FF9900;
 43         font-size:12px;
 44         width:107px;
 45         height:28px;
 46         line-height:28px;
 47         margin-left:0px;
 48     }
 49     #d5{
 50         background-color:#91009E;
 51         font-size:20px;
 52         width:106px;
 53         height:58px;
 54         line-height:58px;
 55     }
 56     #d6{
 57         background-color:#00839A;
 58         font-size:12px;
 59         width:106px;
 60         height:30px;
 61         line-height:30px;
 62     }
 63     #d7{
 64         background-color:#542FB0;
 65         font-size:12px;
 66         width:107px;
 67         height:30px;
 68         line-height:30px;
 69     }
 70     #d8{
 71         background-color:#FF9900;
 72         font-size:12px;
 73         width:107px;
 74         height:30px;
 75         line-height:30px;
 76         margin-left:0px;
 77     }
 78     #d9{
 79         background-color:#0048BE;
 80         font-size:25px;
 81         width:215px;
 82         height:60px;
 83         line-height:60px;
 84         margin-top:-29px;
 85     }
 86     #d10{
 87         background-color:#542FB0;
 88         font-size:12px;
 89         width:106px;
 90         height:30px;
 91         line-height:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="container">
 98         <div id="d1">燕麥食品</div>
 99         <div id="d2">自學電腦</div>
100         <div id="d3">51我要自學網</div>
101         <div id="d4">機械設計與制造</div>
102         <div id="d5">汽車年審</div>
103         <div id="d6">自學計算機</div>
104         <div id="d7">入門吉他</div>
105         <div id="d8">圖標設計</div>
106         <div id="d9">Javascript框架</div>
107         <div id="d10">木吉他入門教學</div>
108     </div>
109 </body>
110 </html>

metro風格布局

實例：畫三角形

效果如下：

分析：

這里最重要的是要了解相鄰邊框（比如左邊框與下邊框）的銜接處的效果。
在HTML5中，我們可以使用canvas技術畫圖，並且實現效果更加美觀，這里只是為了熟悉CSS的知識而已。

HTML4代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>使用CSS畫一個三角形</title>
 6 <style type="text/css">
 7     #child{
 8         width:0px;
 9         height:0px;
10         border:100px solid red;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15 </style>
16 </head>
17 <body>
18     <div id="child"></div>
19 </body>
20 </html>

這里補充使用HTML5 Canvas 畫一個三角形，canvas技術可以理解為“把頁面當作一個畫布，你可以在畫布上畫任何的圖形”。canvas的使用請查閱額外資料。

HTML5代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>使用HTML5 Canvas 畫一個三角形</title>
 6 </head>
 7 <body>
 8     <canvas id="canvas" width="300" height="300">
 9         該瀏覽器不支持 canvas api
10     </canvas>
11 </body>
12 <script type="text/javascript">
13     var canvas = document.getElementById("canvas");
14     var context = canvas.getContext("2d");
15     context.fillStyle="red";    //填充顏色為紅色
16     context.beginPath();        //開始路徑
17     context.moveTo(100,100);    //起始點為(100,100)
18     context.lineTo(75,125);        //從(100,100)到(75,125)有一條線
19     context.lineTo(125,125);    //從(75,125)到(125,125)有一條線
20     context.closePath();        //從(125,125)到(100,100)有一條線
21     context.fill();                //填充
22 </script>
23 </html>

實例：畫一棵樹

效果如下：

分析：利用CSS中的border屬性畫兩個三角形和一個矩形。

代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS畫一棵樹</title>
 6 <style type="text/css">
 7     #child1{
 8         width:0px;
 9         height:0px;
10         border:100px solid green;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15     #child2{
16         width:0px;
17         height:0px;
18         border:100px solid green;
19         border-top-style:none;
20         border-top-color:transparent;
21         border-left-color:transparent;
22         border-right-color:transparent;
23     }
24     #child3{
25         width:80px;
26         height:50px;
27         float:left;
28     }
29     #child4{
30         float:left;
31         width:0px;
32         height:50px;
33         border:20px solid brown;
34     }
35 </style>
36 </head>
37 <body>
38     <div id="child1"></div>    <!--第一片葉子 -->
39     <div id="child2"></div> <!--第二片葉子 -->
40     <div id="child3"></div> <!--透明支撐物，為了將樹干放到葉子中間-->
41     <div id="child4"></div> <!--樹干-->
42 </body>
43 </html>

設置字體屬性

font-style: 設置斜體。可選值有：normal(正常), italic(斜體).
font-weight: 設置粗體。可選值有：normal(正常), bold(粗體).
font-size: 設置字號。
line-height: 設置行高，即一行的高度。
font-family: 設置字體。這里值得一提的是可以同時寫多個字體，如："font-family:'雅黑','宋體','黑體';"，因為不同機器上擁有的字體可能不一樣，如果有的機器沒有雅黑字體，則使用宋體，如果沒有宋體，最后使用黑體。
color: 設置字的顏色。

設置段落屬性

text-indent: 設置縮進大小。可選值為數字即可。
text-align: 文字對齊方式。可選值有：left(左對齊，默認), right(右對齊), center(居中), justify(兩端對齊).
text-decoration: 設置段落的額外裝飾。可選值有：underline(下划線), overline(上划線), line-through(刪除線), none（無，默認）.
letter-spacing: 設置字符間距。

設置背景及背景圖片的屬性

background-color: 設置背景顏色。
background-image: 設置背景圖片。值類似：url(1.jpg)
background-repeat: 設置背景圖片是否重復。可選值有：repeat(不斷重復), no-repeat(不重復), repeat-x(在x軸方向重復), repeat-y(在y軸方向重復).
background-attachment: 設置背景圖像是否固定還是隨內容滾動。可選值有：fixed(固定),scroll(滾動).
background-position: 設置背景圖片的位置。可選值有

<position><空格><position>: <position>可填：top, center, bottom; left, center, right.
<x-length><空格><y-length>: <length>可填像素值，表示將背景圖片移動多少像素。

自定義列表標志

列表標志就是（最簡單的例子是本行最前面那個黑點，那是無序列表的默認標志）。本例想要實現將自定義圖片變成列表標志。
下面的例子是從騰訊官網上摘錄下來的，那個圖片也是騰訊的。

效果：

分析：

很顯然那個標志是圖片，但是值得一提的是標志的源圖片如下所示：

這就需要我們使用background-image把這個作為列表項的背景圖片，然后利用background-position將指定的圖片移到適當的位置。

代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <style>
 7     li{
 8         list-style-type:none;
 9         background-image:url(icon.png);
10         background-repeat:no-repeat;
11         background-position:0px -272px;
12         padding-left:26px;
13     }
14 </style>
15 </head>
16 
17 <body>
18     <ul>
19         <li>國信辦將嚴打網絡淫穢色情及低俗信息</li>
20         <li>中央領導看望XXXXXX等老同志</li>
21         <li>春節期間我國將遇強冷空氣 局地降溫14℃</li>
22     </ul>
23 </body>
24 </html>

display常用屬性

block: 塊級元素。該元素前后都要換行（即獨占一行）。默認的塊級元素有<div>、<p>、<ul>、<ol>、<h1>~<h6>、<form>、<table>、<pre>、<dl>、<dt>、<dd>、<blockquote>等。
inline: 內聯元素（也稱行內元素）。默認的行內元素有<span>、<a>、<b>、<br>、<code>、<img>、<input>、<label>、<sub>、<sup>、<textarea>等。
none: 隱藏元素。即如果設置為此值，則該元素將不會被顯示，且不占空間。
inline-block: 該屬性兼備了內聯元素和塊元素的特點，在外面看來他像是內聯元素，因為他並不會另起一行，但是在內看來，他又像是塊元素，因為它能設置盒子模型的屬性。

關於塊級元素、內聯元素的區別：

塊級元素能夠設置盒子模型中的屬性，而內聯元素只能設置margin-left, margin-right, padding-left, padding-right.

inline-block去除間距

場景：我們需要實現一個導航欄。

問題：相鄰 inline-block 之間會有間隔。

效果：

代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>inline-block間隔</title>
 6 <style>
 7     #nav a{
 8         display:inline-block;     //設置inline-block后，相鄰會有間隔
 9         padding:4px;
10         width: 120px;
11         text-align:center;
12         background:#BEBEBE;
13         text-decoration:none;
14         font-family:'Microsoft YaHei', 微軟雅黑;
15         font-weight:bold;
16         font-size:20px;
17         color:white;
18     }
19     
20 </style>
21 </head>
22 <body>
23     <div id="nav">
24         <a href="#">HOME</a>
25         <a href="#">ARTICLES</a>
26         <a href="#">ABOUT</a>
27     </div>
28 </body>
29 </html>

那么怎么去除間隔呢？解決方法是在<style>標簽中加入：html{font-size:0px} 即可。

效果：

例子：垂直居中對齊

場景：這里我們實現一個404頁面。

效果：

分析：

頁面中其實只有一張用DIV包裹的404的圖片。
主要使用vertical-align實現頁面垂直居中。

原理圖：

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style>
 5             html,body{
 6                 height:100%;    /*高度撐滿*/
 7                 margin:0px;        /*頁邊不留空白*/
 8                 background:gray;
 9             }
10             #container{
11                 margin:0 auto;  /*水平居中*/
12                 height:100%;    /*高度撐滿*/
13                 width:500px;
14 
15             }
16             #image1{
17                 width:490px;
18                 margin:0 auto;
19                 vertical-align:middle;
20                 display:inline-block;
21             }
22             #dummyspan{
23                 width:0px;
24                 height:100%;
25                 display:inline-block;
26                 vertical-align:middle;
27             }
28         </style>
29     </head>
30     <body>
31         <div id="container">
32             <span id="dummyspan"></span>    <!--插入一個高度撐滿，寬度為0的虛擬元素-->
33             <a href="#"><img src="404錯誤.jpg" id="image1"></a>
34         </div>
35     </body>
36 </html>

position屬性

CSS 的 position 屬性值有static(默認值), relative, absolute, fixed。分為兩大類：positioned(relative,absolute,fixed)和unpositioned(static).
static: 默認值。表示該元素沒有被定位。
relative: 相對定位。如果將元素設置為相對定位，則可以通過設置 top, bottom, left, right 屬性使得該元素相對於正常位置偏離多少。
fixed: 固定定位。固定在視窗（即顯示屏）的某個位置，即不管你怎么滾動頁面，該元素總是在那個位置固定不動(像廣告，導航都使用了fixed)，可以通過設置 top, bottom, left, right 屬性設置相對視窗的位置。
absolute: 絕對定位。相對於最近的positioned祖先元素偏移(當該元素的父元素都不是positioned，則相對於body元素偏移)。通過設置 top, bottom, left, right 屬性設置偏移。
- 絕對定位可以這樣理解：HTML頁面是地面，絕對定位的元素則把它從文檔流中脫離出來，並且默認蓋在HTML頁面上面。本文章的右下角的目錄功能就是通過絕對定位實現。
- 當有多個absolute元素重疊時，怎么決定他們的上下關系，這就需要一個特殊的屬性：z-index，可以把他理解成這個絕對定位元素在第幾層。默認z-index=0，即該元素就蓋在地面上，z-index=-1則表示該元素在地面下面，z-index越高，則表示該元素在越高層。

案例：實現頂部導航

這個導航就是騰訊主頁的頂部導航：www.qq.com

效果：

代碼：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>頂部導航</title>
  6 <style>
  7     html{
  8         height:2000px;        /*為了體現導航是固定在頂端的，這里將頁面故意設的高一點*/
  9     }
 10     *{
 11         font-family: 'Microsoft YaHei', 微軟雅黑;
 12         font-size:12px;
 13         color:#666;
 14     }
 15     a{
 16         text-decoration:none;
 17         color:#666;
 18     }
 19     #nav{
 20         background-color:#fdfdfd;
 21         width: 100%;
 22         height: 28px;
 23         position:fixed;        /*固定布局*/
 24         top:0px;            /*固定的具體位置*/
 25         border-bottom: 1px solid #ebebeb;
 26     }
 27     #navInner{
 28         margin:0 auto;
 29         width:960px;
 30         height:100%;
 31         
 32     }
 33     #left{
 34         float:left;
 35         margin-top: 8px;
 36     }
 37     #mobileIcon{
 38         background-image:url(icon.png);
 39         background-repeat:no-repeat;
 40         padding-left:12px;
 41         margin-right: 11px;
 42     }
 43     #wap{
 44         margin-right: 10px;
 45     }
 46     #forIndex{
 47         margin:0px 12px 0px 10px;
 48     }
 49     #webmap{
 50         margin:0 10px 0 0;
 51         
 52     }
 53     #qqHelpLink{
 54         padding-right: 11px;
 55         background-image:url(icon.png);
 56         background-repeat:no-repeat;
 57         background-position:right -115px;
 58     }
 59     #right{
 60         float:right;
 61     }
 62     #onekey,#weibo,#qzone,#qmail,#dingyue,#ilike{
 63         background-image:url(loginall_1.5.1.png);
 64         background-repeat:no-repeat;
 65         height:28px;
 66         display:block;
 67         float:right;
 68     }
 69     #onekey{
 70         background-position: left -450px;
 71         width:70px;
 72     }
 73     #weibo{
 74         background-position: right -50px;
 75         width:30px;    
 76     }
 77     #qzone{
 78         background-position: right -100px;
 79         width:30px;
 80     }
 81     #qmail{
 82         background-position: right -150px;
 83         width:30px;
 84     }
 85     #dingyue{
 86         background-position: right -549px;
 87         width:30px;
 88     }
 89     #ilike{
 90         background-position: -76px -645px;
 91         width:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="nav">
 98         <div id="navInner">
 99             <div id="left">
100                 <a href="#" id="mobileIcon">手機新聞客戶端</a>
101                 <a href="#" id="wap">WAP版</a>
102                 |
103                 <a href="#" id="forIndex">設為首頁</a>
104                 <a href="#" id="webmap">網站地圖</a>
105                 <a href="#" id="qqHelpLink">幫助</a>
106             </div>
107             <div id="right">
108                 <a href="#" id="ilike"></a>
109                 <a href="#" id="dingyue"></a>
110                 <a href="#" id="qmail"></a>
111                 <a href="#" id="qzone"></a>
112                 <a href="#" id="weibo"></a>
113                 <a href="#" id="onekey"></a>                
114             </div>
115         </div>
116     </div>
117 </body>
118 </html>

頂部導航

案例：實現登錄界面

下面的例子本來使用Bootstrap來實現的，現在我們從零開始實現，這樣能夠充分回顧我們CSS學習的知識。

原地址：http://runjs.cn/detail/8z2mwcfa

效果：

分析：

第一步當然是用DIV布局。如圖：

布局完后，就是將內容填進去，並且設置好樣式即可。

代碼：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <style>
 7     html,body{
 8         height:100%;
 9         width:100%;
10         background-image:url(login_bg.PNG);    /*背景*/
11         font-family:"Microsoft YaHei UI";    /*默認字體是微軟雅黑*/
12     }
13     
14     #container{
15         width:480px;
16         height:100%;;
17         margin:0 auto;
18         vertical-align:middle;
19     }
20     #dummy{
21         width:0px;
22         height:100%;
23         vertical-align:middle;
24         display:inline-block;
25     }
26     #loginbox{
27         width:470px;
28         height:230px;
29         display:inline-block;
30         border-radius: 8px;        /*    實現圓角邊框 */
31         background:#F5F5F5;
32     }
33     #left{
34         width:55%;
35         height:230px;
36         float:left;
37     }
38     #right{
39         border-left: 1px solid #ccc;
40         width:43%;
41         height:230px;
42         float:left;
43     }
44     .nametxt{
45         width:220px;
46         height:30px;
47         margin-left:20px;
48         margin-bottom:15px;
49         border-radius:5px;
50         border: 1px solid #ccc;
51     }
52     #loginbtn{
53         width:62px;
54         height:30px;
55         color:white;
56         float:right;
57         margin-right:20px;
58         font-size: 14px;
59         padding: 4px 12px;
60         background-image: linear-gradient(to bottom,#08c,#04c);
61         border-radius: 4px;
62         border: 1px solid #bbb;
63     }
64     #registerbtn{
65         background-image: linear-gradient(to bottom,#fff,#e6e6e6);
66         padding: 4px 12px;
67         margin-bottom: 0;
68         width:62px;
69         height:30px;
70         font-size: 14px;
71         line-height: 20px;
72         border-radius: 4px;
73         border: 1px solid #bbb;
74         margin-left:8px;
75     }
76 </style>
77 </head>
78 <body>
79     <div id="container">
80         <span id="dummy"></span>
81         <div id="loginbox">
82             <form>
83                 <div id="left">
84                     <h2 style="font-size:20px;font-weight:normal;padding:10px 10px 10px 20px;">商戶登錄</h2>
85                     <input type="text" class="nametxt"/><br/>
86                     <input type="text" class="nametxt"/><br/>
87                     <input type="checkbox" style="margin-left:20px"> 下次自動登錄 <button id="loginbtn">登錄</button>
88                 </div>
89                 <div id="right">
90                     <h2 style="font-size:20px;font-weight:normal;padding:8px;">沒有賬戶 ？</h2>
91                     <div style="font-size:11px;padding:8px;line-height:18px">這里有一段文字啊，很多的文字啊，太多太多的文字了，主要可以介紹介紹注冊的好處和公司或者項目概況。。。</div>
92                     <button id="registerbtn">注冊</button>
93                 </div>
94             </form>
95         </div>
96     </div>
97 </body>
98 </html>

登錄界面

IE 6 雙倍margin的bug

問題：當對div設置浮動並且設置margin-left或margin-right為x時，在IE 6 下顯示的margin-left為2x.
解決方法：添加 _display:inline，因為_display只有IE才認識。

overflow屬性

該屬性決定內容溢出元素框時的處理方法。可選值有：
- visible: 默認值。如果溢出，則繼續顯示。
- auto: 如果溢出，則加入滾動條，否則正常顯示。
- scroll: 不管是否溢出，都加滾動條。
- hidden: 如果溢出，則隱藏溢出的區域。

單頁面設計

現在單頁面設計是一個趨勢，而且這種形式展現頁面更具有表現力。
定義：將頁面內容呈現在一個屏幕放得下的頁面或通過用戶像切換slides那樣切換頁面內容，無需用戶進行鼠標滾動等其他繁瑣動作。
頁面要求：簡潔、大方、炫、文字要少。
目的：吸引用戶、讓用戶一目了然地知道網頁的內容。
例子：http://www.adamwoodhouse.co.uk/

響應式設計

過去，我們通常會分別編寫電腦網頁和手機網頁，比如電腦網頁稱為：www.xiazdong.com，手機網頁稱為：wap.xiazdong.com。但隨着響應式設計的出現，這個格局被打破了。
定義：編寫了一個網頁，這個網頁能夠根據設備分辨率的改變自動調整。
好處：寫了一個網頁，在任何設備上顯示都過得去（有時候顯示的也不好看）。
框架：Bootstrap、Foundation等都是非常優秀的響應式頁面的前端框架。
原理：用三個步驟實現響應式設計
例子：http://www.ecnu.edu.cn/