CSS3学习（六）盒子、背景、边框新样式

盒子样式

一、display属性
包含值有

    ①block          //块状显示，占一行
    ②inline         //行内显示，不换行
    ③inline-block   //内联行内显示，且可设置宽度
    ④对于table还有一个 inline-table 值
    ⑤list-item      //可以将div变成像list一样的竖直列表显示
    ⑥flex           //弹性盒子的容器属性

二、overflow属性
包含值有

    ①hidden         //隐藏溢出内容
    ②scroll         //可以滚动显示
    ③auto           //自动添加水平或竖直滚动条
    ④visible        //默认的值，显示溢出内容

    另外有 overflow-x  和 overflow-y属性，原理类似

三、box-sizing属性
包含值有

    ①border-box     //元素尺寸包括边框
    ②content-box    //元素尺寸不包括边框，边框尺寸不计入盒子宽高中

四、border-radius：左上角值 右上角值 右下角值 左上角值； （可以分别设置四个圆角值）

背景样式

一、background-clip属性
包含值有

    ①border-box     //背景填充包含边框
    ②padding-box    //背景填充不包含边框
    ③content-box    //背景填充只包含内容
    clip是修建的意思

二、background-origin属性
包含值有

    ①border-box     //背景从边框定点开始填充
    ②padding-box    //背景从padding处开始填充
    ③content-box    //...
    origin是起源的意思

三、background-image：url(“图片1地址”),url(“图片2地址”)…

background-repeat：repeat-x//水方向重复添加背景图；
no-repea                  //不重复填充背景图

边框新样式

使用图像边框
border-img属性，语法是：

    -web-border-image:url("图片地址") 50 50 50 50；
    //四个数字是按照切割图片为九宫格后的一个拉伸数值，需要具体操作体会