一、CSS 框模型概述

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框、外边框的方式。

2.元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

二、css内边框

1.元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

2.CSS padding 属性定义元素边框与元素内容之间的空白区域。

   CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

3.单边内边距属性

 分别设置上、右、下、左内边距：padding-top

                                                       padding-right

                                                       padding-bottom

                                                       padding-left

三、css的定位与浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

1.定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用。

       相对定位：一般不要去用top,left,right,bottom。

       绝对定位：元素会脱离文档流，一般不要去用margin，用top，left，right，bottom。

备注：一般的情况下：相对定位和绝对定位是同时出现的。

           一般所有的下拉框都是绝对配合着相对定位完成的。

2.浮动：浮动分为两种，左浮动和右浮动。

              浮动会脱离文档流。

              清除浮动： 不是清除自身的浮动，而是清除上一个浮动对自身造成影响。