CSS定位和盒子模型

CSS 定位和盒子模型

CSS 对元素的定位包括相对定位和绝对定位。还可以把相对定位和绝对定位结合起来，形成混合定位。

盒子模型的概念

熟练掌握 Div 和 CSS 的布局方法，首先要对盒模型有足够的了解。盒子模型是 CSS 布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正地布局网页中各个元素的位置。

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

一个盒子由4 个独立部分组成，如图 7-2 所示。第一部分是最外面的边界（margin）；第二部分是边框（border），边框可以有不同的样式；第三部分是填充（padding），填充用来定义内容区域与边框（border）之间的空白；第四部分是内容区域。

填充、边框和边界都分为【上、右、下、左】4 个方向，既可以分别定义，也可以统一定义。当使用 CSS 定义盒子的宽度和高度时，定义的并不是内容区域、填充、边框和边界所占的总区域，而是内容区域（content）的宽度和高度。为了计算盒子所占的实际区域必须加上填充、边框和边界。
实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界