1、盒子的浮动

 * CSS 中有一个 float 属性,默认为 none,即标准流。通过设置 float 属性的值为 left 或 right,元素会向其父元素的左侧或右侧靠近,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。

 * clear 属性:作用是为了消失由于使用 float 后,浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both,分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。

ps:

 * 通过使用 CSS 布局,可以实现在 HTML 不做任何改动的情况下,调换盒子的显示位置。实际应用中,确定内容的逻辑位置,可以把内容最重要的放在前面,次要的放在后面,再通过 CSS 来确定内容的显示位置。

 * 对 clear 属性的设置要放到设置 float 后面的盒子中,才能有效消除影响。

2、盒子的定位

 * 广义的“定位”:泛指一个网页排版中的定位操作,使用任何 CSS 规则来实现。

 * 狭义的“定位”:通过设置 CSS 中的属性 position 来进行定位。

 

 * position 的取值包括:

(1)static:默认的属性值,按照标准流(包括浮动方式)进行布局。

(2)relative:称为相对定位,使用相对的盒子的位置常以标准量的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。

相对定位仍在标准流中,它对父块和兄弟块盒子没有任何影响。

(3)absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。

绝对定位从标准流中脱离,并且以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。没有已经定位的祖先元素,则以浏览器窗口为基准进行定位。

(4)fixed:固定定位,与绝对定位类似,以浏览器窗口为基准进行定位,拖动浏览器窗口的滚动条时,位置保持不变。

ps:

 * 当 position 属性设置为 relative、absolute 和 fixed 时,通过设置 left、right、top 和 bottom 来指定偏移量。这 4 个属性除了可以设置绝对的像素数外还可以设置百分数。

 * “已经定位”元素的含义是:position 属性被设置,并且不是 static。

 * 绝对定位的特殊性质:如何设置了绝对定位,而没有设置偏移属性,那它将保持原来的位置。可用于需要使某个元素脱离标准流,而需要保持在原来位置的情况。

3、z-index 空间位置

 * z-index 属性用于调整定位时重叠块的上下位置。默认值为 0,可以设置为正数或负数,当两个块的 z-index 值相同时,保持原来的高低覆盖关系。

4、盒子的 display 属性

 * 可以通过设置 display 属性来确定盒子的类型。inline 表示行内元素,block 表示块级元素,none 表示无用于隐藏元素。