网页制作第四讲CSS盒子模型概要.ppt

CSS盒子模型 李飞 什么是CSS的盒子模式 内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。 CSS的盒子模式 CSS的盒子模式 CSS的盒子模式 在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。 CSS—定义 .box1{ background:black; color:White; height:100px; padding:10px; border:20px solid Red; margin:30px; } 盒子模式中怎样计算总的宽度和高度 Total width = left margin + left border + left padding + width +right padding + right border + right margin Total height = top margin + top border + top padding + height +bottom padding + bottom border + bottom margin 宽度 = 自身宽度+左内边距+右内边距+左边框+右边框 高度 = 自身高度+上内边距+下内边距+上边框+下边框 * * Width X height padding-top Padding-bottom Padding-left Padding-right Border-top Border-bottom Border-left Border-righr Margin-top Margin-bottom Margin-left Margin-rigth *