文章摘要
如果想熟练掌握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
高端定制网站领域著名服务商
我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、创意独特、协作无间的专业技术团队，专注于将最优技术通过高效简捷的途径呈现给客户，量身打造最佳解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。
小程序开发
公众号开发
高端网站开发
系统开发
商城开发
外贸网站建设
网站优化推广
安全运维
扫描二维码与小二CMS创始人沟通
7×24小时专业技术支持
高端网站定制
系统开发（OA、CRM）
商城开发
外贸网站建设
公众号/小程序
安全运维
扫一扫添加微信
公安备案：皖公网安备34019102000119号