css盒子模型說明以及實例

一、什麼是盒子:

    1.盒子模型也叫框模型,頁面上的一切元素,都可以看作是盒子

    2.盒子是元素的容器,也是元素的載體,說人話就是,盒子是元素的家

二、盒子的種類與功能:

    1.元素有二種:塊元素和行內元素,所以他們對應的家:盒子,當然也有二種:塊級盒子,行內盒子

    2.塊級盒子通常當作其它元素的容器,行內盒子中總是放內容,通常行內盒子放在區塊級盒子中

三、盒子的排列方式:

    1.盒子是頁面上的排列順序,由總調度師:文檔流說了算,除非盒子離家出走,脫離了文檔流

    2.文檔流既是元素排列的方式,又是排列的動作,所以既是名詞也是動詞

四、盒子模型的組成部分:

#    1.因為盒子大多做元素容器使用,所以我們主要以塊級盒子為例進行介紹

    2.盒子的四大組成部分:content(內容),padding(內邊距),border (邊框),margin(外邊距)

五、我們用四大美女來快速記憶盒子模型:

    1.content內容: 我們自己的老婆或女朋友,這是看得見,摸得著的東西

    2.padding內邊距:它是透明的,就像你老婆的閨蜜,時刻影響著你和老婆的關係

    3.border邊框:它是可見的,它變化多端,風情萬種,最撩人最風騷,就像你的紅顏知己,夢中情人或小情人

    4.margin外邊距:和padding內邊距一樣也是透明的,就像老大的女人,哥們的老婆,永遠活在你的想像中

#六、content內容:

    1.支持寬度width和高度height設定

    2.內部可以是區塊元素,也可以是行內元素

    3.支援背景設定

七、padding內邊距:

    1.支援四個方向設定大小,按順時針排列:上、右、下、左

    2.也可以單獨設定

        padding-top: 上邊距

    pad   padding-top: 上邊距

## .排列:上、右、下、左

    2.也可以單獨設定

    margin-top: 上方邊距

    margin-right: 右距

#    margin-bottom: 下邊距

    margin-left: 左邊距

    3.支援簡寫:

    margin: 10px 5px 10px

        border-right-style: dashed;

        border-right-color: #888;

#        b -right: 10px d

    border-left-width: 8px;##dot

        border-left-color: #333;

        border-left: 8px dotted #333;

    ;      //四條邊框統一設定寬度

        border-style: solid;     //四條邊框統一設定樣式

     #-color: gray;#-color: gray; ##        border: 10px solid gray; //四條邊框統一設定的簡寫

十、圓角盒子的設定技巧:

#     1:設定圓角:之前都是透過圖片方式來實作,現在透過程式碼就可以

     2:邊框有四個頂點,可以針對每個頂點進行設定

        2.1:左上角border-top-left-radius:20px;

        2.2:右上角border-top-right-radius:20px;

        2.1:右下角border-bottom-right-radius:20px;

以上是css盒子模型說明以及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！