css中的常用关键属性

牢记Html\Css\js才是前端的三大基石。多重视基础然后才去研究上层建筑（Vue、React、webpack）
//css弹性布局
display:flex; //父级元素设置flex可以调节子元素的位置

*align-items:flex-start | flex-end | center | baseline（项目的第一行文字的基线对齐） | stretch（默认：如果项目未设置高度或设为auto，将占满整个容器的高度） //项目在交叉轴的对齐方式

*justify-content:flex-start | flex-end | center | space-between | space-around; //项目在主轴的对齐方式

align-content:flex-start | flex-end | center | space-between | space-around | stretch //定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

flex-driection:row（默认值，主轴为水平方向，起点在左端） | row-reverse | column（主轴为竖直方向起点在上沿） | column-reverse;
flex-wrap:nowrap（默认不换行） | wrap（换行，第一行在上方） | wrap-reverse（换行第一行在下方）; //若一条轴线排不下时，是否换行

flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex:1; //是flex-grow、flex-shrink和flex-basis属性的简写
/*
flex-grow: 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis：项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
*/

行内元素使用flex布局：
display:inline-flex;

---------------------------------分割线-----------------------------------------------------------------------------------------------
盒模型：分为IE盒模型和标准盒模型
IE盒模型：width=border+padding+content
一个盒子的宽度=width+margin
标准盒模型（w3c）：width=content
一个盒子的宽度=width+padding+border+margin
转换方式：
box-sizing：content-box; //W3C盒模型，（default）
box-sizing: border-box; //ie盒模型 常用于宽高固定，使用padding撑大内边距从而达到缩小内容（content）的效果