帖子容器一般指的是帖子自身的元素，通常是一个 div，来装载我们要发布的内容，里面可能有文本、图像、音频、视频等，所以称作容器，也叫帖子主元素、帖子父元素。帖子容器自身最好有一个 id，一来便于在CSS中给它定义CSS样式，二来，将来需要使用JS对它或内部子元素操纵时有个操作标识，例如 id="papa" 或 id="mama" 等等都可以，这回我们用 mama 吧——mama可不是一般的存在是不是？那么，对应的 CSS 选择器就是 #mama {} 了，具体内容和解释如下：

<style>
#mama {
	width: 1280px; /* 帖子宽度 */
	height: 720px; /* 帖子高度 */
	background: url('图片地址') no-repeat center / cover; /* 帖子背景图及设置 */
}
</style>

帖子宽、高的设置无需解释，这里要做的是记下两个属性名称， width 和 height，分别用来表示宽度和高度。CSS属性名称用来描述HTML元素某个特性，名称是固有的，常用到的要一一记住。此外，这里也应了解一下CSS注释的写法，/* 注释内容 */，这是CSS注释唯一的写法。注释的作用主要是做标记、对代码进行解释或说明。背景属性是我们要重点讨论的知识点，属性 background 表示背景，这是 id="mama" 元素的背景属性，首先用 url('图片地址') 这样的固定方式将图片作为元素的背景图片，接着用 no-repeat 参数表明背景图片不重复，最后用 center / cover 表示：图片位置居中，即居于帖子元素的中央，图像的大小是 cover，cover有封面之意，cover 用来表示背景图像的尺寸是封面式尺寸，它可以保证封面女郎不被压缩变形，就是对审美活动没有影响的意思，但是要观赏全身嘛……这个以后再说吧。background 属性的值信息量有点大，今后我们会有一讲甚至更多讲专门讨论它。这里要特别注意的是关于 background 的背景图片的尺寸和帖子实际宽高尺寸的关系问题，一般来说，尽可能让图片的尺寸和帖子的实际尺寸相一致，如若不能一致，二者间的差距也不应太大，否则，上面的 cover 背景尺寸设置方案虽然可以保证图片不会变形扭曲，但可能会有过多的内容被裁切掉。

下面谈谈帖子的定位问题。帖子要定位于合理的地方，CSS里 ① 需要用到一个position 属性，position 是“位置”的意思，我们做帖会用到的有两个可选值，一个是 relative，相对之意，表示相对定位，另一个是 absolute，绝对之意，表示绝对定位。帖子容器应使用相对定位，因为相对定位的元素它占据页面应分派给它的实际空间，空间的大小就是它的宽高尺寸，且其地盘不会被其他元素挤占，而绝对定位的元素，虽然可以拥有自己的宽高尺寸，但它在页面元素群中不实际占据空间，处于游离状态，随时可能被挤占或覆盖。试看以下的演示，点击图片下方的按钮可以切换镁铝图片的相对定位和绝对定位这两种定位方式，看看会发生什么：

将第一张图片改为绝对定位

从演示中应该可以感受到：相对定位时，戴眼镜的菇凉的地盘是神圣不可侵犯的，绝对定位时，花朵就去霸占了她的位置。还好是花朵，人美花来助，结局皆大欢喜，但是呀请尊贵的小童鞋认真地想一想，如果花朵不是花朵而是一只癞蛤蟆呢？

感谢花菇凉让我们明白了帖子容器要使用 position: relative; 的相对定位方式，但这还不够，所以接着介绍 ② margin 属性。这是元素的外边距属性，定义元素上、右、下、左四个边缘和外部拉开的距离，我们将利用 margin 这个外边距属性来调整帖子在论坛框架下的位置，使得帖子基于水平方向居中。千山论坛的布局，帖子所在的“黑板”存在 90px 的向右偏移量，所以，我们这么设置 margin 属性：

<style>
#mama {
	position: relative; /* 帖子相对定位 */
	margin: 230px 0 30px calc(50% - 730px); /* 外边距设置使得帖子处在合适的位置 */
	width: 1280px;
	height: 720px;
	background: url('图片地址') no-repeat center / cover;
}
</style>

position: relative; 必须，这是帖子通过外边距或其他方式进行定位的基础，也是将来帖子顺利收拢其下诸多子元素的依赖。代码中，margin 属性我们设置了四个值，第一个是 230px，指上外边距，说的是 id="mama" 的 div 上边缘的外边距是 230px，这么设置的作用是让帖子容器的上边缘留空230个像素，以便令帖子不覆盖发帖用户的头像；第二个值是 0，是右变的外边距，值为0才能确保最后一个值即左外边距的设置不受挤占、影响；第三个是 30px，指下边的外边距，这样帖子和底部也拉开一定距离，不会紧贴着评分区域而导致评委评分困难；第四个是左边的外边距，它用上了CSS的计算函数 calc(...)，小括号里面的是算式，加减乘除符号两头一定要留有一个空格，然后，算式里面的 50% 指左外边距的值是 50%，但要减去 730px，这样帖子就在水平方向绝对居中。那这个 730px 又是如何得来的？这是有依据的，计算公式是 1280÷2+90 而得，其中 1280 是我们设置的帖子的宽度，90是帖子在论坛框架下的向右偏移量（注意不同的论坛偏移量不一样）。这里，知道 calc() 函数是这么用的就好，里面的算式能理解最好，不能理解的照着做就行，小括号里减去多少个px能够准确无误计算出来就行了。

本节，帖子的定位略为复杂，它需要 position: relative; 的支持，通过 margin 外边距属性对四个方向按 上、右、下、左 的顺序一一设定对应值，左外边距值用到 calc 计算函数，根据帖子宽度和论坛右偏移量确定小括号里 50% - 多少px，这是重点也是难点，理解不了也要强记计算与设置方法。

最后给出一个实例代码，它可以在千山论坛当下的布局状况下水平居中，大家可以找个地方试一试，并思考margin属性设置中， calc() 计算函数里小括号内的算式中 50% 减去的为什么是 630px（代码在第四行）：

<style>
#mama {
	position: relative;
	margin: 230px 0 30px calc(50% - 630px);
	width: 1080px;
	height: 720px;
	background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
</style>

<div id="mama"></div>

以上代码可以存为本地 .html 文档然后双击运行以查看效果，也可以复制到 pencil code 直接运行。本地独立文件和 pencil code 运行环境都不存在右偏移量，所以 calc() 函数里减去的是帖子的一半，上外边距则设为 30px 即可。

返回目录