五、子元素布局的实现方式


先约定一下关于概念的指称问题。我们常常提到父子元素，或父子盒子，它们的指向都是一样的，都是针对HTML的标签而言，也可以称为父子标签。通常，盒子有容器的意味，我们谈到容器元素时，更多地称之为父元素，而子层的标签，我们习惯称之为子元素，但有时候也会混用这些称呼，知道其指向就行。


在一个父盒子里面放置若干个子标签，即是做HTML帖子要干的事情。如何放置子标签是做帖子的重要工作环节。


一般来说，依靠文档流做不出精美的帖子，毕竟HTML帖子不是像纯文本那样的内容。帖子里的子元素需要布局，自然的文档流又不能满足需求，所以，给子元素定位是必须的。


之前，papa父盒子用了 position: relative; 定位，这是相对定位，用意有三个：一是，可以调节 papa 的横向位置，纵向也可以调节；二是，更重要的，让帖子在整个web页的节点中能有一席之地。position定位方式主要有三个设定值，一是 fixed（固定定位）、二是relative（相对定位）、三是absolute（绝对定位），固定和绝对定位在文档流中不占据地盘，它们所定位到的xy坐标点上及其宽高所占的空间可以再部署其他的元素，如果没有部署，则按文档流的自然状况是谁在那个位子就是谁，连同固定和绝对定位的元素一同堆叠在一处；而相对定位不一样，相对定位的元素，即使通过偏移将其移动到了其他地方，它在文档流中本应有的位置依然存在，自然部署的文档流中的其他元素不能自然地占用它的位置和空间（通过绝对、固定定位的除外，即使如此，那个位置、空间仍然是相对定位元素的原始位置和空间）；三是，它做定位，子元素所做的定位，才会以它为依据，否则，是以上一个做了定位的元素（爷爷或大于爷爷的辈分的元素）为依据。


子元素的定位，建议使用 absolute，绝对定位。例如，我们想让播放器盒子 player 安放在左下角，并与父元素的边框有 10px 的距离，则下面的CSS代码里，红色部分就是实现这一定位目标的：


#papa {
    position: relative;
    /* 其他代码 */
}


#player {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 200px;
    height: 80px;
    /* 其他代码 */
}


父盒子相对定位，子元素绝对定位、并设置了 left 和 bottom值为 10px ，前面预设的子元素定位就能完美实现。


要注意的是，元素只有做了 position 设定，所做的 left、top 实际偏移定位才有效，而当父元素没有做 position 设定，则子元素的偏移定位不以父元素的边界做依据，而是以上一个做了 position 定位的爷爷辈或以上的盒子的边界做依据。


任何时候我们都可以设定元素的 left、right、top和bottom值，但如果通过它们来定位元素的偏移，则必须是子元素的 position 做了设置。在帖子里，用 right 和 bottom 取代 left 和 top 的前提是，子元素用了绝对定位。


偏移定位仅需要也只能要一对分别表示xy坐标的属性值，left 和 right 属于 X坐标，top 和 bottom 属于 Y坐标。所以，left可以和top、bottom配对，不能和right配对，top可以和left、right配对，但不能和left配对。选用哪一个属性值来做偏移定位，原则之一是哪一个的计算更简单。


当元素将来需要通过 left、top 属性值做动画位移时，子元素的定位还是要老老实实按 left、top 进行偏移，该计算则去计算像素值，这是较为明智的选择，原因是动画的位移多数情况下与元素的初始位置关联，当动画指令读取不出原始 left、top属性值之时，它极可能会发生异常。


小结：本复习课字数多，但都围绕定位开讲。帖子子元素的定位依赖于父元素的定位，子元素尽量使用绝对定位（absolute），并通过 left、top、right和bottom来确定自己在父盒子中的位置（如果需要也可以游离于盒子之外）。

前一篇: 四、明晰文档节点概念
下一篇: 六、如何安置各子元素的物理位置