【前端技术】一篇文章搞掂：CSS

Flex布局

Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

/*父容器，设置弹性布局*/
.parent{display: flex;}
/*设置父容器主轴方向*/
.parent{  flex-direction: row | row-reverse | column | column-reverse;}

/*设置内容放大比例，0为有剩余空间也不放大，默认0*/
.item {flex-grow: <number>; }
/*设置内容缩小比例，0为剩余空间不足也不缩小，默认0*/
.item {flex-shrink: <number>; }

相连DIV边框重复

.border{
    margin-right:-1px;
    margin-bottom:-1px;
}

百分百宽度减去固定宽度

box-sizing:border-box;
border-left:100px solid transparent;

inline-block并排后

父容器下方多出间距

width: 300rpx;
display: inline-block;
vertical-align: bottom;