Notice网站公告
Solution解决方案
DIV CSS技术首页 > 知识中心 > DIV CSS技术 >

理解什么是CSS盒子模型

     如果你不想用传统的表格排版方式来编排网页,想用DIV来编排网页结构,那你一定会接触到CSS的盒子模式。

     CSS盒子模式是DIV排版的核心所在。传统的表格排版是用大小不一的表格,让表格之间进行嵌套,定位来排版网页内容。而CSS盒子模式是通过由CSS定义的大小不一的盒子,让盒子之间进行嵌套,定位来编排网页。相对比较用CSS盒子模式来排版网页会使网页代码变的简洁,兼容更多的浏览器,方便更新等等。
     CSS盒子模式都具备的属性名:内容(content),内边距(padding),边框(border),外边距(margin)。
 
CSS盒子模型
     对于CSS盒子模式我们可以根据现实生活中的盒子来进行比较理解,现实生活中的盒子也是具有这些属性的。那么CSS盒子模式的属性内容就是指盒子里装的东西;而属性内边距就是指怕盒子里装的东西与盒边之间的空隙距离;属性边框就是指盒子四边的厚度;最后外边距就是指盒子放在房间里,盒子与房间之间的距离。
     在网页设计中内容常常用来指文字、图片等元素,也可以是嵌套在里面的小盒子,相对于现实生活中盒子里的东西不能大于盒子,东西比盒子大的话就会把盒子撑坏。而CSS盒子不会被撑坏只会被撑大。内边距只有宽度属性,而边框具有大小属性和颜色属性,可以理解为现实生活中盒子的厚度和盒子是用什么颜色材料做成的,外边距就是指盒子放在房间里,盒子与房间之间的距离。

 

网林时代:北京网站建设专业机构,10年建站经验,服务客户1000多家!
网址:www.awanglin.net www.awanglin.com 点击浏览经典案例