::after ::before
rem
多个class属性的优先级
http://blog.csdn.net/u011320646/article/details/18152857
float
flex
- display 制定为flex布局
display: -webkit-flex; /* Safari */
display: flex;
display: inline-flex;
flex-direction属性决定主轴的方向
flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-flow
justify-content属性定义了项目在主轴上（横轴）的对齐方式
align-items在交叉轴（纵轴）上如何对齐
align-content
-
项目的属性
- flex:https://jingyan.baidu.com/article/c1465413e161700bfcfc4cf4.html
- flex-basis
display
overflow:overflow 属性规定当内容溢出元素框时发生的事情。
position
- fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动.
- sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
- relative
- absolute
- static
max-height, 最大高度，如果设置了height则不起作用,height代表固定高度，
top margin-top 等的区别。
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。
2、top这些在绝对定位的前提下，这个绝对定位，是相对body 或者 position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。
pading，会扩大控件的大小，但是如果是按钮，扩大的区域不在响应范围内
<button className="hover-button">
<a href="#" style={{color:'#000'}}>Vue</a>
</button>
.hover-button {
padding: 15px 32px;
}
后代选择器
后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。后代选择器用一个或者多个空格。
h1 em {color:red;}
//important 会显示红色
<h1>This is a <em>important</em> heading</h1>
//important 不会变色
<p>This is a <em>important</em> paragraph.</p>
类选择器
- 多类选择器
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
//同时具备font-weight font-style background三个样式
<p class="important warning">This paragraph is a very important warning.</p>
相邻兄弟选择器
h1 + p {margin-top:50px;}
子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
h1 > strong {color:red;}
//两个very 均会变成红色
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
//very不会变色
<h1>This is <em>really <strong>very</strong></em> important.</h1>
