六、如何安置各子元素的物理位置


papa之下，可以有多个子元素，有它们的共同参与才能构建了一张精美的帖子。那么，子元素彼此间的物理位置关系问题就是我们要处理的一个重要问题。


比如一幅图片，一个播放器，几行文本，它们可以是并列关系，作为父盒子 papa 的共同的儿子。体现在HTML代码层面大概是如下这个结构：


<div id="papa">
    <img id="mypic" alt="" src="图片url" />
    <div id="player"><!-- 播放器的其他代码 --></div>
    <div id="mytext"><!-- 文本内容 --></div>
</div>


以上，papa里面，img、两个 div，是哥仨，它们现在是并列关系，如果按照自然文档流，它们的位置是图片在上面，中间是播放器，文本在下面。前面谈到，子元素都应做绝对定位，先看怎么给图片偏移定位：


/* 图片 */
#mypic {
    position: absolute; /* 绝对定位 */
    width: 300px; /* 宽度 */
    height: 400px; /* 高度 */
    left: calc(50% - 150px); /* 水平居中 */
    top: calc(50% - 200px); /* 垂直居中 */
}


这里，我们将图片设置为左右、上下都居中，是使用了 left 和 top 属性的设定使之产生偏离而达成的效果。若不做left、top设定，所有绝对定位的元素默认left和top值都为0，没有偏移，都在父元素的左上角，换言之，相对于父元素而言，子元素此时的左上角的xy坐标是{0，0}。定位子元素居中，上述例子是使用了CSS的 calc 运算，以前专门介绍过，这里再简单解释一下用它来实现元素居中的计算，以水平方向为例：


left: calc(50% - 150px);


calc 运算，运算符（加减乘除等）和数值之间必须各隔一个空格。50%指的是父元素的长度的一半，再减去150px即子元素自身宽度的一半，这样定位子元素的left值就可以使之水平居中。calc运算是很特殊的运算，能进行违规的运算，比如百分比减去像素值，这在数学中是绝不许可的，CSS可以。


播放器放哪儿，请参照前面的课程。


文本放哪里呢？这本来需要自己布置，作为复习，我们预设放在父元素右上部分：


/* 文本 */
#mytext {
    position: absolute; /* 绝对定位 */
    width: 180px; /* 宽度 */
    height: 60px; /* 高度 */
    top: 20px; /* 上边值 */
    right: 20px; /* 右边值 */
    font: normal 30px / 60px '新宋体'; /* 字体：30位文本大小，60是行高（与元素高度同） */
    color: blue; /* 前景色 */
    text-align: center; /* 文本水平居中 */
}


这哥仨都安置好了，各自在 papa 屋子里找到了自己的地儿，帖子现在有模有样了。做到这里可以保存然后预览，看看大体的布局效果，再做微调然后才继续下一步的深度创作。

前一篇: 五、子元素布局的实现方式
下一篇: 七、弄清元素间的父子层级关系