第十四章盒子的浮动与定位

1.盒子的浮动（float）

1.1 左浮动

设置三个盒子，分别给它们的float加上left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.son1{

float:left;

}

.son2{

float:left;

}

.son3{

float:left;

}

其效果如下：

1.2 右浮动

当把第三个盒子的float设置为right时

1.3 盒子在推挤中被卡住

给第一个盒子增加一段”Box-1”，然后缩小浏览器，可以看见第三个盒子在被推挤到左边的时候卡住了，此时与第二个盒子竖直对齐。

1.4 clear清除环绕效果

如果不希望文字环绕着盒子，可以利用clear取消浮动

1
2
3
4
5
.son4{

clear:left;

}

效果如下：

另外clear除了left和right，还有both，用来清除两边的文字围绕。

1.5 浮动与标准流的关系

如果删除文字段，可以看到：

父盒子的高度已经不随着子盒子的高度来确定了，因为当设置浮动之后，三个盒子都脱离了标准流。

那么如何让父盒子的宽度伸展到囊括子盒子呢？

其中一种不够优雅地方法是增加一个盒子

1
<div class="clear"></div>

然后再css中设置clear属性，注意要声明是父盒子的子盒子，即.father .clear

1
2
3
4
5
6
7
8
9
10
11
.father .clear{

margin:0px;

padding:0px;

border:0px;

clear:both;

}

2.盒子的定位（position）

2.1 静态定位static

默认值，没什么效果

2.2 相对定位relative

给第一个盒子设置CSS

1
2
3
4
5
6
7
8
9
.son1{

position:relative;

top:30px;

left:30px;

}

可以看到盒子向右下各偏移了30px

 

略微修改一下，就是向左上偏移

1
2
3
4
5
6
7
8
9
.son1{

position:relative;

bottom:30px;

right:30px;

}

 

由上可以得出两个结论：

1）设置relative只是从原来位置进行一定的偏移。

2）其他盒子的位置没有改动，说明Box-1没有脱离标准流

2.3 绝对定位absolute

absolute会让盒子脱离标准流，根据父边框来确定位置，而剩下的盒子会补上这个盒子的空缺。

1
2
3
4
5
6
7
8
9
.son1{

position:absolute;

top:0px;

right:0px;

}

效果如下：

紧贴父盒子边框

如果给父盒子设置relative属性

就会与父边框有一定距离

2.4 固定定位fixed

盒子位置跟随滚动条移动。

3.z-index 的空间位置

z-index可以用来设置图片显示的前后顺序。

4.盒子的display属性

4.1 display有什么用？

用于设置盒子的类型，有块级block、行内inline和取消none

4.2 display如何用？

写八个盒子，三个div标记，三个span标记和一个span一个div标记

然后设置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="display:inline">Box-1:div in inline</div>

<div style="display:inline">Box-2:div in inline</div>

<div style="display:inline">Box-3:div in inline</div>

<span style="display:block">Box-4:span in block</span>

<span style="display:block">Box-5:span in block</span>

<span style="display:block">Box-6:span in block</span>

<span style="display:none">Box-7:span in none</span>

<div style="display:none">Box-8:span in none</div>

可以看到：

原本div变成行内元素，而span变成块级元素，设置none的两个标记直接不显示。