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;

2、宽度计算

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

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px

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

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

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

4、 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

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