在网页制作的过程中,我们经常需要对网页进行布局,在布局过程中最典型的就是盒子模型,如下图:
盒子模型就是我们平时装东西的箱子,盒子模型有内容(content)、填充(padding)、边框(border)、边界(margin)这四个最基本的属性。
盒子模型与我们平时装东西的箱子又有什么联系呢?
内容(CONTENT)就是盒子里装的东西;
而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料,宽度代表盒子里的东西与盒子内边距的距离;
边框(BORDER)就是盒子本身了,宽度就是盒子本身的宽度;
边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
有什么区别呢?
现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充只有宽度属性。
在HTML里面盒子模型的具体应用:
盒子模型只能应用于块级元素如div,每一个div都可以看作一个盒子
#top, #search, #main, #footer {
margin:10px auto 10px auto; //各个模块件的距离是10px;
width:900px ; //宽度为900px;
margin-left :auto;
margin-right :auto;
border :10px; //边界线的宽度为10px;
}