CSS盒模型

盒模型边框

div{
    border:2px  solid  red;        /*粗细、样式和颜色(边框三个属性)。*/
}

上面是缩写，可以分开写

div{
border-width:2px;
border-style:solid;
border-color:red;
}

注意，border-style（边框样式）常见有三种样式：dashed（虚线）dotted（点线）solid（实线）

可以单独设置盒模型的边框

div{
border-top:1px dashed red；    /*上边框*/
border-bottom:1px solid red;    /*下边框*/
border-left:1px dotted red;       /*左边框*/
boder-right:1px solid red;        /*右边框*/
}

盒模型 宽度和高度
元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

div{
       margin:10px;   /*边界*/
       border:2px;       /*边框*/
       padding:5px;    /*填充*/
       width:200px;     /*宽度*/
     }

元素内容与边框之间是可以设置距离的，称之为“填充”（padding）。
元素与其它元素之间的距离可以使用边界（margin）来设置。
padding和margin的区别，padding在边框里，margin在边框外。