css学习记录

大多数浏览器的前缀包括：

-moz- : Firefox
-webkit- : Safari & Chrome
-o- : Opera
-khtml- : Konqueror
-ms- : Internet Explorer
-chrome- : Google Chrome专用前缀
Inline-block

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

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

vertical-align

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

box-sizing：border-box,padding-box,content-box.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

标准盒子模型：width指内容

BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）

直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
1，BFC区域不会与float box重叠

2，BFC是页面上的一个独立容器，子元素不会影响到外面

3，计算BFC的高度时，浮动元素也会参与计算

那些元素会生成BFC：

根元素

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption，flex，inline-flex的元素

overflow不为visible的元素

使元素消失的方法有哪些？

1. opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

提示：在 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: <number>; /* default 0 */
}

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

flex-basis .item {
  flex-basis: <length> | 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