CSS3-盒模型

盒模型

边框（一）

div{

border:2px solid red;

}

相当于

div{

border-width:2px;//粗细

border-style:solid;//样式

border-color:red;//颜色

}

样式常见的有：dashed（虚线）|dotted（点线）|solid（实线）

边框（二）

单独设置下边框(引用上面的格式)

div{border-bottom:1px solid red;}

同理：上、右、左的边框设置如下

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

宽度和高度

盒模型的宽和高和CSS不一样，盒模型的包括了边框以及边界

填充

填充是以顺时针(上、右、下、左)的方向

div{padding:20px 10px 15px 30px;}

相当于(顺序不能错)

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

上下左右一样的：div{padding:10px;}

上下一样，左右一样：div{padding:10px 20px;}

边界margin

边界顺序和填充顺序一致

padding在边框里,margin在边框外