摘要：如果想熟练掌握CSS和Div布局方法，首先要对盒模型有足够的了解。盒模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒模型以及其中每个元素的使用方法，才能真正布局网页中各个元素的位置。
如果想熟练掌握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，最常用来组织内容的元素就是
一、盒模型
所有页面中的元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（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，最常用来组织内容的元素就是
标签。CSS排版是一种很新的排版理念，首先要将页面使用
整体划分为几个版块，然后对各个版块进行CSS定位，最后在各个版块中添加相应的内容。
查看演示
关注微信公众号
我们立足于合肥面向安徽乃至全国全球市场，我们拥有一支经验丰富、创意独到、团结协作的专业技术团队。我们立志把最好的技术通过最有效、最简单的方式提供给客户，为客户提供最佳的解决方案，我们将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，帮助客户在新经济时代下，把握商机和发展空间，并获得绝对的竞争力！我们专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商！
扫描二维码与小二CMS创始人沟通
7*24小时为您服务
小二CMS专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商！
公安备案：皖公网安备34019102000119号
