CSS的盒子模型介绍

高洛峰
Freigeben: 2017-03-27 17:14:29
Original
1659 Leute haben es durchsucht

一、margin与padding的区别:

当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图:

CSS的盒子模型介绍

这里单独地把一个盒子拿出来,就会发现由外边距、边框、内边距和内容四部分构成:

CSS的盒子模型介绍

这里面红线所标识的为外边距(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像素;

Das obige ist der detaillierte Inhalt vonCSS的盒子模型介绍. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!