css成品模型,CSS盒模型

盒模型边框

div{

border:2px solid red; /*粗细、样式和颜色(边框三个属性)。*/

}

上面是缩写，可以分开写

div{

border-width:2px;

border-style:solid;

border-color:red;

}

注意，border-style(边框样式)常见有三种样式：dashed(虚线)dotted(点线)solid(实线)

可以单独设置盒模型的边框

div{

border-top:1px dashed red； /*上边框*/

border-bottom:1px solid red; /*下边框*/

border-left:1px dotted red; /*左边框*/

boder-right:1px solid red; /*右边框*/

}

盒模型 宽度和高度

元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

div{

margin:10px; /*边界*/

border:2px; /*边框*/

padding:5px; /*填充*/

width:200px; /*宽度*/

}

元素内容与边框之间是可以设置距离的，称之为“填充”(padding)。

元素与其它元素之间的距离可以使用边界(margin)来设置。

padding和margin的区别，padding在边框里，margin在边框外。