css

css透明兼容所有浏览器

.demo{
	filter:alpha(opacity=50);  
	-moz-opacity:0.5;  
	-khtml-opacity: 0.5;  
	opacity: 0.5;
	}

Inline-block
和block区别主要是不换行，内容位置底部与同行内联元素底部平行
Inline
上下内容紧贴，padding border四周都可以设置 margin只能设置两边
line-height无效，父元素高度默认为内容高度，左右外边距不合并，inline-block也是
background
包括内容与padding
Float
浮动元素之间通过外边距边界相贴
默认宽度为内容宽度

Margin
当width没有设置，则左右上有效
若设置了width 则左上有效
vertical-align

和text-align直接作用与文本或内联元素，通过值middle可设置垂直居中

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

“first-letter” 伪元素只能用于块级元素。

flex布局

display: flex|inline-flex;
flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <‘flex-direction’> || <‘flex-wrap’>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
子元素属性
Order .item {
order: < integer>;
}

flex-grow .item {
flex-grow: ; /* default 0 */
}

flex-shrink .item {
flex-shrink: ; /* default 1 */
}

flex-basis .item {
flex-basis: | auto; /* default auto */
}

flex
.item {
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
align-self
通过设置某个子元素的align-self属性，可以覆盖align-items所设置的对齐方式。属性值与align-items中的意义相同，不再赘述。

Stylus

&指向最近的选择器

&指向textare

textare
color #afafaf
&:hover
color #000
^ [N]N是数字，0代表第一个级别,最后一个级别是&
.foo
.bar
width: 10px
^ [1]
width: 20px
^ [0]指向.foo
^ [1]指向.bar
• 父子关系用 >表示
• 4.伪类元素用 & 表示其宿主元素
• 5.属性写在前, 嵌套子元素样式写在后
• 6.分组选择器用相同缩进即可, 如 +a +span +span
1.想将assets/css目录下的所有.styl文件编译成css怎么办？
stylus -c assets/css/
2.只想将assets/css/index.styl 编译成assets/css/index.css？
stylus -c assets/css/index.styl assets/css/index.css
3.想将assets/css/index.css 编译成assets/css/index.styl？
stylus -C assets/css/index.css