很多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盒子模型就是这么简单。
嗯 盒子的概念刚开始是不怎么好理解呢 需要多多练习 再加上IE6的病态解析…呵呵~要多试试
是啊,多练习,自然而然就记住了。
最近正在学css.. 这个图很不错
呵呵,花了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!