css盒子模型和边框

盒子模型(框模型)

一个盒子分为四个部分
1.内容区(content)
2.内边距(padding)
3.边框(border)
4.外边距(margin)
盒子的大小是由(内容区,内边距，边框)决定

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

设置边框上下左右的宽度

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

设置边框上下左右的颜色

    .box{
            border-top-color:(颜色)
    }
    上(top) 下(bottom) 左(left) 右(right)

边框

    .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:10px red solid;
            border-right:none;
    }

内边距

    .box{
            width:100px;
            height:100px;
            background-color:#bfa;
            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，就会居中。