学习前端第十一天（精灵图，三角形扇形，弹性布局）

一、弹性布局

适合用来给页面布局，方便轻松

组成：一个container包裹若干个item

1、container属性

display：flex  确保容器内的项目按弹性布局

flex-direction：设置主轴方向；flex-wrap：是否换行

flex-flow：direction和wrap的简写

justify-content：主轴上项目的排列方式

align-item：交叉轴上项目的排列方式

align-content：多轴线对齐方式

二、精灵图的使用

精灵图优点：减少网页的http请求，提升网页整体性能，减轻服务器的负担；

                      减少图片的字节，把几张图片合成1张字节总小于3张图片的字节总和

精灵图缺点：Sprites 在开发的时候相对有点麻烦，需要借助 photoshop 或其他工具来对每个背景                        单元测量其准确的位置；

                      在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空                          间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景                          不够宽，很容易出现背景断裂；

                      维护方面：Sprites 维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并                        的图片，无需改的地方尽量不要动，这样避免改动更多的 CSS ，如果在原来的地方                        放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动 CSS 。

使用方法：先确定宽高，用background-image：url（）引用精灵图，确定图片所需部分的位置，然后用background-position：？px  ？得到所需要部分。

三、三角形扇形

1、三角形：

用边框得到一个由四个分布在上下左右的三角形，设置颜色为transparent（透明），然后根据需求，用border-top/bottom/left/right-color改变所需位置的三角形颜色

2、扇形

同三角形，只需要加border-radius=10px即可