第八章：CSS3基础---背景属性、锚点、雪碧图/精灵图/css sprites/图片整合技术、c3盒子模型属性、c3弹性盒

<1..背景属性>

    1. 背景色 background-color

    2. 背景图 background-image:url()

    3. 背景图重复 background-repeat

    4. 背景图位置 background-position:0 0;

    5. 背景图固定 background-attachment:scroll(滚动)/fixed(固定)

    6. 背景图大小 background-size:宽度 高度;

        - 数值px

        - 数值%

        - cover: 图片不断的拉伸，直到覆盖到整个容器，可能会出现背景图显示不全的情况

        - contain:图片不断的拉伸，碰到容器的底部或者右侧边缘的时候，会停止拉伸，可能会出现容器有留白的情况

    7. 背景图的显示位置 background-origin:

        - padding-box 从padding区域开始显示,默认值

        - border-box 从border区域开始显示

        - content-box 从内容区开始显示

    8. 背景图/背景色裁切的位置 backgroud-clip

        - border-box 从border区域外开始被裁切

        - padding-box 从padding区域外被裁切

        - content-box 从内容区域外被裁切

    复合写法 background:背景色 背景图 背景图重复 背景图位置/背景图大小 背景图固定

<2..锚点>

在页面中实现不同板块之间的跳转

    1. 超链接 <a href="#id名"></a>

    2. 板块的id名<div id="名"></div>

<3..雪碧图/精灵图/css sprites/图片整合技术>

    1. 必须结合背景图属性

    2. 要结合背景图位置background-position

优点

    1. 图片体积小

    2. 减少图片请求次数

<4..c3盒子模型属性>

    标准盒模型(w3c盒模型) width指的是内容区的宽

        box-sizing:content-box;

        盒子总宽 = width+padding左右+border的左右

    怪异盒模型(ie盒模型)  width指的是内容区的宽+padding左右+border的左右

        box-sizing:border-box;

        盒子总宽 = width

    作用:

        1. 有宽高的容器上加了padding或者border把盒子撑大了,如果不想被撑大的话,可以设置成怪异盒模型

        2. 给元素加了边框之后，浏览器缩小后盒子大小会更改，浮动的话，宽度变大最后一个会掉下来,给该元素添加怪异盒，让其不受边框的影响

<5..c3弹性盒>

    父容器

       形成弹性盒子: display:flex/inline-flex;

       子元素在主轴的位置 justify-content:

            flex-start 主轴起点

            flex-end 主轴终点

            center 主轴中心

            space-between 两端对齐

            space-around 中间的留白是两端的2倍

            space-evenly 平均分配

        子元素在交叉轴(侧轴)的位置 align-items

            stretch 拉伸,默认值,当不设置子元素高的时候，会拉伸的和父元素一样高

            flex-start 交叉轴起点

            flex-end 交叉轴终点

            center 交叉轴中心

        主轴方向 flex-direction

            - row 默认从左到右

            - row-reverse 从右到左

            - column 从上往下

            - column-reverse 从下往下

        换行 flex-wrap:nowrap(默认不换行)/wrap(换行)

            - 子项宽度/高度如果超出整个父容器，子项宽度/高度会被压缩，如果不想被压缩，而且像产生换行的效果

        多行/多列元素在交叉轴的位置 align-content

            - stretch 拉伸,默认值,

            - flex-start 交叉轴起点

            - space-between 交叉轴两端

            - space-around 交叉轴中间的留白是两端的2倍

            - space-evenly 交叉轴平均分配

            - center 交叉轴中心

    子元素

    调整某个子元素在交叉轴的位置 align-self

        stretch 拉伸,默认值,当不设置子元素高的时候，会拉伸的和父元素一样高

        flex-start 交叉轴起点

        flex-end 交叉轴终点

        center 交叉轴中心

    子项的排列顺序 order:数值;

        - 值越大，越在后面

        - 可以为负数

    子项放大 flex-grow:0(默认不放大)/数值;

    子项压缩 flex-shrink:1(默认压缩)/0(不压缩)

    子项宽度 flex-basis:auto(width是多少该值就是多少)数值px;

    复合写法 flex:子项放大(0) 子项压缩(1) 子项宽度(auto); 有顺序

    flex-grow:1; 子项占满父元素整个剩余空间

    flex:1; 子项占满父元素整个剩余空间

弹性盒实现水平垂直居中1

    父容器{

        display: flex;

        justify-content: center;

        align-items: center

    }

弹性盒实现水平垂直居中2

    父容器{

        display:flex;

    }

    子元素{

        margin:auto

    }