营销型网站建设之盒模型

822 阅读 字号小中大

赞143 踩 0 分享

如果想熟练掌握CSS和Div布局方法，首先要对盒模型有足够的了解。盒模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒模型以及其中每个元素的使用方法，才能真正布局网页中各个元素的位置。门户网站建设公司XiaoerCMS就来讲讲盒模型：

一、盒模型

所有页面中的元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

一个盒子由4各独立部分组成。

1、最外面的边框（margin）

2、第二部分是边框（border），边框可以用不同样式；

3、第三部分是填充（padding），填充用来定义内容区域与边框（border)之间的空白；

4、第四部分是内容区域。

填充、边框和边界都分为“上、右、下、左”4个方向，既可以分别定义，也可以统一定义。当使用CSS定义盒子的width和height时，定义的并不是内容区域、填充、边框和边界所占的总区域。实际上定义的是内容区域content的width和height。为了计算盒子所占的实际区域必须加上padding、border和margin。

实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界

实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界

二、CSS布局理念

无论使用表格还是CSS，网页布局都把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是