盒子模型

1、盒子模型

content（内容）：必需的一部分，可以是文字、图片等元素。

padding（空白）：也称内边距或补白，用来设置内容和边框之间的内容。

border（边框）：可以设置内容边框线的粗细、颜色、样式等。

margin（边界）：外边距，用来设置内容边框线的粗细、颜色、样式等。

2、盒子的定位与浮动

      相对定位时，无论是否进行移动，元素仍然占据原来的空间，移动元素会导致其覆盖其他框。通过设置垂直或水平位置，可以让其“相对于”它的原始起点进行移动。postion：relative

      绝对定位是参考浏览器的左上角，配合top、left、bottom和right进行定位的，若没有上述四个值，则默认依据父级的坐标原点为原始点。在父层position为默认值时：上、下、左、右的坐标原点以body的坐标原点为起始点位置。position：absolute

      固定定位是绝对定位的一种特殊形式。固定定位的容器不会随着滚动条的拖动而变化位置。可以把一些特殊效果固定在浏览器的视线位置。

区别：

      绝对定位的坐标原点为上级元素的原点，与上级元素有关；相对定位的坐标原点为本身偏移前的原点，与上级元素无关。

注意：

      页面设计要适应各种屏幕分辨率，并且要能够正常显示。在定位时最好使用相对定位。在使用绝对定位时会产生一个问题。目前。大多数网页都是居中显示的，而且元素与元素之间的布局是紧密的。而绝对定位的开始位置是浏览器左上角的原点，当设定各元素块边偏移属性时，由于客户端分辨率的不同，各元素块的显示可能会有偏差。