盒模型--边框

盒模型的边框可以设置粗细、样式和颜色

div{border:2px   green  solid}

也可以完整地写成

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

意思是盒的边框为2px粗，绿色，实心。

border-style（边框样式）常见样式还有：

dashed（虚线）| dotted（点线）| solid（实线）。

css允许只为一个方向的边框改变样式

div{border-bottom:2px red solid}div{border-right:2px red solid}div{border-left:2px red solid}div{border-top:2px red solid}

分别改变了下，右，左，上的盒模型边框

个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

div{margin:1px      border:2px      padding:3px      width:4px     }

实际的盒模型宽度是1+2+3+4+3+2+1