掌握盒模型轻松DIV css网页布局若是想谙练把握DIV和CSS的结构体例，首先要对盒模子有足够的体味。每个HTML元素都可以看作一个装了工具的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子自己有边框（border），而盒子边框外和其他盒子之间，还有鸿沟（margin），如图1所示。图1 盒模子图解填充、边框和鸿沟都分为“上右下左”四个标的目标，既可以分袂界说，也可以统必然义。CSS内界说的宽（width）和高（height），指的是填充以内的内容规模，是以一个元素：现实宽度 = 左鸿沟 + 左边框 + 左填充 + 内容宽度（width） + 右填充 + 右边框 + 右鸿沟现实高度 = 上鸿沟 + 上边框 + 上填充 + 内容高度（height） + 下填充 + 下边框 + 下鸿沟例若有CSS界说如下：#menu background: #9cf;margin: 20px;border: 10px solid #039;padding: 40px;width: 200px;则其现实
