用图片解释CSS盒子模型

CSS Box Model

很多CSS初学者不太理解margin和padding的区别,用语言描述总是非常难懂,用一幅图片就能很好解释了。其实从这幅图基本就能理解了,但是我还是稍微的讲解一下。

由内而外开始,最里层是内容区域,一般都是在html中的<p></p>标签中。5的地方就是padding,4的地方是border,1的地方就是margin。如果说border(边框)是内阁内外的大门,padding就是内边距,也就是内容距离房屋大门的距离,margin就是外边距,是外面其他的房屋距离大门的距离。一切内容都是存在于border这个大门中的。3是背景图片,2是背景色。背景图片和背景色可以设置任何一个,也可以不设置,也可以两个都设置。当同时设置了背景图片和背景色的时候会像图上表现的一样,背景图像会覆盖住背景色,当背景图像不存在时才会显示背景色。

举个例子,比如有个div,id值为box,那么:

#box{
	background-color:#000000;    //设置背景色为黑色
	background-image:url(image.jpg);    //设置image.jpg为背景图片
	border:1px solid #0000ff;    //添加一个1像素宽的蓝色实线作为边框
	margin:5px;    //外边距为5个像素
	padding:5px;    //内边距为5个像素
	width:500px;    //设置内容宽度为500像素,一般等于背景图像的宽度
	height:300px;    //设置内容高度为300像素,道理同上
}

最后两行设置了内容的高度和宽度为500像素和300像素。那么整个div所占的宽度就是内容宽度+两边的边框宽度+两边的内边距+两边的外边距,也就是500+2+10+10=522像素。margin就是指定了div的外部与其他元素的间距。

OK,到此结束,CSS盒子模型就是这么简单。

7 Comments

  1. I don’t even understand how I ended up right here, however I believed
    this publish used to be great. I do not know who you are but certainly you are going
    to a famous blogger in the event you aren’t already. Cheers!

    Reply

Leave a Comment.