一些零散的CSS记忆
- 内阴影
box-shadow: inset 0 -5px -5px rgba(0,0,0,0.25);，加了inset是内阴影，没加是外阴影；第1个0表示x轴的偏移量；第2个参数表示Y轴偏移量，边框到偏移位置之间，全部是阴影起始颜色；第三个参数表示阴影半径；第4个参数表示阴影扩大与收缩，会影响第1个和第2个参数后的效果；rgba表示阴影颜色，也就是阴影开始的颜色，用#333F之类是一样的；参考 developer.mozilla.org/zh-CN/docs/…
- styled支持自带组件
const MyLayout = styled(Layout)
- label标签，增加了点击范围，用法比如
<label>用户名：
<input type="text" name="user">
</label>
- 批量生成标签
button{$}*16 然后tab
- 平均布局，这样，每个子元素间隔24Px，但是第一个子元素与父布局对齐
> ol{
margin: 0 -12px;
>li{
margin: 0 12px;
}
}
button{
font-family: inherit;
}
- 常见颜色，黑色柔和
#333, 灰色#666,
display: block;，宽度可以顶一整行，默认另一起行white-space: nowrap;，不换行- 获取焦点后的选择器,
outline是外边框，有点类似于border
:focus{
outline: none; // 去掉边框
}
- input的placeholder
<input type="text" placeholder={"在这里添加备注"}/>
- 内容居中
text-align: center;
- 布局在父布局居中 `margin: 0px auto
- 支出收入的UI，
::after表示伪元素，里面的content是必须的
>li{
width: 50%;
text-align: center;
padding: 16px 0;
position: relative;
&.selected::after{
content: '';
display: block;
height: 3px;
background: #333;
position: absolute;
bottom: 0px;
width: 100%;
left: 0;
}
}
- 内阴影
box-shadow: inset 0 -5px -5px rgba(0,0,0,0.25);，加了inset是内阴影，没加是外阴影；第1个0表示x轴的偏移量；第2个参数表示Y轴偏移量，边框到偏移位置之间，全部是阴影起始颜色；第三个参数表示阴影半径；第4个参数表示阴影扩大与收缩，会影响第1个和第2个参数后的效果；rgba表示阴影颜色，也就是阴影开始的颜色，用#333F之类是一样的；参考 developer.mozilla.org/zh-CN/docs/…
- 浮动定位
float: left;，父元素加 clearfix ，否则就不能包裹子节点
