盒子模型（框模型）

一個盒子分為四部分
1.內容區（content）
2.內邊距（padding）
3.邊框（border）
4.外邊距 （margin）
盒子的大小是由（內容區、內邊距、邊框）決定

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-width:10px;
    border-color:red;
    border-style:solid;
}

設置邊框上下左右的寬度

.box{
    boder-top-width:10px;
}
上top、下bottom、左left、右right

設置邊框上下左右的顏色

.box{
    border-top-color:
}
上top、下bottom、左left、右right

設置邊框的形狀

.box{
    border-style:dotted;
}
dotted(點狀)、dashed(虛線)、double(雙線)、solid(實線)

邊框

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-width:10px;
    border-color:red;
    border-style:solid;
}
如果不設置邊框的寬度和顏色瀏覽器會默認為黑色3px;

邊框的簡寫

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border:10px red solid;
}

自定義邊框顏色

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-top:10px solid red;
}
上top、下bottom、左left、右right

上下左都被設置就右面不會設置邊框樣式

.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border:10px red solid;
    border-right:none;
}

內邊距

.box{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        border:red 10px solid;
        padding-top: 20px;
        padding-bottom:20px;
        padding-left:20px;
        padding-right:20px;
    }
.box1{
        width: 100%;
        height: 100%;
        background-color: orange;
    }
注：內邊距會影響盒子的大小

外邊距

 .box{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        border:red 10px solid;
        margin-top: 20px;
        margin-bottom:20px;
        margin-left:20px;
        margin-right:20px;
    }
.box1{
        width: 100px;
        height: 100px;
        background-color: orange;
    }
注：外邊距會影響盒子的位置

margin外邊距

可以設置"-"值
.box{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        border:red 10px solid;
        margin-top: -50px;
        margin-bottom:-50px;
        margin-left:-50px;
        margin-right:-50px;
    }
.box1{
        width: 100px;
        height: 100px;
        background-color: orange;
    }

給margin設置auto

.box{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        border:red 10px solid;
        margin-left:auto;
        margin-right:auto;
        margin: 0 auto;
    }
.box1{
        width: 100px;
        height: 100px;
        background-color: orange;
    }
注：如果設定左外邊距或者有外邊距的話會把外邊距設為最大，垂直方向設置auto相當于0，左右同時設置auto，就會居中