【靜態(tài)頁面架構(gòu)】CSS之盒子模型

fanux 發(fā)布于2019-08-29 16:34 / 3576人閱讀

摘要：架構(gòu)盒子模型以內(nèi)容區(qū)顯示文本和圖像內(nèi)邊距內(nèi)容區(qū)至邊距的距離邊距內(nèi)容區(qū)的邊界外邊距元素的邊框之間的距離邊距屬性簡寫屬性用來設(shè)置邊距的上右下左。

CSS架構(gòu) 盒子模型；

以內(nèi)容區(qū)(顯示文本和圖像)

內(nèi)邊距(內(nèi)容區(qū)至邊距的距離)

邊距(內(nèi)容區(qū)的邊界)

外邊距(元素的邊框之間的距離)

1.邊距； border屬性；

簡寫屬性用來設(shè)置邊距的上(top)右(right)下(bottom)左(left)。寬度，顏色和樣式

盒子的陰影；

以box-shadow屬性設(shè)置盒子陰影效果

offset-x表示陰影的水平方向偏移量；
負(fù)值為左偏移正值為右偏移

offset-y表示陰影的垂直方向偏移量；
負(fù)值為左偏移正值為右偏移

邊框圓角；

以border-radius定義來設(shè)置邊距的圓角；直角，圓角還是橢圓角

邊框圖像；

以border-image定義來設(shè)置在元素的邊框上的圖像

 


愛新覺羅

2.內(nèi)邊距；
paddying屬性；
也屬于簡寫屬性用來設(shè)置盒子的內(nèi)邊距上，右，下，左




    


3.外邊距；
上外邊距和左外邊距；
以margin-left設(shè)置元素的水平方向的位置
值為正數(shù)，當(dāng)前元素向右移動
值為負(fù)數(shù)，當(dāng)前元素向左移動
  margin-top設(shè)置元素垂直方向的位置
值為正數(shù)，當(dāng)前元素向下移動
值為負(fù)數(shù)，當(dāng)前元素向上移動
上外邊距和右外邊距
以margin-bottom設(shè)置下一個元素的位置
值為正數(shù)，下一個兄弟元素向下移動
值為負(fù)數(shù)，下一個兄弟元素向上移動
  margin-right設(shè)置下一個元素的位置
值為正數(shù)，下一個兄弟元素向右移動
值為負(fù)數(shù)，下一個兄弟元素向左移動






外邊距重疊；
以設(shè)置兩個相鄰的元素的外邊距，第一個設(shè)置下外邊距第二個設(shè)置上外邊距
   






外邊距傳遞；
以設(shè)置兩個元素師父子元素，當(dāng)子元素設(shè)置上外邊距，該上邊距會在父級元素內(nèi)出現(xiàn)




    
    


內(nèi)容水平居中；
以margin: 0 auto；父級div設(shè)置在元素的水平居中



星際戰(zhàn)甲

4.盒子模型；
塊級元素盒子模型；
可設(shè)置寬高，設(shè)置高度為其中內(nèi)容的高度






內(nèi)塊級元素盒子模型；
是不可設(shè)置寬和高，元素的大小事其中內(nèi)容撐起



星際戰(zhàn)甲

行內(nèi)塊級元素盒子模型；
不自動換行，可設(shè)置寬高；





    
box-sizing屬性；
以box-sizing屬性設(shè)置盒子模型；
content-box；為默認(rèn)值為標(biāo)準(zhǔn)盒子模型
設(shè)置為內(nèi)容區(qū)；內(nèi)邊距；邊框；外邊框
border-box；為怪異盒子模型
設(shè)置盒子的大小；外邊距
        #qq {
            width: 200px;
            height: 200px;
            /*
                默認(rèn)值，標(biāo)準(zhǔn)盒子模型
                * 實際的寬度 = width + padding-left + padding-right + border-left + border-right
                * 實際的高度 = height + padding-top + padding-bottom + border-top + border-bottom
             */
            box-sizing: content-box;

            border: 10px solid black;
            
            padding: 50px;
            /*設(shè)置內(nèi)邊距*/
            margin: 50px;
            /*設(shè)置外邊距*/
            background-color: lightcoral;
        }
        #hh {
            width: 200px;
            height: 200px;
            /*
                怪異盒子模型
                * 實際寬度 = width
                * 實際高度 = height
             */
            box-sizing: border-box;

            border: 10px solid black;
            
            padding: 50px;
            /*設(shè)置內(nèi)邊距*/
            margin: 50px;
            /*設(shè)置外邊距*/
            background-color: green;
        }