Rumah > Artikel > hujung hadapan web > CSS的盒子模型介绍
一、margin与padding的区别:
当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图:
这里单独地把一个盒子拿出来,就会发现由外边距、边框、内边距和内容四部分构成:
这里面红线所标识的为外边距(margin)、再向里灰色的标识为边框(border)、蓝色线所标识的为内边距(padding)、再向里是具体的内容(content),是否与照片非常相似?此时也可以认为盒子模型中的盒子就是一个块(div),它是由相片框、相片及相片框与外面墙的距离、相片框和相片之间的距离所构成。
二、举例:
1、
div
{
margin:3px 5px 6px;
padding:4px 6px;
border-width:6px;
border-color:black;
width:500;
heigth:300;
}
这段CSS定义描述了这么一个盒子:
它的外边距与顶部的距离为3像素、外边距与左右部的距离为5像素,外边距为底部的距离为6像素;
它的边框宽度为6像素,边框颜色为黑色;
它的内边距与上下边框的距离为4像素,与左右边框的距离为6像素;
照片的大小为500*300
2、盒子缺省值的说明,以margin为例:
margin:4px;
表示盒子与上右下左边距的距离均为4像素;
margin:4px 6px;
表示盒子与上下边距的距离为4像素,右左边距的距离为6像素;
margin:4px 5px 6px;
表示盒子与上边距的距离为4像素,与右左边距的距离为5像素,与下边距的距离为6像素;
margin:4px 5px 6px 7px;
表示盒子与上边距的距离为4像素,与右边距的距离为5像素,与下边距的距离为6像素,与左边距的距离为7像素;
Atas ialah kandungan terperinci CSS的盒子模型介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!