#路由总结

##路由的构成及实现原理 根据需求给每个组件添加一个可以导航到该组件的router, 通过AppModule来创建需要的router的路径和对应的组件 routers=[ {path:"“,对应的组件的类名},{},{},{}.....] （如果路径为空那么他默认是首页） 然后通过 RouterModule.forRoot 方法来配置路由器， 并把它的返回值添加到 AppModule 的 imports 数组中。

##路由的链接 直接输入地址即可导航到对应的组件中，但是为了方便用户更好的 实现交互，通过点击事件来完成。 任意标签内添加routerLink属性输入对应的值（路径）即可， 当对应的值为变量时，需要添加中括号：[routerLink]， 两种写法： <a [routerLink]="'/award/'+index+'/'+indexa"> PS:注意相对地址和绝对地址的区分及写法

##当前激活的路由 通过ActivatedRoute获取路由的参数和路径来进行下一步的 导航 #css样式 ##margin margin标记可以带一个、二个、三个、四个参数，各有不同的含义。 在css中使用margin可以将margin-top，margin-right， margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。 margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20px；左、右40px；下60px。） margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。） ##box-sizing content-box，border和padding不计算入width之内 padding-box，padding计算入width内 border-box，border和padding计算入width之内 ##justify-content 设置弹性盒子元素在主轴（横轴）的对齐方式。 1.flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐， 后面的元素接着第一个元素进行排列 2.flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。 3.center：整体居中显示。 4.space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的 边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目 则平均分布，并确保两两之间的空白空间相等。 5.space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的 一半。 ##横竖屏 @media screen and (orientation: portrait) { /* 竖屏 / } @media screen and (orientation: landscape) { / 横屏 */ } ##背景图设置 background-image: url('图片地址')/background:url(图片地址) background-size 属性： 可以是绝对值，例如像素值 background-size:100px auto 宽度100px，高度根据图片纵横比自动匹配 也可以是百分比 contain 这个值会根据元素的大小，保留原始纵横比拉伸 corver 图像的高度适应元素的高度，保留纵横比，宽度可能超出 ###background-repeat背景平铺方式 属性： repeat：默认值，图像在水平方向和垂直方向都重复以填满容器 repeat-x：图像只在水平方向重复以填满容器 repeat-y：图像只在垂直方向重复以填满容器 space：图像向两端对齐重复以填满容器，多余空间用空白代替 round：图像向两端对齐重复以填满容器，多余空间通过图像拉伸来填充 no-repeat：不重复，图像只显示一次 ###绝对定位 position:absolute 相对于整体的绝对定位；通过设置top、buttom、left等定位 外层添加position:relative 相对于当前外层的块设置绝对位置，跟大背景无关 ###圆角设置 四个圆角：border-radius 单个圆角： 　　* border-top-left-radius 　　* border-top-right-radius 　　* border-bottom-right-radius 　　* border-bottom-left-radius ###超出部分隐藏 overflow:hidden