练习CSS的布局相关知识记录。

一、浮动布局

1）浮动

浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。想要实现两列并排或者多列并排效果时，首先考虑的是使用浮动来实现。例如我们可以通过设置float属性让元素向左浮动或者向右浮动（left向左，right向右），以便让周围的元素或文本环绕着这个元素。

预览效果如下图所示：

在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。为了便于观察，我们为每一个块都加上了背景颜色，并且让块与块之间加上一定的外边距。

从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。

1．设置第1个div浮动

#son1 { background-color:#FFFF99; float:left; }

预览效果如下图所示：

由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动引起的效果。

2．设置第2个div浮动

#son2 { background-color:#FCD568; float:left; }

预览效果如下图所示：

由于box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。如果box2后面还有其他元素，则其他元素也会紧贴着box2。

但是此时我们发现父元素变成一条线，这是浮动引起的问题，我们在下面解决。

2）清除浮动

在前一部分的实践发现，浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。

预览效果如下图所示：

我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。清除浮动不仅仅只有clear:both，还有overflow:hidden，以及伪元素。

二、定位布局

1）固定定位

固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。在CSS中，可以使用“position:fixed;”来实现固定定位。

语法： position: fixed; top: 像素值; bottom: 像素值; left: 像素值; right: 像素值;

position:fixed;是结合top、bottom、left和right这4个属性一起使用的。其中，position:fixed使得元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。

注： 这4个值的参考对象是浏览器的4条边。

预览效果如下图所示：

将有固定定位的部分设置的长度很长，尝试拖动浏览器的滚动条，其中有固定定位的div元素不会有任何位置改变，但没有定位的div元素会改变。

2）相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。在CSS中，可以使用“position:relative;”来实现相对定位。

语法： position: relative; top: 像素值; bottom: 像素值; left: 像素值; right: 像素值;

position:relative;也是结合top、bottom、left和right这4个属性一起使用的，其中，position:relative;使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始的位置。top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。这4个值的参考对象是该元素的原始位置。

注： 在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！

预览效果如下图所示：

当为第2个div元素加入相对定位，CSS代码如下：

#son2 { position:relative; top:20px; left:40px; }

预览效果如下图所示：

3）绝对定位

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。在CSS中，可以使用“position:absolute;”来实现绝对定位。

语法： position: absolute; top: 像素值; bottom: 像素值; left: 像素值; right: 像素值;

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

三、CSS盒子模型

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响。将每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

盒子模型的组成部分有4个：

1．内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区content而言，并不包括padding部分。

当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。

2．内边距

内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。

关于内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。使用这5种属性可以指定内容区与各方向边框之间的距离。

3．外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性也有5种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。

同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。

4．边框

在CSS盒子模型中，边框属性有border-width、border-style、border-color以及综合了3类属性的简写边框属性border。 其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

实践小结：

浮动布局比较灵活，但是不容易控制。定位布局的出现，使得用户精准定位页面中的任意元素成为可能，此时页面布局操作也变得更加随心所欲。但是，由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。

CSS定位使我们可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。

CSS盒子模型利用盒子的布局方式代替了传统的表格布局方式，能够让人充分理解div+css模型的定位功能。