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；
    //四個數字是按照切割圖片爲九宮格後的一個拉伸數值，需要具體操作體會