css基础-盒模型(边框）

1、div来设置边框粗细为2px、样式为实心的、颜色为红色的边框

div{
    border:2px  solid  red;
}

div{
    border-width:2px;
    border-style:solid;
    border-color:red;  //或#888等
}

border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。

border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。

使用下面代码实现四边边框的设置：

border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

border-bottom:1px solid red;

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

3、填充（元素内容与边框之间是可以设置距离的）

div{padding:20px 10px 15px 30px;}   //上右下左

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

padding在边框里，margin在边框外。