[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
轮廓线偏移
