顏色值
在網頁中的顏色設置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有很多種：
1、英文命令顏色
前面幾個小節中經常用到的就是這種設置方法：
p{color:red;}
2、RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。如：
p{color:rgb(20%,33%,25%);}
3、十六進制顏色
這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。
p{color:#00ffff;}
配色表：
![]()
長度值
長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
1、像素
像素爲什麼是相對單位呢？因爲像素指的是顯示器上的小點（CSS規範中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）作爲單位。
2、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 爲 14px ，那麼 1em = 14px；如果 font-size 爲 18px，那麼 1em = 18px。如下代碼：
p{font-size:12px;text-indent:2em;}
上面代碼就是可以實現段落首行縮進 24px（也就是兩個字體大小的距離）。
下面注意一個特殊情況：
但當給 font-size 設置單位爲 em 時，此時計算的標準以 p 的父元素的 font-size 爲基礎。如下代碼：
html:
<p>以這個<span>例子</span>爲例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
結果 span 中的字體“例子”字體大小就爲 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）。
水平居中設置-行內元素
我們在實際工作中常會遇到需要設置水平居中場景，今天我們就來看看怎麼設置水平居中的。
如果被設置元素爲文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。如下代碼：
html代碼：
<body>
<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>
</body>
css代碼：
<style>
div.txtCenter{
text-align:center;
}
</style>
水平居中設置-定寬塊狀元素
當被設置元素爲塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值爲“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：
html代碼：
<body>
<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
css代碼：
<style>
div{
border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
width:500px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>
也可以寫成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以隨意設置的。
水平居中總結-不定寬塊狀元素方法（一）
在實際工作中我們會遇到需要爲“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因爲分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：
- 加入 table 標籤
- 設置 display;inline 方法
- 設置 position:relative 和 left:50%;
這一小節我們來講一下第一種方法：
第一步：爲需要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。
第二步：爲這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代碼：
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
水平居中總結-不定寬塊狀元素方法（二）
第二種方法：改變塊級元素的 dispaly 爲 inline 類型，然後使用 text-align:center 來實現居中效果。如下例子：
html代碼：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代碼：
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的嵌套深度，但也存在着一些問題：它將塊狀元素的 display 類型改爲 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
水平居中總結-不定寬塊狀元素方法（三）
方法三：通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
代碼如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代碼：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不添加無語議表標籤，不增加嵌套深度，但它的缺點是設置了 position:relative，帶來了一定的副作用。
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
垂直居中-父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。如下代碼：
<div class="container">
hi,imooc!
</div>
css代碼：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
垂直居中-父元素高度確定的多行文本（方法一）
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
說到豎直居中，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素爲 td 或 th 時，纔會生效。所以又要插入 table 標籤了。下面看一下例子：
html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代碼：
table td{height:500px;background:#ccc}
因爲 td 標籤默認情況下就默認設置了 vertical-align 爲 middle，所以我們不需要顯式地設置了。
垂直居中-父元素高度確定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell，激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式。
html代碼：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代碼：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
這種方法的好處是不用添加多餘的無意義的標籤，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7。
隱性改變display類型
有一個有趣的現象就是當爲元素（不論之前是什麼類型元素，display:none 除外）設置以下 2 個句之一：
- position : absolute
- float : left 或 float:right
元素會自動變爲以 display:inline-block 的方式顯示，當然就可以設置元素的 width 和 height 了且默認寬度不佔滿父元素。
如下面的代碼，小夥伴們都知道 a 標籤是行內元素，所以設置它的 width 是 沒有效果的，但是設置爲 position:absolute 以後，就可以了。
<div class="container">
<a href="#" title="">進入課程請單擊這裏</a>
</div>
css代碼
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
