CSS盒子模型

盒子模型的组成

1.内容区
2.内边距padding
3.边框border
4.外边距margin

内容区

设置长度和宽度

div{
    width:200px;
    height:20px;
}

内边距

设置四个方向的距离

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

边框

设置边框包括边框的粗细、样式、颜色

div{
    border:2px  solid  red;
}
//上面是 border 代码的缩写形式，可以分开写：
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

1.border-style常见样式有：
dashed（虚线）、dotted（点线）、solid（实线）、double、groove、outset、inset、ridge。

2.border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

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

外边距

设置元素与元素之间的距离

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