CSS相关

::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>