背景

background-origin: 背景图片起始位置

指定背景图片中显示的原点

padding-box padding-box 包含padding content

border-box border-box 包含 border padding content

content-box

background-attachment: fixed 固定在窗口

background-clip: background-clip: 背景剪裁

padding-box: padding以外部分背景剪裁掉

content-box: content以外部分背景剪掉

border-box: border以外部分背景图剪掉

background-size: 背景图尺寸百分比占元素的百分比

cover属性: cover属性:将背景图等比缩放到完全覆盖容器背景图可能超出容器

contain: contain:将背景图等比缩放到宽或高与容器的宽或高相等背景图始终被包含在容器内

弹性盒模型

1.W3C标准盒模型（元素空间尺寸）

外盒尺寸计算（元素空间）

element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距

element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距

内盒尺寸计算（元素大小）

element 高度 = 内容高度 + 内边距 + 边框（height为内容高度）

element 宽度 = 内容宽度 + 内边距 + 边框（width为内容宽度）

2.IE6传统下盒模型（IE6一下，不包含IE6版本或“QuirksMode下IE5.5+”）

外盒尺寸计算（元素空间尺寸）

element 空间高度 = 内容高度 + 外边距（height包含了元素内容高度、内边框、内边距）

element 空间宽度 = 内容宽度 + 内边距 + 外边框 + 外边距（width包含了元素内容宽度、外边框、内边距）

内盒尺寸计算（元素大小）

element 高度 = 内容高度（height包含了元素内容高度、内边框、内边距）

element 宽度 = 内容宽度（width包含了元素内容宽度、外边框、内边距）

display: flex; 将对象作为弹性伸缩盒显示

<style>
    #content{
        width: 600px;
        height: 300px;
        border: 1px solid #000;
        display: flex;
    }
    .div1{
        width: 100px;
        height: 100px;
        background: pink;
    }
    .div2{
        width: 200px;
        height: 100px;
        background: blue;
    }
    .div3{
        width: 300px;
        height: 100px;
        background: red;
    }
    <div id="content">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</style>

flex-grow: 占父元素剩余空间比例

 #content{
            width: 600px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
        }
        .div1{
            /* width: 100px; */
            height: 100px;
            background: pink;
            flex-grow: 5;
        }
        .div2{
            /* width: 200px; */
            height: 100px;
            background: blue;
            flex-grow: 7;
        }
        .div3{
            /* width: 300px; */
            height: 100px;
            background: red;
            flex-grow: 1;
        }

justify-content:space-aroud 两元素间距相等距父容器距离相等

 #content{
        width: 600px;
        height: 300px;
        border: 1px solid #000;
        display: flex;
        justify-content: space-around;
    }
    .div1{
        width: 100px;
        height: 100px;
        background: pink;
 
    }
    .div2{
        width: 100px;
        height: 100px;
        background: blue;
     
    }
    .div3{
        width: 100px;
        height: 100px;
        background: red;
 
    }

背景及伸缩盒

背景

弹性盒模型