盒子模型和边框

盒子模型（框模型）

一个盒子分为四部分
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，就会居中