[type=text] 与 .invalid 优先级一样
IE9以下不支持linear-gradient
outline比较border而言不占位置
disabled在IE6也可以使得input不可输入
缩进2字符:
text-indent: 2em;
使用很大的line-height实现文字隐藏:
line-height: 100px;
设置最大高度，超过则出现滚动条:
max-height: 80px;
overflow: auto;
垂直对齐使用 vertical-align，只应用于inline level, inline-block level 及 table-cells 元素上。
hsl:
svg中设置
fill:'hsl(72deg,1,.37)'
css中设置
background: hsl(72,100%,37%);
div:after 相当于在div里加入一个标签，放到最后，content设置内容。before放到最前。
white-space控制空格以及是否换行:
normal (默认)多个空格合并为一个，自动换行，但是回车不换行
nowrap 多个空格合并为一个，不换行（除非<br/>）
pre 保留空格，回车换行
pre-line 多个空格合并为一个，自动换行，回车换行
pre-wrap 保留空格，自动换行，回车换行
word-wrap:
normal （默认）
break-word 连续字母切断换行
https://developer.mozilla.org/zh-CN/docs/CSS/Understanding_z-index/The_stacking_context
形成条件：
默认
block:
div
p
h1 h2 h3 h4 h5 h6
table
fieldset
form
ul - 非排序列表
ol - 排序表单
dl - 定义列表
blockquote - 块引用
hr - 水平分隔线
address - 地址
pre - 格式化文本
inline:
a
span - 常用内联容器，定义文本内区块
em - 强调
i - 斜体
br - 换行
img - 图片
input - 输入框
textarea - 多行文本输入框
label - 表格标签
sub - 下标
sup - 上标
big - 大字体
small - 小字体文本
strong - 粗体强调
abbr - 缩写
acronym - 首字
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
脱离文档流的方法:
float:left/right
postion:absolute/fixed
从性能上看，将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在， 而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。 所以如果是制作js动画等，用absolute或者fixed定位会更好。
不推荐用position来布局整个页面的大框架，而推荐用float或者文档流的默认方式。
取代float方式布局:
display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;
yui grid: http://yui.yahooapis.com/3.3.0/build/cssgrids/grids.css
inline-block 前世今生: http://ued.taobao.com/blog/2012/08/15/inline-block/
position:absolute中的width，height是相对父relative来定义的
inline-block 内部像block，可以设置width, height, padding, border与margin。 外部的排列方式像行内元素，即水平排列，而不是像块级元素一样从上到下排列
相同点： 内部表现为块级元素，水平排列
区别：
解决空白问题：
使用场景： 如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。
最常用:
overflow:hidden //触发BFC
*zoom:1 //IE6中触发hasLayout
因为CSS的模型和术语脱胎于传统排版，故而与计算机GUI技术通常基于组件的模型相差甚远。 除了float之外，另一个例子是CSS中上下margin的collapse，显然这是为了满足段落排版的需求。 所以像float、margin collapse等，在典型的GUI技术中是没有的。 还有，CSS box model中，width/height不算入padding和border，这实际上是GUI的控件思维与CSS排版思维的冲突。 这个冲突在浏览器技术实现上的遗迹就是IE臭名昭著的“hasLayout”。 元素“has layout”的真实意思是这样的元素直接对应一个控件。 也正是由于IE很naive的在实现中直接结合了这两种矛盾的模型，从而导致了无数的布局bug。
CSS 101: Block Formatting Contexts: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts
产生条件：
效果：
位于相同BFC中的相邻block boxes会对vertical margins折叠. 消除方法:
overflow:hidden;*zoom:1
或者设置 border or padding
更加直观地了解hasLayout和BFC: http://www.w3ctech.com/p/1101
On having layout: http://www.satzansatz.de/cssd/onhavinglayout.html
默认拥有layout的元素:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
属性触发:
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （非标准，推荐使用）
writing-mode: tb-rl
#IE7可以使用
overflow: hidden|scroll|auto
overflow-x|-y: hidden|scroll|auto
position: fixed
min-width: any value
max-width: any value other than 'none'
min-height: any value
max-height: any value other than 'none'
layout元素设置display: inline 相当于通常意义上的inline-block
1.清浮动环绕
左右定宽，中间自适应:
左float:left, 右float:right, 中间overflow:hidden来BFC
当然也可以不用:
//左中定宽，右自适应
左中float:left，右margin-left
左图右文，文字不环绕图:
左float:left, 右BFC
父元素中设置，避免内部元素的float影响外面的元素:
.outer{
overflow:hidden;
*zoom:1;
}
当然也可以不用BFC:
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
*height: 1%;//IE6，7
}
父元素设置，使得嵌套元素的margin都能够奏效， 如果不设置的话会将嵌套元素边距折叠为最大的:
.div1{
overflow:hidden;
*zoom:1;
margin:20px;
background:yellow;
}
.div2{
width:50px;
height:50px;
margin:50px;
background:red;
}
1.触发haslayout的元素是可以设置宽高的，而触发BFC的元素不一定可以设置宽高 比如一个行内元素，设置float或者设置overflow都可以触发BFC，但是前者可以设置宽高，后者却不能
2.hasLayout的元素设置display:inline后与inline-block行为类似, 用来解决IE6/7下inline-block问题:
display:inline-block;
*display:inline;
*zoom:1;
button 有默认的margin:2px
HTML5 Doctype下，如果div包含img，div会自动增加4px的bottom margin:
原因：这是为了方便在div中直接添加text
解决方法：div设置line-height:0; 或者 img设置display:block;
合并顺序:
base
-- core 最核心不变的
-- accordion
-- ...
-- tooltip
theme 易变，特别指定
font-family, font-size,
ui-widget-content -- border, background, color, font-weight
-header
state, corner, overlay, shadow
css如果为一个元素指定多个class，其优先级取决于css文件中的定义顺序，后定义的会覆盖前面定义的。与class的书写顺序无关
class顺序与实际样式表顺序一致，方便查询
开发顺序：
.badge比.label边角更圆一些
.hero-unit显示页面主要内容，里面的h1，p等都调大了
.page-header用于显示标题，有下边线
h1>small显示补充信息
.thumbnails用于图片展示，产品简介等，ul > li即可
其中的li如果设置.span3会使得img按比例缩放
.thumbnail使用border-radius设置圆角，box-shadow设置立体感，padding使得img留有白边。
.progress-striped使用gradient来实现斜条纹，可使用工具 http://www.colorzilla.com/gradient-editor/
关闭按钮:
<a class="close" href="#">×</a>
background-clip 和 background-origin用来确定背景的定位
btn心跳闪烁:
@-webkit-keyframes downloadButton {
from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
to { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
}
@-moz-keyframes downloadButton {
from { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 25px rgba(0,68,204,.9); }
to { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 0 2px 10px rgba(0,68,204,.5); }
}
.btn {
-webkit-animation-name: downloadButton;
-moz-animation-name: downloadButton;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}
.leftHalf{ width: 50%; float: left}
.rightHalf{ width: 50%; float: left }
@media (max-width: 320px){
.leftHalf{ width: 100%; color: red; }
.rightHalf{ width: 100%; color: blue; }
}
box-sizing: border-box 简化width的计算
768px为分隔
row:
.row 整行
width: 100%; //窄屏100%宽度
max-width: 62.5em; //宽屏固定大小
margin: 0 auto; //居中
嵌套row（.row .row ）
width: auto;
max-width: none;
左右margin补偿columns的padding
columns:
行中的列需要.columns，一行12列，如果超出12则显示为下一行
position: relative; //为定位准备
float: left; //左浮动
有左右padding
如果设置了多个column，最后一个右浮动。即如果不满足12实现两端浮动效果
[class*="column"] + [class*="column"]:last-child {
float: right;
}
.large-* 设置宽屏中比例，如果只设large-*则窄屏中显示为整行
.small-* 设置窄屏中比例，如果只设small-*则宽屏中也按该比例显示
百分比宽度
.show-for-small 在窄屏中显示
.hide-for-small 在宽屏中显示
如果不设置则宽屏窄屏中都显示
.large-offset-* 和 .small-offset-* 通过margin-left进行偏移
small-centered 窄屏中整行居中，宽屏中无居中效果，也没有偏移
large-centered 宽屏中整行居中，窄屏中无效
.push-* 宽屏中通过设置百分比left将元素推向右边
.pull-* 宽屏中通过设置百分比right将元素拉向左边