定位属性：position：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏值描述

这个没有特别的做要求，你要根据你自己的页面整体布局来设置，还有根据div的特性来设置，div默认情况是宽度最大化(100%)、高度最小化，高度随着内容自动伸展；
一般情况做网页的话，大部分都是固定了总体框架宽度的，每个模块的宽度基本上也都是固定的，所以div需要设一下宽度，如果内容也是相对固定不变的，那么也可以设定高度
我现在是做系统软件的界面设计，需要软件的界面能够根据分辨率或者浏览器的宽度自动伸展，所以我一般布局的话大部分地方都是不设宽度的，最多设置一下最小宽度，防止总体框架的宽度过小导致布局的错位，而高度方面因为数据调用的问题会有数据多和数据少的时候，这样内容部分我就不会设定高度
我这里只是大概的给你说一下而已，事情是没有绝对的，你自己多多练习就能够了解了

在老的IE和非IE浏览器可能会有不一样，W3C的规则里，float属性说明中指出，绝对定位元素忽略float浮动属性。position：absolute是绝对定位属性.

老IE的浏览器盒子模型不太遵循W3C制定的HTML标准。而谷歌，火狐这些对W3C的标准支持更好。在谷歌浏览器中，对同一个元素设置这两个属性 ，是会有冲突的。

备注：

float属性和relative相对定位+display:inline_block，实现一行多列效果

absolute和display:block+百分比的相对单位，实现满屏效果

CSS Display(显示) 与 Visibility（可见性）

display：属性设置一个元素应如何显示。

visibility：属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none 或 - visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了但仍然会影响布局。

display(不占空间)：隐藏。none不显示    block显示

visibility(占空间)：隐藏。 hidden不显示 visitle显示

display:inline：可以把块级元素变成内联元素

display:block：可以把内联元素变成块级元素，不允许有它内部的嵌套块元素。

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

。。。。。。

CSS Position(定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

position 属性指定了元素的定位类型。

position 属性的五个值：

static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。

absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，元素和其他元素重叠。

relative：相对定位，相对其正常位置，(相对灵活，按元素自己的位置)，相对定位元素的定位是相对其正常位置。

fixed：固定定位，即使窗口是滚动的它也不会移动，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置与文档流无关，因此不占据空间，Fixed定位的元素和其他元素重叠。

sticky：可以把它称之为粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

clip:rect：裁剪元素，先有定位

overflow:scroll：内容溢出时，显示隐藏内容

overflow:hidden：内容溢出时，隐藏

overflow:auto：自动处理溢出内容

overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

。。。。。。

CSS float(浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

浮动，可以让行内和块变成行内块

浮动，会使元素向左或向右移动，其周围的元素也会重新排列。

浮动，往往是用于图像，但它在布局时一样非常有用

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，文本流将环绕在它左边

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

1.

浮动清除

2.overflow：hiddc，auto

 定位属性：position：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏值描述

 定位属性：position：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏值描述

 定位属性：position：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏值描述

CSS Display(显示) 与 Visibility（可见性）

display：属性设置一个元素应如何显示。

visibility：属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none 或 - visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了但仍然会影响布局。

display(不占空间)：隐藏。none不显示    block显示

visibility(占空间)：隐藏。 hidden不显示 visitle显示

display:inline：可以把块级元素变成内联元素

display:block：可以把内联元素变成块级元素，不允许有它内部的嵌套块元素。

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

。。。。。。

CSS Position(定位)

CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

position 属性指定了元素的定位类型。

position 属性的五个值：

static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。

absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，元素和其他元素重叠。

relative：相对定位，相对其正常位置，(相对灵活，按元素自己的位置)，相对定位元素的定位是相对其正常位置。

fixed：固定定位，即使窗口是滚动的它也不会移动，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置与文档流无关，因此不占据空间，Fixed定位的元素和其他元素重叠。

sticky：可以把它称之为粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

clip:rect：裁剪元素，先有定位

overflow:scroll：内容溢出时，显示隐藏内容

overflow:hidden：内容溢出时，隐藏

overflow:auto：自动处理溢出内容

overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content

。。。。。。

CSS float(浮动)

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

浮动，可以让行内和块变成行内块

浮动，会使元素向左或向右移动，其周围的元素也会重新排列。

浮动，往往是用于图像，但它在布局时一样非常有用

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，文本流将环绕在它左边

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

1.

浮动清除

2.overflow：hiddc，auto