[TOC]
## CSS 筆記
### position
| | |
| - | - |
| static | **默認值**。沒有定位，元素出現在正常的流中。<br/>忽略 top, bottom, left, right 或者 z-index 聲明。 |
| fixed |生成絕對定位的元素，**相對于瀏覽器窗口** 進行定位。<br/>元素的位置通過 `left`, `top`, `right` 以及 `bottom` 屬性進行規定。 |
| absolute |生成絕對定位的元素，**相對于 static定位以外的第一個父元素** 進行定位。<br/>元素的位置通過 `left`, `top`, `right` 以及 `bottom` 屬性進行規定。 |
| relative | 生成相對定位的元素，**相對于其正常位置** 進行定位。<br/>元素的位置通過 `left`, `top`, `right` 以及 `bottom` 屬性進行規定。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
### box-shadow
```css
box-shadow: h-shadow v-shadow blur spread color inset;
```
| | | |
|-|-|-|
|h-shadow |必需|水平陰影的位置。允許負值。|
|v-shadow |必需|垂直陰影的位置。允許負值。|
|blur |可選|模糊距離。 |
|spread |可選|陰影的尺寸。|
|color |可選|陰影的顏色。請參閱 CSS 顏色值。|
|inset |可選|將外部陰影 (outset) 改為內部陰影。|
```css
/* demo */
-moz-box-shadow: 1px 1px 5px #888 outset; /* 老的 Firefox */
box-shadow: 1px 1px 5px #888 outset,
5px 5px 5px #999 outset;
```
> javascript
```javascript
object.style.boxShadow="10px 10px 5px #888888"
```
### font-smoothing
讓字體變得更好看，mac os 有效。
### white-space
設置如何處理元素內的空白。
|||
|-|-|
|normal |默認。空白會被瀏覽器忽略。 |
|pre |空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。|
|nowrap |文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。|
|pre-wrap |保留空白符序列，但是正常地進行換行。|
|pre-line |合并空白符序列，但是保留換行符。|
|inherit |規定應該從父元素繼承 white-space 屬性的值。|
### background
#### background-clip
規定背景的繪制區域
```css
background-clip: border-box|padding-box|content-box;
```
|||
|-|-|
|border-box |背景被裁剪到邊框盒。 |
|padding-box |背景被裁剪到內邊距框。|
|content-box |背景被裁剪到內容框。|
#### background-size
```css
background-size: length|percentage|cover|contain;
```
* length: width px, height px;
* percentage: 父元素的百分比 width height[auto]
* cover: 圖像完全覆蓋背景區域
* contain: 拉伸
### transform
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
### transform-style
規定如何在 3D 空間中呈現被嵌套的元素。
* flat 子元素將不保留其 3D 位置。
* preserve-3d 子元素將保留其 3D 位置。
### display
## 定位
### vertical-align
行內元素之間的垂直對齊方式.
* baseline: **默認**。元素放置在父元素的基線上。
* sub: 垂直對齊文本的下標。
* super: 垂直對齊文本的上標
* top: 把元素的頂端與行中最高元素的頂端對齊
* text-top: 把元素的頂端與父元素字體的頂端對齊
* middle: 把此元素放置在父元素的中部。
* bottom: 把元素的頂端與行中最低的元素的頂端對齊。
* text-bottom: 把元素的底端與父元素字體的底端對齊。
* length:
* %: 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
* inherit: 規定應該從父元素繼承 vertical-align 屬性的值。
## 2D/3D 轉換屬性（Transform）
### transform 向元素應用 2D 或 3D 轉換。
### transform-origin 允許你改變被轉換元素的位置。
### transform-style 規定被嵌套元素如何在 3D 空間中顯示。
### perspective 規定 3D 元素的透視效果。
### perspective-origin 規定 3D 元素的底部位置。
### backface-visibility 定義元素在不面對屏幕時是否可見。
## 過渡屬性（Transition）
### transition 簡寫屬性，用于在一個屬性中設置四個過渡屬性。
### transition-property 規定應用過渡的 CSS 屬性的名稱。
### transition-duration 定義過渡效果花費的時間。
### transition-timing-function 規定過渡效果的時間曲線。
### transition-delay 規定過渡效果何時開始。
## 用戶界面屬性（User-interface）
### box-sizing
盒模型
```css
box-sizing: content-box|border-box|inherit;
```
* content-box: width, height設置內容寬高.
* border-box: width, height 設置border寬高.
### outline
輪廓線
* 輪廓不占用空間
* 輪廓可能是非矩形
### outline-offset
輪廓線偏移
